Skip to a certain timecode?

[seabasss]

Hi!

Is it possible to start the movie from a certain timecode when hitting the play button in video js?

Thanks!

[gkatsev]

Sure. Just call currentTime with whatever you want on play.

[seabasss]

Thanks! Where do I place it in the js video code?

[yan-shcherbakov]

Assuming your video has an ID of 'vid1' and you want the video to start at 15 seconds in:

var video = document.querySelector('#vid1');

video.player.on('play', function() {
    this.currentTime(15);
});

Edit by @mmcc: added formatting for readability.

[seabasss]

Thanks! That worked!

Just two things. Is it possible to get a similar effect for the flash fallback?

I use fancybox (a lightbox plugin) and it only works the first time I click play, if I load the movie again it starts from 0, even though I'm fetching it with ajax everytime and the js code is reloaded with the ajax part. I have to reload the whole page for it to work again. Any ideas how to solve this?

Thanks!

[yan-shcherbakov]

No problem!

Can you share the link or do a jsfiddle?

[seabasss]

Unfortunately not. It's on a local server. Is my disposeVideo function screwing it up?

This is my code (how do I make code tags here, stuff is not showing?):

<video id="player' . $mediaid . '" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="metadata" width="' . $width . '" height="' . $height . '" poster="' . $img . '" data-setup='{"preload":"metadata"}' class="videoplayer">

js on same page as video:

        videojs(\'player' . $mediaid . '\', {}, function() {
          this.progressTips();
          var video = document.querySelector(\'#player' . $mediaid . '\');
          video.player.on(\'play\', function() {
            this.currentTime(' . $starttime . ');
          });
        });

... js file:

function disposeVideo() {
    $('.video-js').each(function(e) {
        var videoID = $(this).attr('id');
        var player = videojs(videoID);
        player.dispose();
    });
}

$(".fancythumb").fancybox({
    href : $(this).attr('href'),  
    thumb : $(this).attr('rel'),   
    title : $(this).attr('title'),             
    fitToView   : false,
    autoSize    : false,
    width       : '100%',
    height      : '95%',
    afterClose : function() {
        disposeVideo();
    },
    beforeLoad : function() {
        disposeVideo();
    }
});

[gkatsev]

flash is very finicky about being in a lightbox. There's some discussion about it in another issue (don't remember which off the top of my head, @mmcc might know).

[seabasss]

Yeah, it works though, and especially since I implemented the disposeVideo function.
The problem I'm having now is not flash related though.

[yan-shcherbakov]

@seabasss I could be wrong, but I think what's going on is that when you close the lightbox, you destroy the element where you've set the currentTime setting for.

[yan-shcherbakov]

@seabasss oops, I just read that you load that the video via ajax on lightbox open... Do you create that video DOM element when you create the lightbox as well?

[seabasss]

But I have to otherwise the video js is ticking in the background until forever and I get an error in firebug.

And when I reload the video or load another one in fancybox I load the js code again so it should be recreated.

Sorry I'm not good at this, I don't know if I create it again. What I do know is that the video tag and the video js is in a separate file that I load via fancybox/ajax so everytime I click on a thumbnail on my page fancybox loads both the video tag and the video js. And the fancybox code is in an external js file. Is there anything else I have to destroy or recreate?

Thanks!

[Histonic]

Hello,
I need to start the play of a video from a certain timecode, but from a link in the page. So far I had this short code I used with a standard html

<script type="text/javascript">
		var lecteur;
		function timecode(secondes) {
		    lecteur = document.getElementById("mavideo");
		    lecteur.currentTime = (secondes);
		    lecteur.play();
		}
	</script>

and the link :
<a href=#mavideo onclick="timecode(60)">play from 1 min</a>

I just copyed it after using video.js and... it doesn't work.
Can anyone help me please ?

[matiaszumbo]

Hi, it's possible to read the timecode from video?