Jump to content

Proper Usage for HTML5 Video Functions in Babylon.js Video Texture


dbawel
 Share

Recommended Posts

Hello,

 

I am using video textures in BJS, and can certainly control their HTML5 video functions for play and pause, however, I need to control time such as adding ff and rewind. In HTML5 I would simply do the following:

 

<script type="text/javascript">

function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}

function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>

</head>
<body>

<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
<a href="demo.mp4">Download the video</a> file.
</video>

<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>

 

 

But I've tried accessing the currentTime and other function on the videoTextures and I get a console response that in the case of:

 

video.currentTime 

 

I receive a console error of : Uncaught ReferenceError: video is not defined

 

 

I would like to have all HTML5 video function available, and also be able to identify operations on multiple or individual video textures. If anyone knows the proper usage that I must be overlooking, please let me know.

 

Thanks,

 

DB

 
Link to comment
Share on other sites

@RaananW -  Play and pause functions work fine, however, I haven't been able to get other operations such as video.currentTime() to work on a video texture. Otherwise, I can play and stop(pause) without any problem. I require more controls such as specific time controls, and canot find any usage to do this using a video tesxture.

 

Thanks.

Link to comment
Share on other sites

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

 

Click once or twice, of course.  Upon click, video runs at triple speed (ff) via playbackRate, and currentTime is also working, starting 10 secs into the video. (rw).

 

Fast response, eh?  I just finished the tests when your post came in.  :)

 

Party on.

Link to comment
Share on other sites

currentTime is a property, not a function - 

http://www.babylonjs-playground.com/#1X8NRY#2

 

I find this website very helpful for understanding how it all works - http://www.w3.org/2010/05/video/mediaevents.html  . you can see the events, properties, functions, everything is listed. the video element is a standard video element. whatever any player can do, so can you.

Link to comment
Share on other sites

@Wingnut - amazing, record time! :D  I knew it was a usage issue on my part. Thanks much, as now I should be able to add all of the video playback functions into my video player using multiple video textures. And putting the time into a playground scene is valuable for all - especially since we have a search engine for the playground. Do you ever rest?

 

@RaananW - you're help has been invaluable as well - especially for the last link showing most every function I might build for video texture playback in a working example. What I was missing was the simple usage to assign these operations to a variable all the way back representing the material itself - which Wingnut kindly demonstrated. I don't think that this is obvious usage for most people, and would be great to add this to the documentation. :) If no one else does so, I should do the time on this since you guys did the work. Also, thank you for responding so quickly, as I couldn't finish any work without this forum, and getting quick responses is everything to my producing work.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...