vue中使用video.js

cnpm install video.js
cnpm install videojs-contrib-hls --save

main.js中引入css
import 'video.js/dist/video-js.css'

 

template页面：

<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>

vjs-big-play-centered：播放按钮放在中间

vjs-16-9：横屏竖屏时播放器宽高自适应

<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

踩坑了很多坑，网上的与video.js相关的文档也少的可怜，期间不知道绕了多少弯路，最终也算是都解决了，也找到了写的很好的文档，可以借鉴一波

http://coderlt.coding.me/2016/02/26/videojs-readme/  (使用方法)

https://www.awaimai.com/2053.html#5   （使用技巧）