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

});