超级简单的Vue中引入Video.js播放2

72 阅读 0 评论 48 点赞

我是靠谱客的博主香蕉云朵，最近开发中收集的这篇文章主要介绍超级简单的Vue中引入Video.js播放2，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需要引入的文件
templay

<div v-show='!isError'>
<video id="videobox" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" webkit-playsinline="true" playsinline="true" type="application/x-mpegURL" allowsInlineMediaPlayback=YES
webview.allowsInlineMediaPlayback=YES
width='100%' ref='videoRef' x5-video-player-fullscreen="true" :poster="posterSrc" >
<source id="sourceBox" :src="videoSrc">
<p class="vjs-no-js">不支持播放</p>
</video>
</div>
<div v-show='isError' class="errorTip"><p>视频出错了！</p></div>

js部分

<script>
组件页面引入：
import videojs from 'video.js'
import 'videojs-contrib-hls'
......
data(){
return{
videoSrc:'http://down.soundaer.com/live/stream_89003_sd/playlist.m3u8?k=d708550fbd49c58a1b8a8412c8623277&t=1553687908',
posterSrc:'https://matrimony001.100msh.net.cn/public/code/material/mp-7261-1554175849.jpg',
isError:false
}
}
mounted() {
//为避免在初始化video时播放源是空的，报播放源错误，需要先给source 的src赋值
var player = videojs('videobox',{
bigPlayButton: true,
textTrackDisplay: true,
posterImage: true,
errorDisplay: false,
controlBar: false,
playbackRates: [0.5, 1, 1.5, 2],
ControlBar:{
customControlSpacer: true
}
},
function onPlayerReady(){
this.play();
setTimeout(() => {
//延时确保能监听到视频源错误
var mediaError = this.error();
if(mediaError!=null && mediaError.code){
_this.isError=true
Dialog.alert({
message: '啊哦，播放出错了。<br>请刷新重试，如无法播放建议您观看其它内容。',
confirmButtonText:'确定'
}).then(() => {
_this.goback();
});
}
},1000);
});
// player.width(this.videoW)
//设置播放器宽度
},
beforeDestroy(){
const videoDom = this.$refs.videoRef;
//不能用document 获取节点
videojs(videoDom).dispose();
//销毁video实例，避免出现节点不存在 但是flash一直在执行,也避免重新进入页面video未重新声明
}
</script>

若是要自动切换地址,修改播放地址，重新加载文件

let arr = [‘XX’,‘XX’]

function setSrc(n){

oV1.src(arr[n]);
oV1.load();

oV1.currentTime(0);

}

-----videojs的组件：
Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle
-----Methods:
autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose
duration
ended
error
exitFullscreen
init
isFullScreen deprecated
isFullscreen
language
load
loop
muted
pause
paused
play
playbackRate
poster
preload
remainingTime
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited
-----event：
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

在这里我们用到了当前的 viduo 的方法
我们值得留心