西瓜视频插件
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',
});
监听页面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="//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: "//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引入方式下暂时无法使用该功能。
不同业务对播放器样式有不同的需求，通过以下3步可实现播放器样式的完全自定义开发。
1、命令行输入
npx xgplayer eject [targetDir] [skinName]实现将播放器样式相关代码复制到指定相对路径[targetDir]下的.xgplayer/skin文件夹中，然后就可以任意修改实现自定义样式了。[skinName]为自定义样式名，可不输入。2、业务代码中引入播放器时也把自定义样式的入口文件引入，例如：
import Player from 'xgplayer';
import './.xgplayer/skin/index.js';
- 3、复制出来的播放器样式源码中包含scss和svg类型文件，需要构建工具进行相应的支持，譬如webpack打包前需要安装配置sass-loader和raw-loader
