Запуск видео через input[type=“button”]

173

02 мая 2018, 04:33

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

<div class="video_with_link">
    <video id="video" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayStopVideo"></video>
    <input type="button" class="PlayStopVideo">
</div>
<div class="video_with_link">
    <video id="video" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayStopVideo"></video>
    <input type="button" class="PlayStopVideo">
</div>
<script>
    var video;
        window.onload = function() {
            video = document.getElementById("video");
        }
        $(document).on('click','.PlayStopVideo',function(){
            if(video.paused) {
                video.play();
            }
            else {
                video.pause();
            }
        });
</script>

Я понимаю, что нельзя, чтобы на одной странице был один и тот же ID, но писать 10 функций для 10 видео как-то не хочется, хотелось бы универсальную функцию

Answer 1

Вам нужно сделать 2 разных id для video и передавать их в виде аргумента управляющей функции. внутри функции добераться до элемента будете так.

function video(id){
    var video = document.getElementById(id)
    video.play();
}

Что бы ещё упростить можно для каждой кнопке передать data-id=" нужное id видео для кнопки" и по this в обработчике click вытаскивать его и ставить в функцию.

Answer 2

var video; 
$(document).on('click','.PlayStopVideo',function(){ 
    video = document.getElementById(this.dataset.videoID); 
    if(video.paused) { 
        video.play(); 
    } 
    else { 
        video.pause(); 
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="video_with_link"> 
    <video id="video1" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayStopVideo"></video> 
    <input type="button" class="PlayStopVideo" data-videoID="video2"> 
</div> 
<div class="video_with_link"> 
    <video id="video2" width="380px" height="250px" src="video/videoplayback.mp4" class="PlayStopVideo"></video> 
    <input type="button" class="PlayStopVideo" data-videoID="video2"> 
</div>