如何在vue中使用flv.js在本地测试http-flv播放
在网上找了很久可以直接用来测试播放的flv格式流地址,都没找到能用的,于是自己搞了个flv流来测试,以下就是如何自己搭建flv流的具体步骤,记录一下。
·
在网上找了很久可以直接用来测试播放的flv格式流地址,都没找到能用的,于是自己搞了个flv流来测试,以下就是如何自己搭建flv流的具体步骤,记录一下。
1.安装ffmpeg
从ffmpeg官网下载ffmpeg安装包
具体安装步骤可参考以下文章:
基于EasyDarwin和ffmpeg推流和拉流rtsp
2.安装python
安装步骤参考:Python安装教程(新手)
3.用python搭建一个http服务
以上环境安装完成后,win+r 输入cmd打开任务窗口,通过执行如下命令创建一个最简单的 HTTP 服务器:
python -m http.server
服务器默认监听端口是 8000,支持自定义端口号:
python -m http.server 9000
此时就是监听9000端口
在浏览器中输入http://localhost:8000可以看到文件夹目录。
4.ffmpeg将本地MP4转为flv格式视频
输入指令
ffmpeg.exe -re -i F:/video/30year.mp4 -c:v copy -c:a copy F:/video/30year.flv
注:指令中 F:/video/30year.flv 为输出flv格式视频流的地址,将这个地址跟 start.py 放在同一个目录下。
此时就得到了可以播放的flv视频地址:http://localhost:8000/30year.flv
此时在浏览器中播放会报错
这是由于跨域问题引起的,因此,我们需要修改 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
python start.py
以下贴上我的测试demo:
先安装flv.js
npm install flv.js
<template>
<div class="wrapper">
<video id="videoElement" controls autoplay muted width="800px" height="600px">
</video>
</div>
</template>
<script>
import flvjs from "flv.js";
export default {
data() {
return {
player: null,
}
},
mounted() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: 'http://localhost:8000/30year.flv' //测试地址
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
},
methods: {
},
beforeDestroy() {
// 播放器存在清除播放器
if (this.player) {
this.player.destroy()
}
}
}
</script>
<style scoped>
.wrapper {
width: 800px;
height: 600px;
margin: 100px 30px;
overflow: hidden;
position: relative;
}
.iframe {
width: 1024px;
height: 608px;
position: absolute;
top: -150px;
left: -120px;
}
</style>
页面运行结果:
成功播放啦
感谢大佬的文章:
flv.js 实现播放本地视频文件的技巧
更多推荐
已为社区贡献3条内容
所有评论(0)