目录
-
问题
-
解决
-
结尾
问题
有时候某些播放器无法直接播放本地视频文件,因此需要在本地启一个 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 签约作者,欢迎关注我分享更多干货!😄
本文分享自微信公众号 - 玩转音视频(gh_5da216074f34)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。