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

警告：为了防止以用户为代价通过蜂窝网络进行未经请求的下载，嵌入式媒体无法在iOS上的Safari中自动播放 - 用户＆gt;始终启动播放。一旦启动播放，控制器将自动在iPhone或＆gt; iPod touch上提供，但对于iPad，您必须设置＆gt; controls属性或使用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全景视频纹理

1 个答案:

Safari HTML5 Audio and Video Guide