视频在 H5 游戏中的应用

前言

游戏中如果需要使用一些预先录制好的动画，动画格式可以选择 gif 文件和视频文件，视频文件和 gif 文件相比，size 更小（相同质量，gif 文件比 mp4 文件大５倍以上）。

如果视频能在 canvas 中或者 webgl 中播放，这样视频可以和其它游戏元素整合，实现以前需要很复杂的方式才能实现的功能，比如在一个旋转的 3D 立方体中播放视频。

当前主流的浏览器 chrome，使用 U4 2.0 内核的 app（包括 UC 浏览器，手淘，支付宝，钉钉等）都支持视频在 canvas 中播放。

javascript 实现视频在 canvas 中播放

视频在 canvas 中播放，可以更好地和其它游戏元素整合，主要步骤如下（完整源码参考附件 video_canvas.html）：

１．创建后台视频

var video = document.createElement('video');
video.src = '.xxxx.mp4';

２．创建 canvas

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');

３．视频播放后定时把图像 render 到 canvas

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');

video.addEventListener('play', function() {
  setInterval(function() {
    canvasContext.drawImage(video, 0, 0, width, height);
  }, 30);
});

运行效果：

javascript 实现视频在 weggl 中播放

为使示例简单，使用了three.js - javascript 3D library 实现 webgl 功能，把视频渲染到一个立方体表面，运行效果：

完整例子参考附录例子（video_canvas.html），核心代码：

１．使用视频创建纹理

texture = new THREE.Texture(video);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );

２．创建立方体，视频纹理和立方体关联

var cubeGeometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial({map: texture, shading: THREE.FlatShading});
cube = new THREE.Mesh(cubeGeometry, material);

３．渲染的时候要定时刷新纹理

texture.needsUpdate = true;

如果你自己测试的时候， video texture 纹理更新失败 ，错误信息是：

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded

给 video 添加属性 crossorigin

video.setAttribute('crossorigin', 'anonymous');

白鹭引擎实现视频在 canvas 中播放

参考 官方文档

运行效果：

当前版本（5.0.15）的 白鹭引擎，视频在 canvas 中播放功能，ＰＣ浏览器运行无压力，在移动浏览器上有 bug（只能全屏播放，无法和其它页面元素整合，完整的 bugfix diff 参考：egret-patch.diff）：

１、执行 WebVideo.prototype.play() 的时候，mobile 模式，直接进全屏，修改方法：

不执行 this.checkFullScreen(this._fullscreen)，只执行：

_this.videoPlay();
egret.startTick(_this.markDirty, _this);

如果是 iOS 浏览器，还需要

document.body.appendChild(video)

因为，iOS 浏览器，video 不在 document 里面，无法播放起来，另外 size 不能太小，否则也无法播放起来。

２、WebVideo.prototype.$render() 在移动浏览器，总是把 video.poster render 到 canvas，没有把video 图像 render 到 cavas，修改方法：

屏蔽原来的，执行下面这个：

var data = bitmapData ? bitmapData : posterData;
if (data) {
    node.image = data;
    node.imageWidth = data == posterData ? width : bitmapData.width;
    node.imageHeight = data == posterData ? height : bitmapData.height;
    if (data == bitmapData) {
        egret.WebGLUtils.deleteWebGLTexture(bitmapData.webGLTexture);
        bitmapData.webGLTexture = null;
    }
    node.drawImage(0, 0, data.width, data.height, 0, 0, width, height);
}

U4 2.0 内核支持力度

特性支持

U4 2.0 内核视频自动播放特性（不需要手势触发）和在 canvas 中播放特性默认关闭，可以通过下发配置打开。

引擎支持

支持白鹭引擎

iOS 平台浏览器支持力度

特性支持

iOS 平台的浏览器，视频可以在 canvas 中播放，但 iOS safari 浏览器，视频开始播放，默认进入全屏播放，影响游戏使用，但基于 safari 内核的浏览器（比如 iOS UC 浏览器），设置：

webView.allowsInlineMediaPlayback = YES

可以实现开始播放不需要进入全屏播放（页内播放）。

另外，设置：

webView.mediaPlaybackRequiresUserAction = NO;

可以实现视频自动播放（不需要手势触发）；

引擎支持

支持白鹭引擎