h5播放器，视频控件xgplayer-西瓜播放器

在这里写这篇文章是因为先前用了Video.js这款JS库插件，实现是可以实现，但是用户体验度不怎么好，所以今天就换了xgplayer的西瓜播放器，在自定义样式与插件上，xgplayer有更高的灵活性和可控性，它可以自定义关闭效果并自行开发，并且文档可读性强，快速上手。下面来看看它的使用：

一、安装

// 最新稳定版本 npm install xgplayer --save

二、使用

1、在页面提供占位 DOM

<div id="mse"></div>

2、实例化

import Player from 'xgplayer'; data() { return { Player: null } }, mounted: () { this.getData(); }, methods: { // 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效) initPlayer(url){ this.Player = new Player({ // el、url为必选配置，其它为可选配置 el: document.querySelector('#mse'), url: url, width: '100%', height: '3.7rem', volume: 0.6, // 初始音量 autoplay: false, // 自动播放 playbackRate: [0.5, 0.75, 1, 1.5, 2], // 当前播放速度 defaultPlaybackRate: 1, // 播放速度设置为1 playsinline: true, }); }, getData() { this.initPlayer('/video/mp4/xgplayer-demo-720p.mp4') } }

3、最终效果： 注：此视频不是代码中显示视频，因只能上传指定平台和已上传视频，这里就给大家截图啦~ 注：如果对兼容性没有太大要求的话用这个还是不错的（点播兼容到 IE10+）

参考网站： 链接: http://h5player.bytedance.com/config/.