好用的網頁視頻播放器xgplayer

西瓜播放器是字節跳動推出的一款播放器。

字節跳動的視頻業務大多數是短視頻，早期的時候我們在 video.js 基礎上做二次開發。后來發現很多功能達不到我們的要求，比如自定義UI的成本、視頻的清晰度無縫切換、視頻流量的節省。考慮到當前點播依舊是mp4居多，我們做了個大膽的假設：在播放器端加載視頻、解析視頻、轉換格式，讓不支持分段播放的mp4動態支持，這樣就無須轉換源視頻的格式，服務器端也無其他開銷。在這個動力下，我們在2017年年底完成了這項開發任務，並與2018年年初測試了穩定性和經濟收益。

在這個背景下，我們一次解析了 hls、flv 等視頻，這樣我們不再簡單的依賴第三方的視頻庫，只有掌握了底層技術才有優化的可能性。在不斷攻克 hls、flv 解析的背景下，我們增強了產品體驗，比如交互效果、進場動畫等。直到最近，我們想完善文檔並把播放器源代碼開源出來給更多的視頻從業者一個參考，我們一起交流學習，共同進步。

下面說下如何在網頁中集成這款播放器

1：首先要引入xgplayer的js文件

<script src="https://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

 這塊要注意下如果寫成 //cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js ，可能會有些問題，如果是https的網站沒什么問題，但是要是http的網站就不好了，可能是js站點強制了https,導致產生了302 ,會造成頁面的js加載失敗。

2：頁面防止容器標簽

<div id="xgplayer_div"></div>

3: 頁面初始化xgplayer

<script>
    let player = new Player({
        id: 'xgplayer_div',
        url: 'http://dede.linglujun.com/uploads/media/方形搖擺篩.mp4',
        fitVideoSize: 'auto',
        autoplay: true,
        volume: 0.6,
        loop: true,
        videoInit: true,
        controls:false,
        //fluid: true,
        disableProgress: false,
    });
</script>

初始化xgplayer的參數有很多，

主要有

autoplay:true 是否自動播放 ，自動播放在chrome下需要先進行設置 否則會造成此功能被攔截，chrome默認不允許視頻自動播放

volume:0.6  初始聲音大小設置 0~1

loop: true  是否循環播放

poster: '//abc.com/**/*.png'  封面設置 

videoInit: true 初始化顯示視頻首幀

還有更多的設置項，請參考官方文檔：官方文檔