angulartypescriptazurehtml5-videoazure-media-player

Start a video at a particular time and keep track of the video


This is a 2 part question.

I am playing a video using Azure Media Player. The code is given below. I am just displaying the URL of the video and it starts to play.

  1. I need to know how to play the video at a particular time (Let's say at 0.19 Sec)

  2. How can I keep track of the time the video has being playing

    <video oncontextmenu="return false;"  id="vid1" class="azuremediaplayer amp-default-skin" autoplay width="640" height="400"  data-setup='{"nativeControlsForTouch": false}'>
        <source src={{url}} >
    </video>
    

Solution

  • See the AMP docs and the API docs for more info.

    var myPlayer = amp("vid1", function(){
        //this is the ready function and will only execute after the player is loaded
    
        myPlayer.currentTime(19);  // immediately after the video is ready, this will set the time to 19 seconds
    });
    
    // in this case, assume `startCounter` and `stopCounter` are functions
    // you created that start and pause a timer to keep track of how long someone
    // has actually been playing the content.
    myPlayer.addEventListener(amp.eventName.play, startCounter);
    myPlayer.addEventListener(amp.eventName.pause, pauseCounter);
    
    // or use `timeupdate` if you would rather just keep track of the current
    // playback position.
    myPlayer.addEventListener(amp.eventName.timeupdate, someFunc);