flv.js为核心,使用构造器来创建video标签,当然flv文件流必须是正确推送,flv.js会把flv视频流解析成为blob对象来播放。
经过实际 测试这个方案是可行的,bilibili开源的这个flvjs确实好用,以下是相关代码文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flv.js test</title>
</head>
<body>
<script src="flv.min.js"></script>
<!--flvjs cdn https://www.bootcdn.cn/flv.js/-->
<video id="videoElement" width="800"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
"isLive": true,
url: '' //flv文件流地址
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
由于是本地文件,为防止跨域 CORS拦截,你得把这个文件在server服务容器中启动或者启用代理都可以,这个默认是没有开启播放的,所以需要自己设置显示播放控件来控制播放。
以上图示 Media Source Extensions™的工作流程 W3C的示例.