Javascript 'x не является функцией'

Question

Я пытаюсь запустить и остановить два видео с двумя отдельными кнопками. Я просто скопировал код и переименовал переменные, но один фрагмент кода работает, а другой нет. Я получаю сообщение об ошибке 'TypeError: video2.pause не является функцией в HTMLButtonElement.c'. Оба видео и кнопки помещаются соответственно в модалы. Почему я получаю эту странную ошибку, особенно когда работает тот же самый код?

Javascript:

var video = document.getElementById("video.mp4"); 
    var playButton = document.getElementById("play-pause"); 

    var video2 = document.getElementById("video2.mp4"); 
    var play = document.getElementById("play-pause2"); 

    playButton.addEventListener("click", function a() { 
     if (video.paused == true) { 
      video.play(); 
      playButton.innerHTML = "Pause"; 
     } else { 
      video.pause(); 
      playButton.innerHTML = "Play"; 
     } 
     }); 

    play.addEventListener("click", function c() { 
     if (video2.paused == true) { 
      video2.play(); 
      play.innerHTML = "Pause"; 
     } else { 
      video2.pause(); 
      play.innerHTML = "Play"; 
     } 
     }); 

HTML:

<video width="900px" height="600px" id="Digital_Poster.mp4" /> 
     <source src="assets/video.mp4" type="video/mp4" id="video.mp4"/> 
     Sorry, this browser does not support the 'video' tag. 
    </video> 
    <div id="video-controls"> 
     <button type="button" id="play-pause">Play</button> 
    </div> 

    <video width="900px" height="600px"> 
     <source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/> 
     Sorry, this browser does not support the 'video' tag. 
    </video> 
    <div id="video-controls"> 
     <button type="button" id="play-pause2">Play</button> 
    </div> 

Answer 1

Вы должны вызвать .pause на <video> элементов, но id устанавливается на <source> из них. Перемещение его в <video> теги должны заставить его работать:

<video width="900px" height="600px" id="video.mp4"> 
     <source src="assets/video.mp4" type="video/mp4" /> 
     Sorry, this browser does not support the 'video' tag. 
    </video> 
    <div id="video-controls"> 
     <button type="button" id="play-pause">Play</button> 
    </div> 

    <video width="900px" height="600px" id="video2.mp4"> 
     <source src="assets/video2.mp4" type="video/mp4" /> 
     Sorry, this browser does not support the 'video' tag. 
    </video> 
    <div id="video-controls"> 
     <button type="button" id="play-pause2">Play</button> 
    </div> 

Кстати, я исправил /> к > в первой строке. Кроме того, объявление двух элементов с идентификатором, установленным на video-controls, является незаконным, рассмотрите возможность использования HTML classes (спасибо @ zer00ne за указание).