Мне нужно, чтобы при клике на кнопку запускалось видео, я это сделал и все работает, но проблема в том, если на одной странице несколько видео при клик на любую кнопку запускается только первой видео
<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 видео как-то не хочется, хотелось бы универсальную функцию