在移动电话上的Three.js全景视频纹理

I'm using this example http://threejs.org/examples/#webgl_video_panorama_equirectangular

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

For a panoramic video player using Three.js which is fine on desktop, but doesn't render on mobile. Just get a black screen and the following warnings:

对于使用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.

Is there any way to this working on mobile - or am I doomed.

有没有办法在移动设备上工作 - 或者我注定要失败。

1 个解决方案

#1

Most of mobile browsers disabled autoplay by default, it requires user interaction (e.g. a click event) to start the video. I believe it's a good intention to save initiate data bandwidth.

大多数移动浏览器默认禁用自动播放,它需要用户交互(例如点击事件)才能启动视频。我相信保存启动数据带宽是一个好方法。

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.

警告:为防止以用户为代价通过蜂窝网络进行未经请求的下载,嵌入式媒体无法在iOS上的Safari中自动播放 - 用户>始终启动播放。一旦启动播放,控制器将自动在iPhone或> iPod touch上提供,但对于iPad,您必须设置> controls属性或使用JavaScript提供控制器。

You just need to create a playback button like below, which is working on my Nexus 7.

您只需要创建一个如下所示的播放按钮,该按钮适用于我的Nexus 7。

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

For iOS, it's a bit tricky. First issue you would have to deal with is the video format support. The example is using webm which is currently not supported. See Can I Use WebM for more support detail .

对于iOS,它有点棘手。您必须处理的第一个问题是视频格式支持。该示例使用的是当前不受支持的webm。请参阅我可以使用WebM获取更多支持详细信息。

Good news is that switch to mp4 format this will work half-way. iOS Safari has its own native fullscreen video player which will take over the screen with video content instead of three.js rendering, so basically you would need inline video player solution (e.g. www.brid.tv/in-page-mobile-monetization/) or js-based currentTime trick (e.g. pchen66.github.io/Panolens/examples/panorama_video.html).

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

Hope this answers your question. :)

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

#1