图书馆网站建设策划历下区网站建设公司

监控视频流为hls格式，需要打开或刷新页面自动开始播放，需要安装dplayer和hls.js插件，插件直接npm装就行，上代码

import DPlayer from 'dplayer'
import Hls from 'hls.js'
//jquery是用来注册点击事件，实现自动开始播放
import $ from 'jquery'new DPlayer({container: document.getElementById('monitor1'),  // 注意：这里一定要写div的domlang: 'zh-cn',video: {url: url?url:'',  // 这里填写.m3u8视频连接,此处判断不可少，如果链接为空需要赋值为空type: 'customHls',customType: {customHls: function(video) {const hls = new Hls()hls.loadSource(video.src)hls.attachMedia(video)}}},autoplay:true,mutex:false,live:true
})
//模拟单击或是双击播放视频，即自动开始播放，无需专门点击后才播放
$('monitor1').on('click',this.checkMonitor)
$('monitor1').on('doubleClick',this.checkMonitor)//必要函数
checkMonitor = e =>{console.log(e);
}

嵌入视频流结构体

<div id={'monitor1'}className={styles.monitor}onClick={this.checkMonitor}onDoubleClick={this.checkMonitor}
/>

用于解决hls格式视频嵌入及自动播放功能。