Moe2_player高性能HTML5彈幕播放器

Moe2_player是一款高性能HTML5彈幕播放器。

特點(diǎn)：

• 完全基于html5，移動(dòng)設(shè)備友好，（iphone需要添加到桌面作為webapp方可觀看彈幕）

• 性能強(qiáng)大，在多倍于B站最大彈幕覆蓋量的情況下，仍然可以達(dá)到60fps，如果使用webgl渲染器性能更強(qiáng)

• 3D視角彈幕

• VR虛擬影院

• 非常簡單的集成步驟

• 已實(shí)現(xiàn)了B站和A站的基本彈幕格式的解析

• 內(nèi)部實(shí)現(xiàn)了彈幕發(fā)送和更新的相關(guān)方法（基于socket.io,不過暫時(shí)沒有開放就沒有完全集成）

Demo：

• https://yjhatfdu.github.io/Moe2_player/dist/

• https://moe2.tv
  

• https://jp.moe2.tv

使用入門:

• 引用dist目錄下的script,style,images,fonts文件夾至工程目錄

• 在網(wǎng)頁用引用js以及css

<link rel="stylesheet" href="style/player.css">
<script src="script/player.min.js"></script>

• 建一個(gè)容器來存放播放器，容器本身的大小和響應(yīng)式行為會(huì)影響播放器的大小

<div id='player-container'></div>

• 初始化播放器,

<script>
var player=new Moe2.Player(document.querySelector('#player-container'),'可選的視頻標(biāo)題');
player.initVideo('視頻的路徑.mp4');
player.loadDanmaku('彈幕文件路徑.xml','bilibili');
</script>

手動(dòng)編譯

npm install
npm run build

接口文檔

• 待完善

iPhone用戶請注意

• 由于蘋果的限制，只要在Safari中播放視頻，必然會(huì)導(dǎo)致一個(gè)全屏的系統(tǒng)視頻播放器覆蓋掉整個(gè)頁面，所以彈幕和VR都需要在webapp模式下觀看。

• 在頁面頭部添加

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >

然后用戶就可以在safari或者安卓的chrome的菜單中選擇添加到主屏幕了，添加之后主屏幕會(huì)有一個(gè)網(wǎng)站的圖標(biāo)（可以自定義），然后通過webapp的圖標(biāo)進(jìn)入訪問網(wǎng)站可以實(shí)現(xiàn)inline視頻播放以及網(wǎng)頁全屏。