Three.js 手机上的全景视频纹理

Question

我正在使用这个例子http://threejs.org/examples/#webgl_video_panorama_equirectangular

对于使用 Three.js 的全景视频播放器，它在桌面上很好，但在移动设备上无法呈现。只是出现黑屏和以下警告：

three.min.js:573 THREE.WebGLRenderer: OES_texture_float extension not supported.
three.min.js:573 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
three.min.js:573 THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported.

有什么方法可以在移动设备上运行 - 或者我注定要失败。

Answer 1

大多数移动浏览器默认禁用自动播放，需要用户交互（例如点击事件）才能开始播放视频。我相信节省启动数据带宽是个好主意。

Safari HTML5 Audio and Video Guide

Warning: To prevent unsolicited downloads over cellular networks at the user’s >expense, embedded media cannot be played automatically in Safari on iOS—the user >always initiates playback. A controller is automatically supplied on iPhone or >iPod touch once playback in initiated, but for iPad you must either set the >controls attribute or provide a controller using JavaScript.

您只需要像下面这样创建一个播放按钮，它可以在我的 Nexus 7 上运行。

playbackButton.onclick = function(){
    video.paused ? video.play() : video.pause();
}

对于iOS，有点棘手。您必须处理的第一个问题是视频格式支持。该示例使用的是当前不支持的 webm。有关更多支持详细信息，请参阅 Can I Use WebM。

好消息是切换到 mp4 格式这会成功一半。 iOS Safari 有自己的原生全屏视频播放器，它将用视频内容接管屏幕而不是 three.js 渲染，所以基本上你需要内联视频播放器解决方案（例如 www.brid.tv/in-page-mobile-monetization/) 或基于 js 的 currentTime 技巧（例如 pchen66.github.io/Panolens/examples/panorama_video.html）。

希望这能回答您的问题。 :)

Three.js 手机上的全景视频纹理

Three.js Panorama Video texture on mobile

javascript

html5-video

three.js

Safari HTML5 Audio and Video Guide