VideoJs使用总结

偏执的太偏执、 2022-03-02 05:10 905阅读 0赞

#### VideoJs简介 ####

VideoJs是用于视频播放的javascript的库。

[官方文档][Link 1]

#### 使用方法 ####

#### 常用配置 ####

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

[Link 1]: https://docs.videojs.com/