ozRocker Posted November 15, 2016 Share Posted November 15, 2016 I'm playing with 360 videos at the moment and I found some Babylon.js libraries that could play them on a browser, however these don't work on iPhones. Apparently this is because video textures use HTML inline videos. This demo here shows that it works on desktop but not on an iPhone http://www.babylonjs-playground.com/#256QWU#2 Is this still the case with video textures? Because I found a page that displays a video without trying to open the iPhone video player http://krpano.com/ios/bugs/ios8-webgl-video/ Does anyone know how this works and if it can be used for Babylon.js video textures? Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 15, 2016 Author Share Posted November 15, 2016 I've been trying to use this but it won't work on the iPhone http://ismaelfaro.github.io/vr-video/components/vr-video/, however I just noticed that the Babylon.js demo here http://www.huffingtonpost.com/entry/greece-refugee-rescue_us_5755708ce4b0c3752dce090f plays in an iPhone browser without any problem Quote Link to comment Share on other sites More sharing options...
dbawel Posted November 15, 2016 Share Posted November 15, 2016 Your videos work on Iphone, however thr USER must be given an event to begin buffering and playback. Otherwise IOS will simply hang and give errors, Place a button to play and the video should buffer and paly - but can only be triggered by a user event due to user security on IOS. DB Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 15, 2016 Author Share Posted November 15, 2016 I figured it out. This is the library that the refugee video is using: https://github.com/bfred-it/iphone-inline-video You set up the HTML like this: <body> <video id="video" autoplay="" loop="" muted="" playsinline="" src="videos/somevideo.mp4" style="display:none"></video> <canvas id="canvas" width="800" height="800"></canvas> </body> Then in javascript you set the video texture up like this: var video = document.querySelector('video'); window.makeVideoPlayableInline(video, false, false); var videoTexture = new BABYLON.VideoTexture('video', video, scene, true, true); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.