Multiple problems using VideoTexture

Nabroski · July 19, 2016

Just for the following generations (with questions)

http://www.babylonjs-playground.com/#BUWYF#3

http://www.w3schools.com/html/html5_video.asp

vegasgroup · July 23, 2016

I tried with: videoTexture.video.pause()

but not work, video continues in loop...

This is my code:

//Mouse Click pause the video

       videoTexture.video.paused === true ?
           (videoTexture.video.play()) :
           (videoTexture.video.pause())
           }, BABYLON.PrimitivePointerInfo.PointerEnter);
engine.runRenderLoop(function() {
newScene.render();
});

thank you all for the help

Nabroski · July 23, 2016

Hello

U also have to check your code, something is wrong.

http://www.babylonjs-playground.com/#BUWYF#4

Best

vegasgroup · July 23, 2016

ok

I solved, missing:

});

at the end of the code...

thank you all

vegasgroup · July 23, 2016

Clik in the space and the video goes to pause
, but as i can only use the plane area for clik of the video?

tx...

Nabroski · July 23, 2016

yeah sure

http://www.babylonjs-playground.com/#BUWYF#5

dbawel · July 25, 2016

@Nabroski - the controls of HTML video are dramatically different for each OS. I use a custom GUI button for all my play and pause functions, but clicking on the object itself works just as well. Keep i mind that Windows and IOS will always initiate Autoplay - unless you initiate a Load() function before a pause() function - which in this case is necessary if you want any vidoe sync between devices. Especially for syncing a pause() function on currentTime().

Also keep in mind that @MasterSplinter and I have been discussing on a post about the limitations which Chrome provides on Android. @MasterSplinter claims to have found a solution for this bug (this.video.currentTime() always returns a value of 0.0 for me) but I haven't seen the code solution for this yet.

Also, IPAD and IOS aso requires a load() function and then the user must initiate play to buffer any video to be able to sync any paused() or play() frame. So please keep in mind that html video (what is used for a videoTexture) functions very differently on every different device as well as diffeently within each browser on most devices. So there is no way to solve this to be consistant unless @MasterSplinter truly has a solution to get this consistantly functioning on each OS and browser - which I'm certain he has, but I just haven't seen it myself personally - so I hope he responds to my poet tonight as I would like to correct this for most all devices if possible. Just don't wate the many days and nights we both spent trying to figure out what was wrong with our code when the code was correct. Also, I've identified a bug using videoTextures in BJS version 2.4, and DK hopefully has the files now to test. So if you are having issues using videoTextures, use version 2.2 for now, and also keepan eye on the videoTexture post from @MasterSplinter - which he hopully found a solution for the community. Hopefully we'll all see tomorrow.

Cheers,

DB

vegasgroup · July 25, 2016

I'm sorry but I tried all day and did a lot of tests with the nabroski but I can not find a solution ...

this is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        //avoiding manifest error
        engine.enableOfflineSupport = false;
        	
        var createScene = function () {
         	var scene = new BABYLON.Scene(engine);
        	
        	var camera = new BABYLON.ArcRotateCamera("camera",0, 1.0, 10, null, scene);
        			
        	BABYLON.SceneLoader.Load('', 'planevideo.babylon', engine, function (newScene) {
            newScene.activeCamera.attachControl(canvas);
			var mat = new BABYLON.StandardMaterial("mat", newScene);
        
        		var videoTexture = new BABYLON.VideoTexture("small", ["textures/small.ogv", "textures/small.webm", "textures/small.mp4"], newScene, false, false)
        		mat.diffuseTexture = videoTexture;
        
        		var vidsurface = newScene.getMeshByName("Plane023");
        		//
        		vidsurface.scaling = new BABYLON.Vector3(1.5, 1.5, 1.5);
        	
        	//Stop and pause the video
        	scene.onPointerObservable.add(function (evt) {
        		
        		//check for the plane
        		if (evt.pickInfo.pickedMesh === vidsurface)
        		{
        			//then check for the video pause
        			if (videoTexture.video.paused === true) {
        				videoTexture.video.play();
        			} else { videoTexture.video.pause(); }
        		}
        
        		
             }, BABYLON.PrimitivePointerInfo.PointerEnter);
        			
        		newScene.executeWhenReady(function () {
        		
        			vidsurface.material = mat;	
        	
        			engine.runRenderLoop(function () { newScene.render() });
        		});
        	});	
        	BABYLON.SceneLoader.loggingLevel = BABYLON.SceneLoader.DETAILED_LOGGING;	
            return scene;
        };	
        
        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

video continues looping and play / pause on Plane 023 does not work...

Nabroski · July 25, 2016

babylon create a scene {

Loading a newScene (newScene) {    
//overloading to the existing scene
//scene = newScene; 

//or calling a mousevent inside the newScene
newScene.onPointerObservable.add(function (evt)
   }
}

depending on how complex your Project is gonna be you have to choose one.

@dbawel sounds interesting, and i'm out of time to reply in detail.

Best

thiendv · October 6, 2016

On 24/5/2016 at 4:01 PM, V!nc3r said:
I up this topic because i have a strange issue. I use 3dsmax here, and that's the result i got on babylon :

My verticesData says :
 uv: 0.0001,1.0001,0.9999,1.0001,0.9999,1.9999,0.9999,1.9999,0.0001,1.9999,0.0001,1.0001
 pos: 0,-0.5939,-1,0,-0.5939,1,0,0.5939,1,0,0.5939,1,0,0.5939,-1,0,-0.5939,-1
 ind: 0,1,2,3,4,5
To do a check, i import some meshes of this scene into Blender, then reexport to babylon, and the video mapping works !

verticesData says :
 uv: 0.9999,0.0001,0.0001,0.9999,0.0001,0.0001,0.9999,0.9999
 pos: 0,-0.5939,1,0,0.5939,-1,0,-0.5939,-1,0,0.5939,1
 ind: 0,1,2,0,3,1
I don't understand what could be wrong on 3dsmax setup, it is just a simple plane. Can you enlighten me ?

Edit: and of course if i set a default material with just a diffuse map on this plane, uv are correct.

Hi, I'm working same your project. But i have problem, i want to interact with 3D object. Example : when i click the wall, my app have to display some option can change colour. Can you share me some idea? Thank you!

thiendv · October 6, 2016

On 20/7/2016 at 0:53 AM, Deltakosh said:

just use videoTexture.video.pause()

can you help me. I known you're expert in Babylon, i seen some your video trainning babylon. it's my example : http://www.babylonjs-playground.com/#BUWYF#9 . I want to display some button option when i click 3d object. example change paint colour. Thank you very much!

Nabroski · October 6, 2016

@thiendv

Hello
i would recommend you to make a step back and get really convinced when you write any code and what you are doing, how things work.

And then step slowly into more advanced task.

Its great that you copy paste code, at some point you will stuck anyway, and have a hard time 'til you find a workaround

Also try to rewrite a idea, their are many ways to archive the same functionality.

So start again from scratch, make you our very unique playground.

http://www.babylonjs-playground.com/#BUWYF#10

for me if something looks simple, its most beautiful.
when i have to scroll down a half a hour in a playground i get sick.

Good Luck

@Wingnut he will write you nice examples.

thiendv · October 6, 2016

43 minutes ago, Nabroski said:

@thiendv

Hello
i would recommend you to make a step back and get really convinced when you write any code and what you are doing, how things work.

And then step slowly into more advanced task.

Its great that you copy paste code, at some point you will stuck anyway, and have a hard time 'til you find a workaround

Also try to rewrite a idea, their are many ways to archive the same functionality.

So start again from scratch, make you our very unique playground.

http://www.babylonjs-playground.com/#BUWYF#10

for me if something looks simple, its most beautiful.
when i have to scroll down a half a hour in a playground i get sick.

Good Luck

@Wingnut he will write you nice examples.

thanks you, i copy your code when i interact with 3d object. and i want to work some event when i click to object. can you share me some idea. Example display colour table , change my wall

Wingnut · October 6, 2016

Hi @thiendv... here is a basic html-based popup menu system. It is made for full screen... so click -Editor button first, then click sphere to open meju, and click sphere again... to close menu.

http://www.babylonjs-playground.com/#1RUBLA#1

Absolute-positioned HTML is not the best way to do popup menu, but it is a good start.

We have new Canvas 2D system now, and it can make popup menus, too. It uses worldSpaceCanvas2D... which can be "attached" to a mesh/node.

@Nabroski will make you a playground demo using Canvas2D popup menu, soon.

Btw, welcome back, Nabroski.

Nabroski · October 6, 2016

i miss you too, bro

dbawel · October 7, 2016

@thiendv - Take a look at my last post above, and please forgive my quick typing and spelling mistakes. Keep in mind that HTML video which is used for videoTextures behave differently in various browsers and certainly very different on various OS. There is no way to currently disable autoplay on PC, and video.pause(), videoTexture.video.play(), etc. always requires a user event for any system. Also setting paused == true will not work. The only method to avoid autoplay on some sytems is to load the video first and then pause - but the video must be cached first.

However, you are able to set additional attributes using jQuery such as disabling video looping, but there are still many limitations as most attributes still require a user event - especially on IOS for security reasons they say. Also, I highly recommend defining .webm as the first video format to load, and then .mp4 if unable to load .webm - as it takes far more time on Android and other devices to cache and play .mp4 - and there is little quality difference between the two formats. Also consider using a "web-optimized" video when compressing, as this adds additional info to the header which can speed up the codec decompression for faster playback for .mp4 and other formats. However, you'll notice very little difference between .mp4 and .webm performance on PC and a MAC laptop or desktop - but certainly on Android and IPad. And if you consider using OGG media containers (.ogv format), there are clear issues in using these as videoTextures in babylon.js - although I haven't had time to test as I had hoped to discover why this has changed in recent releases. I keep promising DK I will investigate these issues, but haven't yet found the time - which I must now fully test as we have a beta release of an app streaming multiple videoTextures due this month. :blink:

If you require any additional assistance, just ask, as I've put myself through hell discovering all of the various idiosyncracies in using HTML video depending on OS, device, and browsers - and they're almost all different.

Cheers,

DB

thiendv · October 17, 2016

On 7/10/2016 at 1:47 AM, Wingnut said:

Hi @thiendv... here is a basic html-based popup menu system. It is made for full screen... so click -Editor button first, then click sphere to open meju, and click sphere again... to close menu.

http://www.babylonjs-playground.com/#1RUBLA#1

Absolute-positioned HTML is not the best way to do popup menu, but it is a good start.

We have new Canvas 2D system now, and it can make popup menus, too. It uses worldSpaceCanvas2D... which can be "attached" to a mesh/node.

@Nabroski will make you a playground demo using Canvas2D popup menu, soon.

Btw, welcome back, Nabroski.

Hi, I try to use Canvas2D. But if i importMesh or loadSence 3D, the result not good. You can explain for me, How to use canvas2D. Thanks for your help

Wingnut · October 17, 2016

Hi @thiendv. Please meet me in The Wingnut Chronicles - we will talk there. We do not have a subforum for "ongoing projects", "work in progress", or "campfire discussions"... so I use my never-ending thread for that. Cya there, T and others.

Nabroski · October 18, 2016

@dbawel

yes, h.265 is coming and web assembly (for ffmpeg), i don't know, but it sound like a good idea to me, to convert the videofiles, - maybe like the tones of conversation tools for youtube online downloader already has build in, to make sure the end-user gets an desired output.

If the audio - video synchronization is not a critical point in your app, like when sound is just not more then a background texture, - you can try to break down a mp4 webm container and using frame -stills.

the project using the brand new BABYLON 2.0 (ftw)
http://model-snake-56400.bitballoon.com/
code:
https://github.com/tolkanabroski/babylonjs-tutorials/tree/master/loadingstills

dbawel · October 18, 2016

@Nabroski -

Not a bad idea, as there's no way to overcome the various differences in HTML video playback on different OS. We don't have a solution to issues such as the MacOS requirement of a user event to initiate video playback, however as we're now streaming all video from our node.js server, we simply display a message for the user to press play in order to sync any media streaming from the server. But you scene example will definately be useful for other users as they will ultimately have to navigate through the issues of video playback on various OS and devices. Your approach is not one I thought of, and should work in practicaly any OS.

Thanks for sharing, and I look forward to the coming browser support for H.265, as it's a far better compression codec for both quality and efficiency. However, keep in mind that we will be required to pay licensing for use of the H.265 codec - unlike H.264. I know this as my brother is a patent attourney and has been involved with the authors of the H.265 codec - and they aren't going to allow its use without licensing fees. This won't be an issue for most use, however if we use it in a game or scene in which we release to earn revenue, then it will be an issue - whereas H.264 was not properly protected, and the authors never made any money from its development and support.

But it will be similar to MP4, as this is also highly protested and we're supposed to pay licensing for any use for profit. And they are going after some game devlopers and others on the use of MP4 in products, however they don't have the resources to sue others than a select few companies who have been using the codec without paying the $1000 licensing fee per product. So we'll see what happens with H.265, but it is such an improvement, that it's definately going to be used more than any other in the near future.

Cheers,

DB

Multiple problems using VideoTexture

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

dbawel

dbawel

Wingnut

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members