VideoJs使用总结

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-playlistplayer.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-uiplayer.playlistUi({ el: document.getElementById(‘playList’)});