javascriptmedia-playermp4

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>

Solution

  • 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);
    }