前言

視頻和遊戲結合

如果視頻能在 Canvas 和 WebGL 中播放，視頻就可以和其它遊戲元素整合，實現以前需要很複雜的方式才能實現的功能，比如在一個旋轉的 3D 立方體表面播放視頻。

當前主流的瀏覽器 Chrome，使用 U4 2.0 內核的 app（包括 UC 瀏覽器，手淘，支付寶，釘釘等）都支持視頻在 Canvas 和 WebGL 中播放。

視頻文件替換 GIF 文件

遊戲中展現動畫使用視頻和 GIF 相比，優勢明顯：

１．size 更小

相同質量，mp4 文件比 GIF 文件小 4 倍以上，更小的文件，意味著更少流量，更快的載入速度，可以提升用戶體驗。

２．渲染性能更好

瀏覽器內核實現上，視頻數據在渲染的時候，圖像已經準備好，而 GIF 在渲染的時候才解碼，需要佔用渲染線程/進程時間，在複雜遊戲中可能引起遊戲卡頓。

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 實現視頻在 WebGL 中播放

為使示例簡單，使用了 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 到 Canvas，修改方法：

屏蔽原來的，執行下面這個：

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;

可以實現視頻自動播放（不需要手勢觸發）；

引擎支持

支持

白鷺引擎


推薦閱讀：
相關文章