flv.js 实现播放本地视频文件的技巧

原创
2022/09/04 22:00
阅读数 11

目录

  • 问题

  • 解决

  • 结尾

问题

有时候某些播放器无法直接播放本地视频文件,因此需要在本地启一个 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源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部