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

klinson 發布于2019-08-22 11:01 / 2050人閱讀

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

官網

寫在前面，為什么選擇這個播放器，因為有文檔，支持添加插件，很方便自定義樣式，
比較活躍，github有各種bug解決方案等
不過沒想到有那么多坑

最簡單的靜態頁面使用方法

動態插入HTML時初始化方法

videojs("example_video_id", {}, function(){
  // Player (this) is initialized and ready.
});

或者

videojs(document.getElementById("example_video_id"), {}, function() {
  // This is functionally the same as the previous example.
});

或者

videojs(document.getElementsByClassName("awesome_video_class")[0], {}, function() {
  // You can grab an element by class if you"d like, just make sure
  // if it"s an array that you pick one (here we chose the first).
});

更多詳細使用方法請查看官方文檔

常見問題匯總

1，pc端正常，IOS上面不起作用

data-setup="{"customControlsOnMobile": true}"http://版本4

data-setup="{"nativeControlsForTouch": false}" //版本5

或者寫在
videojs(document.getElementById("example_video_id"), {"nativeControlsForTouch": false}, function() {
  // This is functionally the same as the previous example.
});

2，其它錯誤

先調用官方的視頻做測試，http://vjs.zencdn.net/v/oceans.mp4，

如果這個正常，其它的格式異常，請參考：

[異常1][2]  http://stackoverflow.com/questions/16697473/videojs-4-native-controls-now-default-on-mobile

[異常2][3] http://stackoverflow.com/questions/26182101/videojs-hls-not-working

3,只是在Iphone上不起作用（官網示例 5.8）參考：github issue

if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) {
                this.setControls(true);
            }
            
 //替換為
if ((browser.TOUCH_ENABLED || browser.IS_IPHONE || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true){
                this.setControls(true);
            }

4,默認不全屏播放

前臺：

IOS 參考：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-SW30

云服務器 GPU云服務器 h5視頻播放器可自定義樣式可自定義大小 html表格定義樣式播放視頻的html

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

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

audiojs--跨瀏覽器的HTML音頻播放器（可自定義樣式）

摘要：一款跨瀏覽器的音頻播放器，可惜例子和文檔都比較少英文文檔官網使用方法第一步引用文件第二步，全局初始化第三步，在需要的地方放上下面類似的代碼注意是直接閉合標簽然后，然后就沒有了，以上只適用靜態的頁面，如果動態添加音頻怎么辦相信好多人都需要這種一款跨瀏覽器的音頻播放器，可惜例子和文檔都比較少英文文檔官網使用方法：第一步引用文件：第二步，全局初始化： audiojs.ev...

GHOST_349178 2019-08-22 11:01 評論0 收藏0
記錄一波video.js的使用及問題

摘要：最近的項目中需要播放視頻，鑒于元素的一些坑及不想自己造輪子，于是就找到了端播放視頻使用量最多的插件，是國外開發者開發的，英語本身就不好的我看英文文檔簡直是折磨，國內又沒有中文文檔，能搜的到的基本是簡單的使用及最基本的的介紹，想要實現一些自定最近的項目中需要播放視頻，鑒于html5元素的一些坑及不想自己造輪子，于是就找到了web端播放視頻使用量最多的插件video.js，video.j...

crossoverJie 2019-08-23 17:01 評論0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。背景為什么要編寫 larkplayer？（注意，這里面有...

lijy91 2019-08-02 16:05 評論0 收藏0