JW Player seek on ready

Question

I have another JW Player question... I've implemented JW Player to replace an image at the top of the page on a button click. That code looks like this:

<div class="series_graphic"></div>
<button class="button-watch1">Watch now</button>

$( ".button-watch1" ).click(function() {
    $( ".series_graphic" ).replaceWith('<div id="player-1">Loading</div>');
    jwplayer("player-1").setup({
        file: "file",
        height: 360,
        image: "file.jpg",
        width: 640,
        autostart: true
    });
 });

I'm working on this for a church, and they would like the ability to watch the whole video and also the ability to jump to a certain portion of the video. I'm thinking I'll implement another button that says "Watch sermon" to accomplish this and use the seek command. I'm having issues implementing it since the player isn't yet loaded when the button is pressed. I assumed I could get it to work by using the onReady command, but I'm having issues making that work... I'm just learning JavaScript so it's all a bit fuzzy to me.

The page is here. It's still very much in progress :D

If anyone could walk me through it, I'd really appreciate it! Thanks!

Answer 1

Instead of using replaceWith, I used the JWPlayer load function coupled with a play command on my button. That way, the player would be initialized already when the seek function was read. Here's my code:

<script type="text/javascript">
        function watchSermon(URL,sermonTime){
            jwplayer('player').load([{
                file:URL
            }]);

            jwplayer('player').play()
            jwplayer('player').seek(sermonTime)
            };
    </script>

<button class="button-watch" onclick="javascript:watchSermon('{video_url}','{sermon_start}')">Watch sermon</button>

Answer 2

To do a seek on ready, something like this would suffice:

<script type='text/javascript'>
 jwplayer().onReady(function() { jwplayer().seek('10') });
</script>

This will seek 10 seconds in when the player is ready.

Hope this helps!

Answer 3

If you want the JWPlayer seek you need only to add this parameter: startparam: "ec_seek"

jwplayer("").setup{
file: "http://localhost/video.mp4", 
startparam: "ec_seek",
...
...
...
}