python：Sanic和vue制作视频站

相比Flask和Django，Sanic是异步的web框架，据闻性能更佳。

按捺不住折腾的心，用Sanic结合vue做了一个视频站demo。

一、搭建环境

前端

安装node

nodejs官网：https://nodejs.org/en/download/

配置依赖包路径

1. D:\nodejs目录下新建node_global、node_cache两个文件夹
2. 运行以下2条命令：
npm config set prefix "D:\nodejs\node_global"  
npm config set cache "D:\nodejs\node_cache"
3. 设置环境变量
(1)用户变量path新增：D:\nodejs\node_global
(2)新增系统变量NODE_PATH,变量值为D:\nodejs\node_global\node_modules

设置下载源

配置镜像站
npm config set registry=http://registry.npm.taobao.org 

安装cnpm 
npm install -g cnpm --registry=http://registry.npm.taobao.org

设置cnpm下载源
cnpm config set registry=http://registry.npm.taobao.org

安装vue

cnpm install vue -g
安装脚手架
旧版本：cnpm install vue-cli -g
新版本：cnpm install @vue/cli -g

后端

新建虚拟环境

pdm init

安装Sanic

pdm add sanic
注：sanic仅支持Python3.7以上版本，系统需要Microsoft Visual C++14以上支持

二、创建项目

前端

可视化创建项目

vue ui

安装配置(在后台面板直接安装)

Babel 解决兼容
Router 路由
Linter / Formatter 代码规范
axios依赖库和后端交互
Element-ui 组件库
xgplayer / DPlayer 播放器

后端

新建一个server.py就完事……

三、撸代码

前端

template和style等，此处省略一万字

播放页面的js代码：

import Player from 'xgplayer'
import Hls from 'hls.js'



    
import DPlayer from 'dplayer'
export default {
  data () {
    return {
      search_input: '请输入内容',
      videourl: '',
      player: null
    }
  },
  methods: {
    async getVideo () {
      const VideoId = this.$route.query.id
      const { data: res } = await this.$http.get('videourl', { params: { VideoId } })
      this.videourl = res.video_url
      const videotype = this.videourl.substr(this.videourl.lastIndexOf('.') + 1)
      console.log(videotype)
      this.initPlayer(videotype)   //在此处调用创建播放器的方法
    },
    initPlayer (typeofvideo) {
      if (typeofvideo === 'm3u8') {
        this.player = new DPlayer({
          container: document.getElementById('mse'),
          autoplay: true,
          video: {
            url: this.videourl,
            type: 'customHls',
            customType: {
              customHls: function (video, player) {
                const hls = new Hls()
                hls.loadSource(video.src)
                hls.attachMedia(video)
              }
            }
          }
        })
      } else if (typeofvideo === 'mp4') {
        this.player = new Player({
          id: 'mse',
          url: this.videourl,
          width: '100%',
          height: '100%'
        })
      }
    }
  },
  created () {
    this.getVideo()
  }
}

后端

核心代码就这两句……

from sanic import Sanic
from sanic.response import json,file,file_stream

app = Sanic('__name__')

app.static('/dist','./dist')  #设置前端编译后的源码目录

@app.get('/')
async def index(request):     #返回前端主页
    return await file('./dist/index.html')

@app.get('/api/local/')
async def sendlocalmp4(request,file_name):
    return await file_stream('./media/'+file_name)  #播放本地的视频

if __name__ == '__main__':
    app.run(debug=True)

四、大功告成

首页：

播放页：

Sanic文档：https://sanic.dev/zh/
Element文档：https://element.eleme.cn/#/zh-CN
DPlayer:https://github.com/DIYgod/DPlayer
西瓜播放器：https://v2.h5player.bytedance.com/gettingStarted/