Question

配合！

我需要一个简单的文字按钮 - “播放”。如果正在播放视频，则应隐藏该视频，并在视频结束时显示。一切正常，但只有当我在页面上有一个具有唯一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 ...

Answer 1

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

<Header>

我使用jQuery代码，您可以轻松地将其翻译为普通JS。这应该有用。

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

至少这会让您了解解决此问题的方法。

Answer 2

使用纯Javascript（无jQuery）

您应该依赖id，使用标记作为参考，并获取最近的span。请参阅以下代码。

function closest(el, sel) {
    if (el != null) return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel));
}

var videos = document.getElementsByTagName("video");
for (i = 0; i < videos.length; i++) {
    var video = videos[i];
    var playButton = closest(video, "span");
    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";
        }
    });
}

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

Answer 3

您必须使用CSS class es而不是id，并且您必须使用JavaScript来监听视频事件并拥有自定义控件，例如playpause按钮切换。 JavaScript event.target告诉您哪个视频正在做什么。 MDN有一篇很棒的文章Creating a cross-browser video player，其中包含有关单个视频的自定义控件的详细说明。

自动

我花了几天时间创建了一个JavaScript，可以自动为HTML页面上的任意数量的视频自定义控件（Google的Material Design用户界面）。

可读的源代码位于rhroyston/material-controls-for-html-video的github上。

相当复杂，但正如您所见，它可以完成。实时工作演示位于https://hightechtele.com/articles/material-controls-for-html-video

最后，就像我说的，这花了我几天。单个视频手动操作很容易，但想要自动化/编写脚本。 ...所以查看脚本（以及小巧的CSS），看看它是如何完成的。

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

3 个答案:

自动