西瓜視頻插件
npm使用
html
<div id="mse"></div>
vue
import Player from 'xgplayer';
this.player = new Player({
id: 'mse',
url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
width: '100%',
height: '100%',
autoplay: true,
autoplayMuted: true,
loop: true,
videoFillMode: 'fillWidth',
poster: '//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
});
監(jiān)聽頁面resize
<script type="text/javascript">
window.addEventListener('resize', function() {
document.getElementById('mse').style.height = window.innerHeight+'px';
});
</script>
html使用例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>xgplayer</title>
<style type="text/css">
html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
body {display:flex;}
#mse {flex:auto;}
</style>
<script type="text/javascript">
window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
</script>
</head>
<body>
<div id="mse"></div>
<script src="http://unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
let player=new Player({
id: 'mse',
autoplay: false,
volume: 0.3,
url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
poster: "http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
playsinline: true,
height: window.innerHeight,
width: window.innerWidth
});
</script>
</body>
</html>
文檔地址
自定義樣式
注意
xgplayer@2.0.0及以上播放器版本支持該功能。
該功能僅限在npm包引入方式下使用；CDN引入方式下暫時無法使用該功能。
不同業(yè)務(wù)對播放器樣式有不同的需求，通過以下3步可實(shí)現(xiàn)播放器樣式的完全自定義開發(fā)。
1、命令行輸入
npx xgplayer eject [targetDir] [skinName]實(shí)現(xiàn)將播放器樣式相關(guān)代碼復(fù)制到指定相對路徑[targetDir]下的.xgplayer/skin文件夾中，然后就可以任意修改實(shí)現(xiàn)自定義樣式了。[skinName]為自定義樣式名，可不輸入。2、業(yè)務(wù)代碼中引入播放器時也把自定義樣式的入口文件引入，例如：
import Player from 'xgplayer';
import './.xgplayer/skin/index.js';
- 3、復(fù)制出來的播放器樣式源碼中包含scss和svg類型文件，需要構(gòu)建工具進(jìn)行相應(yīng)的支持，譬如webpack打包前需要安裝配置sass-loader和raw-loader
