VideoJs使用總結

adam1q84 發布于2019-08-23 14:54 / 1675人閱讀

摘要：簡介是用于視頻播放的的庫。官方文檔使用方法控制條修改指向播放器已經準備好了播放結束了常用配置示例啟用控制條隱藏重播圖標豎直的音量控制隱藏播放進度控制事件監控播放結束播放中擴展插件視頻列表管理視頻列表顯示

VideoJs簡介

VideoJs是用于視頻播放的javascript的庫。

官方文檔

使用方法

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

云服務器 GPU云服務器使用方法總結 videojs videojs cdn 年終總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101314.html

videojs 播放無法通過URI確定格式的視頻源(flv/mp4)

摘要：結果跑起來發現原來里面同時存在格式視頻，并且原來線上的視頻是播不了的，并且在上是沒有體現的，并且是一個項目我不會，并且沒有源碼，我的內心全是草擬馬。代碼很簡單，首先支持播放，其次出錯時切換資源。前言前人坑我千百遍我待前人如初戀。最近公司開源節流搬機房，需要把原來的服務遷移，然后屁顛屁顛的把一個跑了幾年沒人管的視頻網站（知道這個網站的人都走了）遷移到新的機房去。結果跑起來發現原來里...

chavesgu 2019-08-02 10:51 評論0 收藏0
webpack與video.js一同使用的一些坑

摘要：是一個優秀的視頻播放器庫，不過官網的示例中，是作為全局變量引入的。如果我們的項目使用風格的模塊，用來做打包的話，就需要做一些額外的工作。本文介紹我在使用的時候遇到的一些坑。這個是用來處理文件的。第二種方法是使用，直接把全局變量暴露出來。 video.js是一個優秀的視頻播放器庫，不過官網的示例中，是作為全局變量videojs引入的。如果我們的項目使用ES6風格的模塊，用webpack來...

MorePainMoreGain 2019-08-20 12:32 評論0 收藏0
videojs--跨瀏覽器的HTML視頻播放器（可自定義樣式）

摘要：官網寫在前面，為什么選擇這個播放器，因為有文檔，支持添加插件，很方便自定義樣式，比較活躍，有各種解決方案等不過沒想到有那么多坑最簡單的靜態頁面使用方法動態插入時初始化方法或者或者更多詳細使用方法請查看官方文檔常見問官網寫在前面，為什么選擇這個播放器，因為有文檔，支持添加插件，很方便自定義樣式，比較活躍，github有各種bug解決方案等不過沒想到有那么多坑最簡單的靜態頁面使用方法...

klinson 2019-08-22 11:01 評論0 收藏0
video.js 源碼分析（JavaScript）

摘要：語法部分采用的是標準。那么整個播放器是怎么把播放器的加載到中的呢在的構造函數里可以看到先生成，然后初始化父類遍歷屬性，將中的類實例化并將對應的嵌入到的屬性中，最后在的構造函數中直接掛載到標簽的父級上。 video.js 源碼分析（JavaScript）組織結構繼承關系運行機制插件的運行機制插件的定義插件的運行控制條是如何運行的 UI與JavaScript對象的...

Neilyo 2019-08-29 11:24 評論0 收藏0
video.js 源碼分析（JavaScript）

摘要：語法部分采用的是標準。那么整個播放器是怎么把播放器的加載到中的呢在的構造函數里可以看到先生成，然后初始化父類遍歷屬性，將中的類實例化并將對應的嵌入到的屬性中，最后在的構造函數中直接掛載到標簽的父級上。 video.js 源碼分析（JavaScript）組織結構繼承關系運行機制插件的運行機制插件的定義插件的運行控制條是如何運行的 UI與JavaScript對象的...

simpleapples 2019-08-21 14:35 評論0 收藏0