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/.