混合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;
	  let util = Player.util
	  let format = util.format
	  let curtime = util.createDom('xg-time', `<span>${player.currentTime || format(0)}</span>`, {}, 'xgplayer-time');
	  let root = player.controls
	  root.appendChild(curtime)
	  let handle = function () {
	    if (player.videoConfig.mediaType !== 'audio' || !player.isProgressMoving || !player.dash) {
	      curtime.innerHTML = `<span>${format(player.currentTime || 0)}</span>`
	    }
	  }
	  // player.on('durationchange', handle)
	  player.on('timeupdate', handle)
	
	  function destroyFunc() {
	    // player.off('durationchange', handle)
	    player.off('timeupdate', handle)
	    player.off('destroy', destroyFunc)
	  }
	  player.once('destroy', destroyFunc)
	}
	
	Player.install('pluginTime', pluginTime)

• 自定义pluginScreen
  新建pluginScreen.js

	import Player from 'xgplayer'
	let pluginScreen = function () {
	  let player = this;
	  let util = Player.util
	
	  let btn = util.createDom('xg-fullscreen', `<xg-icon class="xgplayer-icon"></xg-icon>`, {}, 'xgplayer-fullscreen')
	  let root = player.controls;
	  root.appendChild(btn);
	  ['click', 'touchend'].forEach(item => {
	    btn.addEventListener(item, function (e) {
	      // player.currentTime
	      // player.config.url
	      let obj = {
	        url: player.config.url,
	        currentTime: parseInt(player.currentTime)
	      }
	      //调用app方法
	      if (window.android_play) {
	        window.android_play.playVideo(JSON.stringify(obj))
	      }
	      console.log("放大")
	    })
	  })
	}
	Player.install('pluginScreen', pluginScreen)

5.修改富文本内容视频

util.js文件下

import Player from "xgplayer";
import Player1 from "./pluginTime";
import Player2 from "./pluginScreen";
// 自定义播放器
function reloadVideo(contentStr) {
  let urlArr = []
  for (var i = 0; i < 10000; i++) {
    if (contentStr.indexOf("<iframe") > -1) {
      contentStr = contentStr.replace("<iframe", '<div id="vs' + i + '"');
      contentStr = contentStr.replace("</iframe>", "</div>");
      // this.idArr.push("vs" + i);
    } else {
      break;
    }
  }
  urlArr = getSrc(contentStr);
  setTimeout(() => {
    // 实例化视频播放器
    for (let i = 0; i < urlArr.length; i++) {
      const player = new Player({
        id: "vs" + [i],
        url: urlArr[i],
        fluid: true,
        fitVideoSize: "auto",
        // videoInit: true, //视频第一帧，移动端无效
        ignores: ["time", "volume", "play", "fullscreen"],
        poster: urlArr[i] + "?vframe/jpg/offset/1" //七牛云后缀地址
      });
    }
  }, 300);


  return contentStr;
}

6.渲染播放器

<div id="vs"></div>
//引入公共方法
import utils from "../../utils/util";
//接口返回富文本的内容
this.dataSource.content = utils.reloadVideo(this.dataSource.content);

总结

xgplayer设置视频第一帧在移动端是不生效的，可以设置poster封面图为视频第一帧
个人认为纯前端获取视频第一帧比较麻烦，但是可以选择使用第三方平台实现。
七牛云、阿里云等云端存储平台功能强大，不仅具有海量的存储功能，平台封装的还有很多功能丰富的API。想要实现截取视频的某一帧其实很方便，只需在视频的url后面拼接字段即可。

例如视频地址：http://test.mp4

七牛云：?vframe/jpg/offset/1
拼接后：http://test.mp4?vframe/jpg/offset/1

阿里云：?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast
拼接后：http://test.mp4?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast

其他播放器

HTML5 Video Player
一个免费的开源的使用javascript开发的HTML5播放器。解决了浏览器兼容性问题并且添加了很多非标准的强大功能。

VideoJS
videoJS是一个HTML5视频播放器，使用js和css开发，会自动使用一个fallback调用flash来播放视频一旦浏览器不支持HTML5视频

Elmedia Player
一个可以做的Mac视频播放器，提供高级流选项-Elmedia Player几乎可以在那里处理任何音频或视频文件类型，并将内容流式传输到Chromecast，AirPlay和DLNA设备。该应用程序不需要任何其他编解码器。

MediaElement.js
使用HTML和CSS来发html5音频和视频播放器

Kaltura
这个HTML5视频允许你回放插入网站的HTML5视频。非常轻量级不需要任何多余的模块支持。兼容大多数的浏览器甚至是不支持HTML5的浏览器。可以回放几个视频格式例如，OGG，H.264及其MOV。

Open Standard Media (OSM) Player
一个一体化的web播放器，使用jQuery开发的开源媒体播放器，能处理各种类型的web媒体，包括HTML5，Youtube，vimeo和flash