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>
