如何切换可以在 JavaScript/Html 中播放和暂停的视频元素优先级

Question

我的游戏没有播放其他歌曲，所以我正在寻找如何更改音频的示例。

这是我的 HTML:

<body onload= myFunction() >
<video autoplay="true"  id="song" width="0" height="0" loop><source src="http://audio.ngfiles.com/518000/518280_-Super-Battletrain-.mp3" type="audio/mpeg"></video>
<video autoplay="true"  id="song2" width="0" height="0" loop><source src="http://audio.ngfiles.com/504000/504114_Flirt-Flirt-Oh-It-Hurts.mp3" type="audio/mpeg"></video>
<video autoplay="true"  id="song3" width="0" height="0" loop><source src="hhttp://audio.ngfiles.com/587000/587069_-Endgame-.mp3" type="audio/mpeg"></video>
<p id="demo"></p>
</body>

Answer 1

浏览器只会自动播放一个文件。如果要同时播放多个文件，需要使用JavaScript，像这样：

<body onload="javascript:myFunction()">

  <script type="text/javascript">
    var myFunction = function() {
      document.getElementById('song').play();
      document.getElementById('song2').play();
      document.getElementById('song3').play();
    };
  </script>

  <video id="song" width="0" height="0" loop><source src="http://audio.ngfiles.com/518000/518280_-Super-Battletrain-.mp3" type="audio/mpeg"></video>
  <video id="song2" width="0" height="0" loop><source src="http://audio.ngfiles.com/504000/504114_Flirt-Flirt-Oh-It-Hurts.mp3" type="audio/mpeg"></video>
  <video id="song3" width="0" height="0" loop><source src="hhttp://audio.ngfiles.com/587000/587069_-Endgame-.mp3" type="audio/mpeg"></video>
  <p id="demo"></p>
   
</body>

您也可以调用 document.getElementById('song').pause() 暂停歌曲。

编辑：要一首接着一首地播放，您可以这样做：

<body onload="javascript:myFunction()">

  <script type="text/javascript">
    var myFunction = function() {
      var song1 = document.getElementById('song');
      var song2 = document.getElementById('song2');
      var song3 = document.getElementById('song3');

      song1.play();

      song1.onpause = function() {
        song2.play();
      };

      song2.onpause = function() {
        song3.play();
      };

      song3.onpause = function() {
        song1.play();
      };
    };
  </script>

  <video id="song" width="0" height="0" loop><source src="http://audio.ngfiles.com/518000/518280_-Super-Battletrain-.mp3" type="audio/mpeg"></video>
  <video id="song2" width="0" height="0" loop><source src="http://audio.ngfiles.com/504000/504114_Flirt-Flirt-Oh-It-Hurts.mp3" type="audio/mpeg"></video>
  <video id="song3" width="0" height="0" loop><source src="hhttp://audio.ngfiles.com/587000/587069_-Endgame-.mp3" type="audio/mpeg"></video>
  <p id="demo"></p>
   
</body>

这将开始播放歌曲 1，暂停时将播放歌曲 2，然后是歌曲 3，然后再次播放歌曲 1。

如何切换可以在 JavaScript/Html 中播放和暂停的视频元素优先级

How can I switch Video element priority in which can be played and paused in JavaScript/Html

html

javascript

html5-video