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

【问题标题】：HTML5 video custom controls for any number of videos on the page页面上任意数量视频的 HTML5 视频自定义控件
【发布时间】：2015-11-11 06:17:13
【问题描述】：

朋友们！

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

【问题讨论】：

使用document.getElementsByTagName("video")
我正在考虑这个问题。但是如何将任何自定义“播放”按钮与正确的视频相匹配？
只需将其放在视频标签旁边并使用.nextSibling http://www.w3schools.com/jsref/prop_node_nextsibling.asp
试试这个代码jsfiddle.net/kishoresahas/83sL1b0u/1
感谢您的宝贵时间和帮助。我将使用@11thdimension 代码

标签： javascript html video controls

【解决方案1】：

您可以将每个视频和按钮放在父 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");
        }
    });
});

至少这会让你对解决这个问题的方法有所了解。

【讨论】：

工作真棒！非常感谢您的帮助。

【解决方案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>

【讨论】：

【解决方案3】：

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

自动化

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

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

做起来相当复杂，但正如你所见，它是可以做到的。现场工作演示在https://hightechtele.com/articles/material-controls-for-html-video

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

【讨论】：