videojs重播_VideoJs运用总结

VideoJs简介

VideoJs是用于视频播放的javascript的库。

使用方法

var player = videojs('player', {

controls: true, //掌握条：boolean

controlBar: {

playToggle: {

replay: false

},

progressControl: false

}

}, function onPlayerReady() {

// 修正this指向

var vdthis = this;

videojs.log('播放器已预备好了!');

//this.play();

this.on('ended', function() {

videojs.log('播放完毕了!');

});

});

经常使用设置

Player

├── MediaLoader (has no DOM element)

├── PosterImage

├── TextTrackDisplay

├── LoadingSpinner

├── BigPlayButton

├─┬ ControlBar

│ ├── PlayToggle

│ ├── VolumePanel

│ ├── CurrentTimeDisplay (hidden by default)

│ ├── TimeDivider (hidden by default)

│ ├── DurationDisplay (hidden by default)

│ ├─┬ ProgressControl (hidden during live playback)

│ │ └─┬ SeekBar

│ │ ├── LoadProgressBar

│ │ ├── MouseTimeDisplay

│ │ └── PlayProgressBar

│ ├── LiveDisplay (hidden during VOD playback)

│ ├── RemainingTimeDisplay

│ ├── CustomControlSpacer (has no UI)

│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes)

│ ├── ChaptersButton (hidden, unless there are relevant tracks)

│ ├── DescriptionsButton (hidden, unless there are relevant tracks)

│ ├── SubtitlesButton (hidden, unless there are relevant tracks)

│ ├── CaptionsButton (hidden, unless there are relevant tracks)

│ ├── AudioTrackButton (hidden, unless there are relevant tracks)

│ └── FullscreenToggle

├── ErrorDisplay (hidden, until there is an error)

├── TextTrackSettings

└── ResizeManager (hidden)

示例

let player = videojs('myplayer', {

controls: true, //启用掌握条：boolean

controlBar: {

// 隐蔽重播图标

playToggle: {

replay: false

},

// 竖直的音量掌握

volumePanel: {

inline: false

},

// 隐蔽播放进度掌握

progressControl: false

}

});

事宜监控

// 播放完毕

this.on('ended', function(e) {}

// 播放中

this.on('timeupdate', function(e) {}

扩大插件

视频列表治理 videojs-playlist

player.playlist([{

name: '01',

sources: [{

src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',

type: 'video/mp4'

}],

poster: 'http://media.w3.org/2010/05/sintel/poster.png'

}, {

name: '02',

sources: [{

src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',

type: 'video/mp4'

}],

poster: 'http://media.w3.org/2010/05/bunny/poster.png'

}, {

....

}]

视频列表UI显现 videojs-playlist-ui

player.playlistUi({

el: document.getElementById('playList')

});