CODEWITHSUNDEEP
javascripthtmlhtml5-video
user3187075
user3187075

Reputation:

Show play button after video ended

I have a probably small problem. Since i don't have controls on my html5 video (only play-pause button which is centered horizontally and vertically), it must be displayed again after the video was ended. I must to achieve that. But i don't know how, i've tried everything.

Here is my HTML:

    <!-- Video placeholder -->
    <div class="video-placeholder">

        <!-- Video -->
        <video class="video" controls poster="images/video-poster.png">

            <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />

        </video>
        <!-- / Video -->

        <!-- Play/Pause -->
        <div class="play-pause"></div>
        <!-- / Play/Pause -->

    </div>
    <!-- / Video placeholder -->

Here's the JavaScript (i've tried this so far, but it only "restart" video, but play-pause button is not showed):

    // Video mechanism:
    $( ".video" ).parent().click(function() {

        if ( $(this).children( ".video" ).get(0).paused ) {

            $(this).children( ".video" ).get(0).play();

            $(this).children( ".play-pause" ).fadeOut();

        } else {

           $(this).children( ".video" ).get(0).pause();

           $(this).children( ".play-pause" ).fadeIn();

        }

    });
    // The end.


    $( ".video" ).on( "ended", function() {

        $(this).load();

    });
    // The end.

Every help is very appreciated!

Upvotes: 0

Views: 2976

Answers (1)

kapitalny
kapitalny

Reputation: 320

Try this:

(function showPlayButton() {
    if (document.getElementById('video-id').ended) {
        document.getElementById('play-button-id').style.display = 'block';
    }
    setTimeout(showPlayButton, 1000);
})();

Upvotes: 2

Related Questions