HTML 2視頻在1頁上使兩組按鈕僅適用於1個視頻

Question

每當我嘗試按按鈕時，它們只能用於視頻中的1個，而不是用於預期視頻的每個組。任何幫助將不勝感激。順便說一句我是usign谷歌chrome.Thanks :)你在這兩個腳本，「爲myVideo」使用相同的變量名

<div style="text-align:center"> 
    <button onclick="playPause()">Play/Pause</button> 
    <button onclick="makeBig()">Big</button> 
    <button onclick="makeSmall()">Small</button> 
    <button onclick="makeNormal()">Normal</button> 
    <br> 
    <video id="myVideo1" width="420"> 
<source src="r8_ext.mp4" type="video/mp4"> 
    </video> 
    </div> 

    <script> 
    var myVideo = document.getElementById("myVideo1"); 

    function playPause() { 
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
    } 

    function makeBig() { 
    myVideo.width = 560; 
    } 

    function makeSmall() { 
    myVideo.width = 320; 
    } 

    function makeNormal() { 
myVideo.width = 420; 
} 
    </script> 





    <div style="text-align:center"> 
    <button onclick="playPause()">Play/Pause</button> 
    <button onclick="makeBig()">Big</button> 
    <button onclick="makeSmall()">Small</button> 
    <button onclick="makeNormal()">Normal</button> 
     <br> 
    <video id="myVideo2" width="420"> 
    <source src="r8_int.mp4" type="video/mp4"> 
    </video> 
</div> 

<script> 
var myVideo = document.getElementById("myVideo2"); 

    function playPause() { 
    if (myVideo.paused) 
    myVideo.play(); 
    else 
     myVideo.pause(); 
    } 

    function makeBig() { 
    myVideo.width = 560; 
    } 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
    </script> 

謝謝:)

Answer 1

。他們需要是獨一無二的。另外，你有重複的功能。你應該重構它們以避免重複。

Answer 2

您對兩個視頻都使用相同的變量和函數。爲每個視頻使用一個唯一的變量，並讓這些功能將視頻作爲參數，而不是複製它們。

var myVideo1 = document.getElementById("myVideo1"); 
    var myVideo2 = document.getElementById("myVideo1"); 
    ... 
    function playPause(video) { 
    if (video.paused) 
    video.play(); 
    else 
    video.pause(); 
    } 
    ... 
    <button onclick="playPause(myVideo1)">Play/Pause</button> 
    ... 
    <button onclick="playPause(myVideo2)">Play/Pause</button>