flv.js 实现播放本地视频文件的技巧
目录
- 问题
- 解决
- 结尾
问题
有时候某些播放器无法直接播放本地视频文件，因此需要在本地启一个 HTTP 静态服务，通过 URL 的形式实现播放目的。比如，自己在使用 flv.js 播放本地视频文件时就遇到了这个问题。
解决
一、启动 HTTP 静态服务
在本地启动一个 HTTP 静态服务还是非常简单的，只要我们安装了 Python 工具，执行如下命令就可以启动一个 HTTP 的静态服务：
python3 -m http.server
利用静态服务就得到了一个对应视频文件的播放地址：
http://172.31.13.8:8000/qrq.out.flv
二、播放 URL
播放本地视频文件的代码如下：
const video = document.getElementById('player');
player.unload();
player.detachMediaElement();
player.destroy();
player = flvjs.createPlayer({
type: 'flv',
url: "http://172.31.13.8:8000/qrq.out.flv"
});
player.attachMediaElement(video);
player.load();
video.addEventListener('play',()=>{
console.log('开始播放')
})
video.addEventListener('ended',()=>{
console.log('结束播放')
},false)
video.addEventListener('error',()=>{
console.log('播放错误')
})
替换 url 地址后，刷新播放，又遇到了另外一个问题，浏览器发起请求后没有响应，网络提示：no-referrer-when-downgrade，控制台报错：
Uncaught (in promise) Error: Unhandled error. (undefined)
具体报错信息如下图所示：
具体现象如下图所示：
三、允许静态服务跨域
上述报错出现的原因是因为跨域导致的，因此，我们需要修改 HTTP 静态服务的属性，让其允许跨域访问。创建一个 python 脚本，命名为 start.py，内容如下：
#!/usr/bin/env python
try:
# Python 3
from http.server import HTTPServer, SimpleHTTPRequestHandler, test as test_orig
import sys
def test (*args):
test_orig(*args, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
except ImportError: # Python 2
from BaseHTTPServer import HTTPServer, test
from SimpleHTTPServer import SimpleHTTPRequestHandler
class CORSRequestHandler (SimpleHTTPRequestHandler):
def end_headers (self):
self.send_header('Access-Control-Allow-Origin', '*')
SimpleHTTPRequestHandler.end_headers(self)
if __name__ == '__main__':
test(CORSRequestHandler, HTTPServer)
然后，执行 start.py 脚本，默认启动 8000 端口，命令如下：
python start.py
当然，我们也可以指定端口，比如 9000 端口，命令如下：
python start.py 9000
结尾
此时，启动的 HTTP 静态服务就是允许跨域的，再使用 flv.js 播放器播放刚才 URL 的视频文件，终于可以正常显示画面了，如下图所示：
好了，至此，flv.js 播放本地文件的方法就介绍完了，希望可以帮助大家。
作者简介：😄大家好，我是 Data-Mining（liuzhen007），是一名典型的音视频技术爱好者，前后就职于传统广电巨头和音视频互联网公司，具有丰富的音视频直播和点播相关经验，对 WebRTC、FFmpeg 和 Electron 有非常深入的了解。同时也是 CSDN 博客专家（博客之星）、华为云享专家（共创编辑、十佳博主）、51CTO社区编辑、InfoQ 签约作者，欢迎关注我分享更多干货！😄
腾讯云开发者
