VideoJs使用總結

不吃香菜發表於2019-02-16
IDEJS

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

相關文章