Used as a Three.js Texture

[bknill]

Do you know if this should work as a texture in Three.js? I'm trying it but it' still popping out into a full screen player.

There is a script error but I can't debug it at the moment, getting this in jsconsole

:0link
Script error.
"@", "stalled"
"@", "timeupdate"
:0link
Script error.
"@", "progress"
"@", "progress"
:0link
Script error.
:0link
Script error.

[fregante]

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

[bknill]

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?

[fregante]

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

[bknill]

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;`

[bknill]

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

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

[fregante]

"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.

[bknill]

OK Thanks

[neuman]

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!

[neuman]

@bknill did you ever get this working?

[fregante]

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.

[neuman]

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