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

伙计们

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

HTML:

---

但是如果页面上有4、5、6…100个视频（而且会有），我该怎么办？我无法处理100个唯一ID。

您可以将每个视频和按钮放入父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>

---

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

使用纯Javascript（无jQuery）

您只需依靠

id

，使用标记作为参考，并获取最近的

span

。请参阅下面的代码

功能最近（el，sel）{
如果（el！=null）返回el.matches（sel）？el:（el.querySelector（sel）| |最近的（el.parentNode，sel））；
}
var videos=document.getElementsByTagName（“视频”）；
对于（i=0；i

玩
播放

你必须使用CSS

类

es而不是

id

，你必须使用JavaScript来收听视频事件，并拥有自定义控件，如播放暂停按钮切换。JavaScript的

event.target

告诉您哪个视频正在做什么。MDN有一篇很棒的文章，其中包含了单个视频自定义控件的详细说明

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

可读的源代码位于github上

做起来相当复杂，但正如你所见，这是可以做到的。现场工作演示在

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

---

使用

document.getElementsByTagName（“视频”）

我正在考虑这个问题。但是如何将任何自定义“播放”按钮与正确的视频匹配？只需将其放在视频标签旁边，然后使用

.nextSibling

http://www.w3schools.com/jsref/prop_node_nextsibling.asp

尝试此代码谢谢您的时间和帮助。我将使用@11thdimension代码工作棒极了！非常感谢你的帮助。

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";
            }
        });
    }

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

$(".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");
        }
    });
});