混合app开发(安卓与H5)-可自定义播放器

本文使用的是字节跳动西瓜视频开源项目地址
xgplayer文档

1.安装

$ npm install xgplayer

2.使用

Step 1:

<div id="vs"></div>

Step 2:

import Player from 'xgplayer'

let player = new Player({
   
    id: 'vs',
    url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
})

3.自定义样式

新建video.scss，按照你希望的样子自行修改

// 修改播放器默认样式
/deep/ .xgplayer-skin-default {
   
  // 播放按钮
  /deep/ .xgplayer-icon-play {
   
  }

  // 扩大按钮
  /deep/ .xgplayer-icon {
   
  }

  // 封面图
  /deep/ .xgplayer-poster {
   
  }

  // 进度条
  /deep/ .xgplayer-controls {
   
  }
}

4.自定义组件

xgplayer的配置项非常丰富，内置项可以自己定义，我修改了时间显示和放大功能
放大功能去调用app的方法
自定义默认有的需要先配置忽视掉这些插件

ignores: ["time", "volume", "play", "fullscreen"],

• 自定义time

  新建pluginTime.js

	import Player from 'xgplayer';
	let pluginTime = function () {
   
	  // 插件逻辑
	  let player = this;