Skip to main content

How to autoplay a video from a specific time and once the video is done replaying it will start it from the begining

Itamar Golan

I'm trying to emulate a live stream so that if the so called "stream" is set to start at 8pm and a user lands on my web page at 8:05pm the video will autoplay for him starting 5 minutes into the video.

On top of that once the video is done I want the user to be able to replay the video but if he clicks on the replay button the video will start playing from the start and not 5 minutes into the video like the first time he landed.

I was able to start playing the video from the desired time by trimming the video using the 'start_offset' transformation param. I created the video player with "autoplay=true" constructor param in order for it to start playing upon landing.

In order replay the video from the start I tried using an 'ended' event using the following code:

player.on('ended', (event) => {
  player.source('sample', {
    sourceTypes: SUPPORTED_VIDEO_FORMATS
  })
})

The problem is that when the 'ended' event updates the source of the player the "new" untrimmed video starts autoplaying as well. I wasn't able to change the autoplay value for the already existing video player.

Is there a way to do it? or is there a better way to implement my need?

0

Comments

3 comments

Date Votes
  • Michal Kuperman

    Hi Itamar,

    Thanks for contacting us.

    You can remove the `autoplay` attribute like this:

    player.on('ended', (event) => {
    player.videoElement.removeAttribute('autoplay')
    player.source('sample', {})
    })

    Let us know if this works for you.

    Regards,
    Michal

    0
  • Itamar Golan

    Hey Michal,
    Thank you for your comment.

    Unfortunately the code you provided does not work for me.

    "player.videoElement" return 'undefined' and thus I'm getting the following error:

    VIDEOJS: ERROR: TypeError: Cannot read properties of undefined (reading 'removeAttribute')

    0
  • Michal Kuperman

    Hi Itamar,

    I'm attaching the full code:

    HTML:

    <html>
    <head>
    <link href="https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css" rel="stylesheet">
    <script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js" 
    type="text/javascript"></script>
    </head>
    <body>
    <video id="player" controls autoplay class="cld-video-player cld-video-player-skin-dark">
    </video>
    </body>
    </html>

    JS:

    var source ="https://res.cloudinary.com/demo/video/upload/dog.mp4"

    var cld = cloudinary.Cloudinary.new({
    cloud_name: "myCloud"
    });
    const player = cld.videoPlayer('player', {
    });

    player.source(source, {})

    player.on('ended', (event) => {
    player.videoElement.removeAttribute('autoplay')
    player.source('elephants', {})
    })

    In order to further assist, can you please provide your code?

    Looking forward to your updates

    0

Post is closed for comments.

Didn't find what you were looking for?

New post