Question

我在网页上添加了三个视频，添加了代码，以便当我单单击视频播放时出现/ pause（暂停）按钮。我正在努力找出如何从我当前未单击的视频中删除暂停/播放按钮。另外，我也不明白为什么双击视频时视频会消失。

当我点击按钮时，我还使用一种不好的方式添加按钮我是这样做的（elem.innerHTML = `<video class="video" > ......... `; )这样就不会添加多个按钮，您能建议一种更简单的方法吗？

<body>
        <header class="head">
            VIDEO PLAYER
        </header>


        <div id="videos">
            <div id="video1">
                <video class="video"  >
                    <source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
                </video>
            </div>

            <div id="video2">
                <video class="video" >
                    <source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
                </video>
            </div>

            <div id="video3">
                <video class="video">
                    <source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
                </video>
            </div>
        </div>

        <script src="video.js"></script>
    </body>

window.onload = init;

function init() {
    var frame1 = document.querySelector('#video1');

    frame1.innerHTML += ' <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button>  ';

}


//to play another video
var click = document.querySelectorAll('#videos > div');






click.forEach(function (elem, index) {
    elem.addEventListener('click', nextPlaylist);

    function nextPlaylist(evt) {



        var save = elem.querySelector('.video').currentSrc;


        elem.innerHTML = `<video class="video" > <source src="${save}"> </video>  <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button>  `;


        var save1 = elem.querySelector('.video');
        var play = elem.querySelector('#play');

        play.addEventListener('click', playVid);

        var pause = elem.querySelector('#pause');

        pause.addEventListener('click', pauseVid);


        function playVid(e) {
            e.stopPropagation();
            save1.play();


        }

        function pauseVid(e) {
            e.stopPropagation();
            save1.pause();


        }







    }


}

Answer 1

这是我的摘要代码。我只创建了DOM结构一次，并且在每个视频下方都带有所有必需的按钮。我在开头（display:none）中使所有按钮都不可见，并且仅将事件监听器添加了一次。事件监听器是通用的。附加到父div #videos上后，它将触发不同的操作，具体取决于选中哪个元素：

如果是“按钮”，则该按钮的文本内容用于“开始”或“暂停”相关视频。
如果是“视频”，则通过将其样式属性“显示”设置为“内联”来使相关按钮显示出来。

请注意，我也摆脱了按钮中的ID。这些不是唯一的，因此不是错误的HTML。

window.onload = init;
function init() {
    document.querySelectorAll('.video').forEach(v=>{
      v.closest('div').innerHTML+=`<br><span class="buttons">
       <button>play</button> 
       <button>pause</button> 
       <button>volume up</button> 
       <button>volume down</button> 
       <button>mute</button></span>`;
      
    });
    document.querySelector('#videos').addEventListener('click',function(ev){var el=ev.target;
      if (el.tagName=="BUTTON"){var func=el.textContent
        if (["play","pause"].indexOf(func)>-1) el.closest('div').children[0][func]()
      } else if (el.tagName=="VIDEO") {
        document.querySelectorAll('span.buttons').forEach(b=>b.style.display='none');
        el.parentNode.querySelector('span.buttons').style.display='inline';
      }
    })
}

span.buttons {display:none}

<div id="videos">
 <div id="video1">
  <video class="video"  >
   <source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
  </video>
 </div>
 <div id="video2">
  <video class="video" >
   <source src="https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
  </video>
 </div>
 <div id="video3">
  <video class="video">
   <source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
  </video>
 </div>
</div>

点击其他视频后，无法删除暂停/播放按钮

1 个答案: