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