Used as a Three.js Texture about iphone-inline-video HOT 11 CLOSED

Make sure you .play() it after makeVideoPlayableInline is called. To debug it you'll need to figure out what those script error. are

from iphone-inline-video.

Thanks I've had another attempt at this and it's kind of half working - I don't get a pop up and I can hear the video sound.

However as soon as the Three.js mesh with the video gets added to the scene I get constant 'script errors' that appear to show every time it tries to render the scene.

If I use any of

    var video = document.querySelector('video');
    makeVideoPlayableInline(video);

Or the jQuery method I get

http://10.1.1.3/resources/js/beekjs/iphone-inline-video.browser.js:1link
TypeError: Attempted to assign to readonly property.

The video variable is created as such

           video = document.createElement( 'video' );
            video.loop = true;
            video.crossOrigin = '';
            video.preload = 'auto';

If I just use makeVideoPlayableInline(video) with that video variable then it's fine.

So it looks like your code isn't going to work beautifully with Three.js, have you attempted to have it work as a texture?

from iphone-inline-video.

iphone-inline-video works with Three.js: http://bfred-it.github.io/iphone-inline-video/demo/threejs.html threex.videotexture/examples/videotexture.html

The problem is somewhere in your code. Make sure it works on the iPad first

from iphone-inline-video.

thanks that's useful. This is working fine on desktop and Android, just having massive problems on iOS.

I've been following that code and can get closer, but still can't get the video to show and as soon as it starts to play I get that script errorwhen it tries to render the scene.

Here's how I'm trying to do it

  ``` if(!video){
        video = document.createElement( 'video' );
        video.width = 320;
        video.height = 240;
        //video.autoplay = true;
        video.loop = true;
        video.crossOrigin = '';
        video.preload = 'auto';


    }

    video.src = source = cdnPrefix + "/"+ sceneObject.video;

    geometry = new THREE.SphereGeometry( 500, 60, 40 );
    videoTexture = new THREE.Texture( video );
    videoTexture.minFilter = THREE.LinearFilter;
    videoTexture.magFilter = THREE.LinearFilter;
    videoTexture.format = THREE.RGBFormat;

    videoMaterial = new THREE.MeshBasicMaterial( { map : videoTexture } );`

`        makeVideoPlayableInline(video);
        video.addEventListener('canplay',function(e){console.log('CAN PLAY'); iOSVideo = true});
        video.play();
        showVideo();`

And in the render loop

`    if ( video.readyState === video.HAVE_FUTURE_DATA )
       if ( videoTexture )
            videoTexture.needsUpdate = true;`

from iphone-inline-video.

This is the error I get when I console.log the video events

:0
Script error.
"@", "seeking"
"@", "seeked"

from iphone-inline-video.

"Script error" says nothing about the error, you'll have to find a better way to debug it. It might just be that Safari is triggering some security error. You'll have to ask on some support forum or StackOverflow if you still have issues because I already showed that it works.

from iphone-inline-video.

OK Thanks

from iphone-inline-video.

You mentioned that you already showed it works, is there a demo of that anywhere. http://bfred-it.github.io/threex.videotexture/examples/videotexture.html seems to be dead. Thanks!

from iphone-inline-video.

@bknill did you ever get this working?

from iphone-inline-video.

I created another demo here: http://bfred-it.github.io/iphone-inline-video/demo/threejs.html

Note that Safari doesn't support CORS on videos, so the file has to be on the same domain to make it work.

from iphone-inline-video.

That example was exactly what I needed. Thank you very very much.

from iphone-inline-video.