国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VideoJs使用總結(jié)

adam1q84 / 1679人閱讀

摘要：簡(jiǎn)介是用于視頻播放的的庫(kù)。官方文檔使用方法控制條修改指向播放器已經(jīng)準(zhǔn)備好了播放結(jié)束了常用配置示例啟用控制條隱藏重播圖標(biāo)豎直的音量控制隱藏播放進(jìn)度控制事件監(jiān)控播放結(jié)束播放中擴(kuò)展插件視頻列表管理視頻列表顯示

VideoJs簡(jiǎn)介

VideoJs是用于視頻播放的javascript的庫(kù)。

官方文檔

使用方法 

    
    


var player = videojs("player", {
    controls: true, //控制條：boolean
    controlBar: {
        playToggle: {
            replay: false
        },
        progressControl: false
    }
}, function onPlayerReady() {
    // 修改this指向
    var vdthis = this;
    videojs.log("播放器已經(jīng)準(zhǔn)備好了!");

    //this.play();

    this.on("ended", function() {
        videojs.log("播放結(jié)束了!");
    });
});
常用配置 
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: {
    // 隱藏重播圖標(biāo)
    playToggle: {
      replay: false
    },
    // 豎直的音量控制
    volumePanel: {
      inline: false
    },
    // 隱藏播放進(jìn)度控制
    progressControl: false 
  }
});
事件監(jiān)控 
// 播放結(jié)束
this.on("ended", function(e) {}
// 播放中
this.on("timeupdate", function(e) {}
擴(kuò)展插件

視頻列表管理 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")
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/101314.html

相關(guān)文章

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

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

    chavesgu 評(píng)論0 收藏0

  • webpack與video.js一同使用的一些坑

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

    MorePainMoreGain 評(píng)論0 收藏0

  • videojs--跨瀏覽器的HTML視頻播放器（可自定義樣式）

    摘要：官網(wǎng)寫在前面，為什么選擇這個(gè)播放器，因?yàn)橛形臋n，支持添加插件，很方便自定義樣式，比較活躍，有各種解決方案等不過沒想到有那么多坑最簡(jiǎn)單的靜態(tài)頁(yè)面使用方法動(dòng)態(tài)插入時(shí)初始化方法或者或者更多詳細(xì)使用方法請(qǐng)查看官方文檔常見問 官網(wǎng) 寫在前面，為什么選擇這個(gè)播放器，因?yàn)橛形臋n，支持添加插件，很方便自定義樣式，比較活躍，github有各種bug解決方案等不過沒想到有那么多坑 最簡(jiǎn)單的靜態(tài)頁(yè)面使用方法...

    klinson 評(píng)論0 收藏0

  • video.js 源碼分析（JavaScript）

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

    Neilyo 評(píng)論0 收藏0

  • video.js 源碼分析（JavaScript）

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

    simpleapples 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<