我已经向网页添加了三个视频，我已经添加了代码，以便当我单击视频时出现播放/暂停按钮。我正在努力弄清楚如何从我当前未点击的视频中删除暂停/播放按钮。我也不明白为什么当我双击视频时视频会消失。另外，当我点击一个按钮时，我正在使用一种不好的方式来添加按钮，我就是这样做的（这样就不会添加多个按钮，你能建议一种更简单的方法吗？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 videovar 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> `; }
1 回答
蝴蝶刀刀
TA贡献1801条经验 获得超8个赞
这是我的工作版本你的片段。我只创建了一次DOM结构，每个视频下都有所有必要的按钮。我在开始时使所有按钮都不可见（），并且我还只添加了一次事件监听器。事件侦听器是通用的。附加到父 div 时，它将触发不同的操作，具体取决于所覆盖的元素：display:none#videos
如果是“BUTTON”，则该按钮的文本内容用于“开始”或“暂停”相关视频。
在“VIDEO”的情况下，通过将样式属性“显示”设置为“内联”来显示关联的按钮。
请注意，我还删除了按钮中的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>
添加回答
举报
0/150
提交
取消