Question

我有一个小问题。由于我的html5视频没有控件（只有水平和垂直居中的播放暂停按钮），因此必须在视频结束后再次显示。我必须实现这一目标。但我不知道怎么样，我已经尝试了一切。

这是我的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 -->

这是JavaScript（我到目前为止尝试过这个，但它只是“重启”视频，但没有显示播放暂停按钮）：

    // 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.

非常感谢每一位帮助！

Answer 1

试试这个：

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

视频结束后显示播放按钮

1 个答案: