前言 写在最前面:由于公司突然要搞个移动端h5,可以在手机上查看监控视频,但我们公司的视频直播流都是flv格式的,所以我找了个插件:Dplayer来实现。 注意:!!!!ios不支持flv格式的直播流。Dplayer、VideoJS这些就不说了,基于MSE解码的视频播放器在ios上都无法使用,说自己能支持的 EasyPlayer.js、WXInlinePlayer 我也试过了,无法支持。
所以最终还是让后端转流了,转成HLS格式。
提示:记录一下Dplayer播放flv格式的视频的步骤。
一、DplayerDplayer官网指南
二、使用步骤 1.引入库不管使用什么样的播放器,要支持FLV格式的视频流,就必须要引入flv.js。
flv.js是由bilibili开发的HTML5 Flash 视频 (FLV) 播放器。
flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF(分段 MP4)片段,然后通过媒体源扩展API将 mp4 片段提供给 HTML5元素。
可以使用标签在html文件的header中使用cdn引入。
如下:
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.0/flv.js">script>
但由于我们是react项目,所以直接安装依赖包就好了。
yarn add flv.js
yarn add dplayer
2.实际使用
代码如下:
import React, {useEffect} from 'react';
import FlvJs from 'flv.js';
import DPlayer from 'dplayer';
const VideoPlayer = () => {
useEffect( () => {
const url = 'http://stream-0.vmr-prd.ty.supremind.info/live/01000000CDEE8E2CF9D070160100000000000000.flv';
const dp = new DPlayer({
container: document.getElementById('video'),
video: {
url,
type: 'customFlv',
customType: {
customFlv (video) {
const flvPlayer = FlvJs.createPlayer({
type: 'flv',
url: video.src,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
},
},
},
});
dp.play();
}, []);
return (<div id="video" />);
}
export default VideoPlayer;
该处使用的播放地址是公司内部地址,不一定有效,可以修改为可用的flv地址。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)