Search code examples
javascriptjqueryhtml5-video

video on ended plays again from start instead of stop/pause

<video class='vsingle' id='vsingle' src='ph/video.mp4' poster='ph/vposter.jpg' controls></video>

js

$('#vsingle').on('ended',function(){
    $(this)[0].load();
});

This code results in playing video again from start
I want just to reload it, so starting poster to be visible and not to play
How can I to this ?

I also tried this, vithout success

$(this)[0].load();
$(this)[0].pause();
Solution

  • According to MDN Docs @https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load:

    The HTMLMediaElement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.

    Try using currentTime, like this:

    $(this)[0].pause();
$(this)[0].currentTime = 0;

    Edit:

    Check if maybe there other event listeners (causing play to begin)?

    I just tried to reproduce your code here and simply adding:

    video.addEventListener('ended', () => {   video.load(); })

    gave the expected result, and the video did not start auto-playing.