Babylon.js 第23章 视频纹理

VideoTexture对象接受视频数组（考虑到各种编解码器）。数组中可以加载的第一个视频......是用作内容源的视频。目前，HTML5 支持 .mp4、.webm 和 .ogv 视频格式。

内部视频 DOM 对象可通过 VideoTexture.video 属性访问，它允许您控制某些特征并监视视频的状态。例如播放、暂停、循环、自动播放。有关完整故事，请参阅上面的链接。

即使我们正在使用高级纹理技术，VideoTexture 也可以与 StandardMaterial 一起使用。简而言之，它需要有一些光。作为方便的替代方案或视频照明助手，您可能需要在网格的基础材质上设置emissiveColor 。

 

    var ANote0VideoMat = new BABYLON.StandardMaterial("m", scene);
    var ANote0VideoVidTex = new BABYLON.VideoTexture("vidtex",
        "../mp4/exam.mp4", scene);
    ANote0VideoMat.diffuseTexture = ANote0VideoVidTex;
    //设置纹理粗糙度
    ANote0VideoMat.roughness = 1;
    //设置散射光
    ANote0VideoMat.emissiveColor = new BABYLON.Color3.White();
    //添加事件监听
    scene.onPointerObservable.add(function(evt){
            //如果网格被点击了
            if(evt.pickInfo.pickedMesh === ground){
                //如果视频暂停
                if(ANote0VideoVidTex.video.paused)
                    ANote0VideoVidTex.video.play();
                else
                    ANote0VideoVidTex.video.pause();
                console.log(ANote0VideoVidTex.video.paused?"paused":"playing");
            }
    }, BABYLON.PointerEventTypes.POINTERPICK);
    ground.material=ANote0VideoMat;

现代浏览器对自动播放视频有严格的政策。如果没有用户交互，大多数浏览器只会在音频静音时自动播放。当 VideoTexture 设置autoPlay为 true（默认）时，如果第一次尝试自动播放失败，Babylon.js 将自动静音。要播放带音频的视频，通常需要用户交互（例如点击）。要手动启动视频纹理播放，可以使用如下代码：

scene.onPointerDown = function () {
    videoTexture.video.play();
    scene.onPointerDown = null;
};

还可以使用一个事件来检测浏览器是否阻止自动播放：

texture.onUserActionRequestedObservable.add(() => {
    scene.onPointerDown = function () {
        videoTexture.video.play();
    };
});

如果希望在加载期间显示纹理，可以在poster设置的属性中提供加载期间或直到用户与视频交互时显示的图像的 URL。

视频资源的后期处理：

VideoTexture 在内部创建和使用 HTML 视频元素。当调用 VideoTexture.dispose 时，纹理资源会按预期进行处理。但是，不会删除底层视频元素。导致所有底层视频资源的完全释放不是跨浏览器标准化的，但是可以使用这样的代码：

 存储对底层 HTML5 视频元素的引用
const videoEl = videoDome.videoTexture.video 

// 处理纹理
videoTexture.dispose();

// 删除所有 <source> 元素等
while (videoEl.firstChild) {
    videoEl.removeChild(videoEl.lastChild);
}

//设置一个空白的src
videoEl.src = ''

//防止某些浏览器出现错误
videoEl.removeAttribute('src')

videoEl.load()

videoEl.remove()