vue中使用video.js

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


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

 

template页面:

视频出错了!

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

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

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

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   (使用技巧)

 

你可能感兴趣的:(vue)