js全屏插件https://github.com/sindresorhus/screenfull.js/
下载
$ npm install screenfull
引入
import screenfull from 'screenfull'
使用
fullScreen() {
let ele = this.$refs.mainIframe
this.$refs['btn_full'].addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.toggle(ele) //如果是全屏则退出,否则是全屏
// screenfull.request(ele);
}
});
}
视频直播流 liveplayer 、flvjs
安装
npm install video.js@2.2.4 --save //安装指定版本vedioJs $ npm install video.js
npm install @liveqing/liveplayer
npm install --save flv.js
在html引入
<script src="js/liveplayer-lib.min.js"></script>
在需要使用的文件内引入(或者全局引入)
import videojs from 'video.js';
import flvjs from 'flv.js';
import LivePlayer from '@liveqing/liveplayer'
<LivePlayer :videoUrl="camera&&camera.flv?camera.flv:''"
:error="videoError"
:message="videoError"
:hasaudio="hasaudio" fluent autoplay live aspect='fullscreen'></LivePlayer>
components: {
LivePlayer
}
data(){
return{
hasaudio: false, // 是否有声音
camera: {
flv: '',//直播流地址
}, //当前选中的视频摄像机
}
},
methods(){
//播放器事件处理//
videoError: function (e) {
console.log("播放器错误:" + JSON.stringify(e));
},
}