Gary Carlyle Cook Gary Carlyle Cook - 4 months ago 56
Javascript Question

VOD seeking with Bitmovin player

I am trying to display VOD with a predetermined start time but I can't find how to do this. The Bitmovin website lists the player API functions but does not really have any tutorials how to use them all.

I have Included SEEK but I don't know why it is not working?

It plays the video but starts on 0 secs rather than 40 secs.

<div id="player"></div>
<script type="text/javascript">
var conf = {
key: "XXXXXXXXXXXXXXXXXXXX",

source: {

progressive: "http://example.com/somevid.mp4",
poster: "http://example.com/someimage.jpg",
},

playback : {
autoplay : true,
seek: 40,
},

events: {

onPlay : function() {
// alert("I am Playing!");

},

},

};
var player = bitdash('player');
player.setup(conf).then(function(value) {
// Success
console.log('Successfully created bitdash player instance');
}, function(reason) {
// Error!
console.log('Error while creating bitdash player instance');
});
</script>

Answer

In the player configuration you could specify a callback function for when the playback starts (onPlay) and inside this function seek to the desired position in seconds by using the seek(pos) player API function.

For example:

var conf = {
    key:"XXXXXXXXXXXXXXXXXXXX",
    source: {
        progressive: "http://example.com/somevid.mp4",
        poster:      "http://example.com/someimage.jpg",
    },
    playback: {
        autoplay: true
    },
    events: {
        onPlay: function() {
            // seek to desired start position
            this.seek(40);
        }
    }
};

Side note: Inside event callbacks the this keyword is bound to the player object.

EDIT:

The previous approach will seek to second 40 also every time the user pauses playback and then continues playback again, because the onPlay event is triggered every time the user continues playback. To avoid this a better approach would be:

var conf = {
    key:"XXXXXXXXXXXXXXXXXXXX",
    source: {
        progressive: "http://example.com/somevid.mp4",
        poster:      "http://example.com/someimage.jpg",
    },
    playback: {
        autoplay: true
    },
    events: {
        onReady: function() {
            this.addEventHandler('onPlay', seekToStart);
        }
    }
};

function seekToStart() {
    // remove event handler after first seek to avoid seeking 
    // to specified the position when user pauses and plays again
    this.removeEventHandler('onPlay', seekToStart);

    // seek to desired start position
    this.seek(40);
}
Comments