页面上任意数量的视频的HTML5视频自定义控件

SpaceBuzz 发表于 Dev

太空嗡嗡声

队友！

我需要一个简单的文本按钮-“播放”。如果正在播放视频，则应将其隐藏；当视频结束时，应将其可见。一切正常，但仅当页面上有一个具有唯一ID的视频时，它才能正常工作。

HTML：

<video id="main-video" width="640" height="480">
    <source src="media//mp4/video.mp4" type="video/mp4">
</video>
<span id="custom-play-button">Play</span>

这是JS：

window.onload = function() {
    var video = document.getElementById("main-video");
    var playButton = document.getElementById("custom-play-button");
    playButton.addEventListener("click", function() {
        document.getElementById('main-video').addEventListener('ended',myHandler,false);
            video.play();
            playButton.style.visibility = "hidden";
            function myHandler(e) {
                playButton.style.visibility = "visible";
            }
        });
    }

但是，如果页面上有4,5,6 ... 100个视频（并且会有），该怎么办？我无法使用100个唯一ID ...

11维

您可以将每个视频和按钮放在父div标签中，如下所示。

<div class="video-container">
    <video id="main-video" width="640" height="480">
        <source src="media//mp4/video.mp4" type="video/mp4">
    </video>
    <span id="custom-play-button">Play</span>
</div>

我正在使用jQuery代码，您可以轻松地将其转换为纯JS。这应该工作。

$(".video-container").each(function () {
    var video = $(this).find("video");
    var plainVideo = video.get(0);/*DOM video object, unwrapped from jQuery*/
    var playBtn = $(this).find("span");

    playBtn.click(function () {
        video.get(0).addEventListener('ended',myHandler,false);
        plainVideo.play();
        playBtn.css("visibility", "hidden");

        function myHandler(e) {
            playBtn.css("visibility", "visible");
        }
    });
});

至少这会使您对解决此问题的方法有所了解。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。