HTML5 пользовательские элементы управления для любого количества видео на странице

Question

товарищи!

Мне понадобилась простая текстовая кнопка - «Играть». Он должен быть скрыт, если видео воспроизводится и должно быть видимым, когда видео заканчивается. Все работает нормально, но работает, только если у меня есть одно видео на странице с уникальным идентификатором.

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 уникальных идентификаторов ...

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

По крайней мере, это даст вам представление о подходе к этой проблеме.

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>