VideoJs使用总结

共计 2085 个字符，预计需要花费 6 分钟才能阅读完成。

VideoJs 简介
VideoJs 是用于视频播放的 javascript 的库。
官方文档
使用方法
<div class=”video”>
<video id=”player” class=”video-js vjs-styles-defaults”>
<!–<source src=”//vjs.zencdn.net/v/oceans.mp4″>–>
</video>
<div id=”playList”></div>
</div>
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’)
});