我已经向网页添加了三个视频，我已经添加了代码，以便当我单击视频时出现播放/暂停按钮。我正在努力弄清楚如何从我当前未点击的视频中删除暂停/播放按钮。我也不明白为什么当我双击视频时视频会消失。
另外，当我点击一个按钮时，我正在使用一种不好的方式来添加按钮，我就是这样做的（这样就不会添加多个按钮，你能建议一种更简单的方法吗？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> `;
}
蝴蝶刀刀
相关分类