videoJs常用方法、事件、VUE中使用的注意事项
转载声明：
本文为摘录自“csdn博客”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2021-10-20 11:36:44
Vue中使用原生videojs进行播放rtmp格式的视频流（类似直播）
1.vue中使用videoJS 如果需要播放flash视频，需要下载5.0及以下的版本，否则无法播放falsh
2.参考文档1（options参数，版本下载）
3.参考文档2（videoJS 常用事件及方法）
4.参考文档（demo及参数和事件）
5.vue中动态切换src的方法（见：mounted函数）
<template>
<div>
<div>
<video ref="viodeRef" id="video2"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
poster="http://static.qiakr.com/app/full_res.jpg">
<!--type="application/x-mpegURL"-->
<source :src="playOptions.source[0].src" >
<p class="vjs-no-js">不支持播放</p>
</video>
<div class="actions">
<a href="javascript:;" id="btn1">播放</a>
<a href="javascript:;" id="btn2">暂停</a>
<a href="javascript:;" id="btn3">隐藏音量调节控件</a>
<a href="javascript:;" id="btn4">设置宽高</a>
<a href="javascript:;" id="btn6">隐藏</a>
<a href="javascript:;" id="btn5">显示</a>
<a href="javascript:;" id="btn7">设置其它资源</a>
<a href="javascript:;" id="btn8">销毁</a>
</div>
<router-link to="/lazyload">跳转</router-link>
<div class="methods" style="font-size: 18px;text-align: left;margin-left: 50px;background-color: skyblue">
方法：
autoplay：自动播放 <br>
buffered <br>
bufferedEnd <br>
bufferedPercent <br>
cancelFullScreen：取消全屏 deprecated <br>
controls <br>
currentSrc <br>
currentTime:当前时间 <br>
currentType <br>
dispose:销毁实例，在退出页面的时候 一定要销毁 <br>
duration <br>
ended <br>
error <br>
exitFullscreen <br>
init :初始化 <br>
isFullScreen deprecated //摈弃 <br>
isFullscreen ：全屏（用这个方法前先使用 requestFullscreen） <br>
language <br>
load <br>
loop <br>
muted <br>
pause <br>
paused <br>
play <br>
playbackRate <br>
poster <br>
preload:预加载，一般直接用auto 根据浏览器自动执行加载 <br>
remainingTime <br>
requestFullScreen deprecated <br>
requestFullscreen <br>
seeking <br>
src <br>
volume :静音 <br>
addChild inherited <br>
addClass inherited <br>
buildCSSClass inherited <br>
children inherited <br>
contentEl inherited<br>
createEl inherited<br>
dimensions inherited<br>
el inherited<br>
enableTouchActivity inherited<br>
getChild inherited<br>
getChildById inherited<br>
hasClass inherited<br>
height inherited<br>
hide inherited<br>
id inherited<br>
initChildren inherited<br>
name inherited<br>
off inherited<br>
on inherited ：绑定事件<br>
one inherited<br>
options inherited：视频参数 是一个对象<br>
player inherited<br>
ready inherited<br>
removeChild inherited<br>
removeClass inherited<br>
show inherited<br>
trigger inherited<br>
triggerReady inherited<br>
width inherited<br>
</div>
<div style="font-size: 16px;background-color: beige;text-align: left;margin-left: 50px;margin-top: 50px;">
事件：<br>
durationchange<br>
ended<br>
firstplay<br>
fullscreenchange<br>
loadedalldata<br>
loadeddata<br>
loadedmetadata<br>
loadstart<br>
pause<br>
play<br>
progress<br>
seeked<br>
seeking<br>
timeupdate<br>
volumechange<br>
waiting<br>
resize inherited<br>
</div>
</div>
</div>
</template>
<script>
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
// import 'videojs-flash'
import 'videojs-flash/dist/videojs-flash';
export default {
name: 'Videojs',
data:function () {
return {
playOptions:{
autoplay: false, // 自动播放
controls: true, // 是否显示控制栏
notSupportedMessage: '此视频暂无法播放，检查相机状态是否正常或请查看是否安装flash',//无法播放时显示的信息
techOrder: ['flash', 'html5'],// 兼容顺序
sourceOrder: true,
flash: {
swf: '../../../static/VideoJS.swf' //如果是本地视频 需要相应的videoJS.swf文件
},
source:[{
type: 'rtmp/flv',
src:'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
}],
poster:'', //播放器 默认图片
// controlBar: { // 配置控制栏
// timeDivider: false, // 时间分割线
// durationDisplay: false, // 总时间
// progressControl: true, // 进度条
// customControlSpacer: true, // 未知
// fullscreenToggle: true // 全屏
// },
},
myPlayer:''
}
},
mounted:function () {
//切换src的方法：
//---(一定要在load里面添加上url，然后执行play函数，play函数执行后会自动执行ready,loadedmetadata,timeupdate等函数)
_this.myPlayer.off('timeupdate'); //移除timeupdate事件
_this.myPlayer.reset(); //重置 video
_this.myPlayer.src([
{
type: 'rtmp/mp4',
src: _this.currentSrc
},
]);
_this.myPlayer.load( _this.currentSrc);
_this.myPlayer.play();
//-----------------------------------------------------------------------end
const _this = this;
_this.myPlayer = videojs('video2',_this.playOptions,function () {
//--------methods
this.load();
this.play();
//this.pause();//暂停
//------events 绑定事件用on 移除事件用off
this.on('loadstart',function () {
console.log('loadstart------------')
});
this.on('loadedmetadata',function () {
console.log('loadedmetadata---视频源数据加载完成----')
});
this.on('loadeddata',function () {
console.log('loadeddata---渲染播放画面----');//autoPlay必须为false
});
this.on('progress',function () {
console.log('progress-------加载过程----')
});
this.on('timeupdate',function () {
const curTime = this.currentTime();
// console.log('timeupdate-------------',curTime);
})
this.off('timeupdate',function () {
console.log('off----------')
})
});
},
methods:{
},
beforeDestroy:function(){
const videoDom = this.$refs.viodeRef; //不能用document 获取节点
videojs(videoDom).dispose(); //销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function
}
}
</script>
<style scope>
</style>
