Объединение нескольких сценариев управления видео плеером

[Gena]

Здравствуйте.
У меня такой вопрос. Есть небольшой скрипт помогающий осуществлять управление HTML5 видео плеером.

<center>
  <video id="movie" width="100%" height="auto" controls="controls" poster="">
   <source src="video.mp4" type="video/mp4">
  </video>
</center>
<script>var a=document.getElementById("movie");a.onclick=function(){if(a.paused){a.play();}else{a.pause();}};</script>

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

id="movie"

то скрипт перестает работать. Конечно можно применить такой вариант:

<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
<script>var a=document.getElementById("movie1");a.onclick=function(){if(a.paused){a.play();}else{a.pause();}};
var b=document.getElementById("movie2");b.onclick=function(){if(b.paused){b.play();}else{b.pause();}};
</script>

но если видео роликов будет еще больше, то придется еще раз увеличивать практически повторяющийся код.
Возможно есть способ какого то объединения нескольких скриптов, что бы работал унивестальный поиск по элементу

id="movie\d+"

и тогда скрипт управления можно будет сделать более компактным? Спасибо

[voraa]

но если видео роликов будет еще больше, то придется еще раз увеличивать практически повторяющийся код.

Так сделайте

<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
  
<script>
const videos = document.querySelectorAll('video');

function playpause () {
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }  

videos.forEach (video => video.addEventListener('clic', playpause));
</script>

[Gena]

Спасибо за совет, но это несрабатывает, как с одним, так и с двумя видео.. Вот html файл и 2 мини видео ролика, что бы было проще это увидеть. К сожалению я сам не особо разбираясь в javascript что бы найти в чем причина.. Я проверил в раузерах Google hrome и IE 11.
Похоже что это работает только для Firefox, но исходный скрипт, почему то работает во всех браузерах.

[voraa]

К сожалению я сам не особо разбираясь в javascript

В этом то и причина. Когда пишешь код, который невозможно проверить самому, могут возникать и нелепые ошибки, которые разбирающийся заметил бы в своем браузере. Просто скобку пропустил. И это не должно работать нигде.
Так пробуйте

<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
   
<script>
const videos = document.querySelectorAll('video');
 
function playpause () {
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    } 
}
 
videos.forEach (video => video.addEventListener('clic', playpause));
</script>

[Gena]

В Firefox, запуск срабатывал, поскольку там видимо, есть своя система управлением плеером с помощью кликов, (проверил это убрав полностью весь javascript код). Исправление со скобкой ничего не поменяло. Видимо метод вызова, какой то нестандартный. В любом случае, Спасибо за попытку помочь.

[Rise]

voraa,
Опять

Gena,
Да всё работает, будь внимательней, не как voraa 'click'

[voraa]

voraa,
Опять

Ну опять. Без VSC трудновато стало писать без ошибок

<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
    
<script>
const videos = document.querySelectorAll('video');
  
function playpause () {
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }
}
  
videos.forEach (video => video.addEventListener('click', playpause));
</script>

ну так то уж точно должно сработать.

[Gena]

ну так то уж точно должно сработать.

Спасибо за помощь, это действительно работает.

[Rise]

voraa,
VSC приводит к отуплению получается?

[voraa]

VSC приводит к отуплению получается?

Да практически любая автоматизация приводит к отуплению. Меньше необходимости проверять себя. Ну и когда пишешь без него уже отвыкаешь проверять все ли скобки поставил, так ли написал идентификатор....