Video Player(视频播放器)

你可以写自己的播放器来播放React VR不支持的视频


React VR用的是HTML5的video来播放视频的,但是你可以用自己的播放器来支持更多的视频格式


React VR并没有覆盖所有的这些特性,所以我们提供一种方法让你可以把自己的播放器嵌入到React VR中

BasicVideoPlayer

BasicVideoPlayer是嵌入了HTML5的video元素的默认的播放器,你自己的播放器需要继承BasicVideoPlayer,下面有些属性和方法需要复写。


addCustomizedVideoPlayer

addCustomizedVideoPlayer可以增加你自己的播放器,如果你有多个自己的播放器,没有都要用这个方法调用一次,React VR会根据视频格式自动选择最合适的播放器来播放。


Dash Example

其中一个例子就是用自定义的播放器播放MPEG-DASH视频


写一个MPEG-DASH视频播放器

需要继承BasicVideoPlayer,同时需要为DashVideoPlayer定义supportedFormats,DashVideoPlayerde支持的视频格式决定于HTML5的video支持的视频格式


import { BasicVideoPlayer, getSupportedFormats } from 'react-vr-web'';


const browserSupportedFormat = getSupportedFormats();

const dashFormats = ['mp4', 'webm'];

const dashSupportedFormats = dashFormats.filter((format) => {

  return browserSupportedFormat.indexOf(format) > -1;

};


export default class DashVideoPlayer extends BasicVideoPlayer {

  static supportedFormats: ?Array = dashSupportedFormats;


创建MPEG-DASH视频播放器:

  constructor() {

    super();

    this.player = dashjs.MediaPlayer().create();

    this.player.setScheduleWhilePaused(true);

  }


初始化MPEG-DASH视频播放器:

  initializeVideo(mpdUrl, metaData) {

    this.videoElement.crossOrigin = 'anonymous';

    this._bindMediaEvents();

    this.player.initialize(this.videoElement, mpdUrl, false);

  }

_bindMediaEvents()是用来注册到html的媒体事件中


处理播放器:

  dispose() {

    this.player.reset();

    super.dispose();

  }


添加自定义的视频播放器

我们用addCustomizedVideoPlayerDashVideoPlayer添加到vr/client.jsinit的初始化函数中,

import { addCustomizedVideoPlayer } from 'react-vr-web'';

...

function init(bundle, parent, options) {

  addCustomizedVideoPlayer(DashVideoPlayer);

...

更全的代码还是查看code>DashSample例子