Question

嘿伙计们，我正在尝试在我的HTML5视频源之间切换，我可以让它工作，以便它从A切换到B，但它不想从B变回A.

我尝试了很多不同的编写方式，但似乎没有用。所以我希望有人可以帮助我。

    <!DOCTYPE html>
     <head>
      <style>
      * {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      .buttons{
        position: absolute;
        z-index: 9999;
        bottom: 0;

      }
      .button {
        width: 500px;
        height: 200px;
        background-color: rgba(255, 0, 0, 1);
        border: 0;
        border-color: rgba(255, 0, 0, 0);
      }
      .button:focus {
        border: 0;
        border-color: rgba(255, 0, 0, 0);
        outline:0;

      }
      .twee {
        background-color: green;
      }
     </style>
    </head>
   <body>   
    <div>
     <div class="buttons">
       <button class="button" id="pause"></button>
       <button class="button twee" id="switch"></button>
     </div>
     <video loop autoplay id="video1" width="100%" height="100%">
        <source id="video2" src="mov_bbb.mp4" type="video/mp4">
     </video>
   </div>

  <script>
    var myVideo = document.getElementById("video1");
    var myVid = document.getElementById("video2");

    document.getElementById("pause").addEventListener ("click", playPause);
    document.getElementById("switch").addEventListener ("click", switchScreen);


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

     function switchScreen(){
       if (myVid.src = "mov_bbb.mp4"){
           myVid.src = "lal.mp4";
          } else {
             myVid.src = "mov_bbb.mp4";
          }
        myVideo.load();
       }

    </script>

</body>
</html>

Answer 1

if (myVid.src = "mov_bbb.mp4")

=是作业而不是比较（例如==或===），因此该语句将始终为真。

Answer 2

=是一个使用者==或===进行比较的分配

此外，这更具可读性：

function switchScreen(){
  myVid.src = myVid.src === "mov_bbb.mp4" ? "lal.mp4" : "mov_bbb.mp4";
  myVideo.load();
 }

HTML5视频使用Javascript来回更改源代码

2 个答案: