Geek Answers Handbook

Go to timestamp in embedded HTML5 video with js video

Greeting overflow,

I am trying to create buttons on a webpage that jump to marked timestamps for embedded video with video js. As far as I can tell, I need to change the currentTime value so that the video moves to the correct timestamp, however I cannot get this to work even when setting currentTime in the first javascript call.

For example, if I wanted to run 200 seconds in a video:

JavaScript:

VideoJS.setupAllWhenReady(); VideoJS.DOMReady(function(){ var myPlayer = VideoJS.setup("current_video"); myPlayer.play(); myPlayer.currentTime(200); });

HTML Snip:

 <video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto" poster="./videoposter.png"> <source src="./videosource.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video>

Again, the video plays correctly with the js video player, only the current time offset does not seem to be applied, and the video starts from the beginning. I tested this in chrome, safari, IE, and they all seem to do the same, so I don't think the problem is with the browser. I have to do something wrong ...

Thank you for your help!

+8
javascript html5 html5-video
source share
2 answers

Delete "VideoJS.setupAllWhenReady ();" and it should work. This is what I have:

 <!DOCTYPE html> <html> <head> <title>Sample styled page</title> <script src="video-js/video.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8"> </head> <body> <h1>Sample styled page</h1> <p>This page is just a demo.</p> <video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto"> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> </video> <script> //VideoJS.setupAllWhenReady(); VideoJS.DOMReady(function() { var myPlayer = VideoJS.setup("current_video"); myPlayer.play(); myPlayer.currentTime(200); }); </script> </body> </html>
+3
source share
  $(function(){ var myPlayer = _V_("my_video_1"); _V_("my_video_1").ready(function(){ myPlayer.src([ { type: "video/mp4", src: "http://video-js.zencoder.com/oceans-clip.mp4" }, { type: "video/webm", src: "http://video-js.zencoder.com/oceans-clip.webm" } ]); }); }); $(window).load(function(){ var myPlayer = _V_("my_video_1"); myPlayer.currentTime(30); myPlayer.play() });
+2
source share

More articles:


All Articles