为了账号安全,请及时绑定邮箱和手机立即绑定

单击其他视频时无法删除暂停/播放按钮

单击其他视频时无法删除暂停/播放按钮

胡说叔叔 2022-09-23 16:22:27

我已经向网页添加了三个视频,我已经添加了代码,以便当我单击视频时出现播放/暂停按钮。我正在努力弄清楚如何从我当前未点击的视频中删除暂停/播放按钮。我也不明白为什么当我双击视频时视频会消失。


另外,当我点击一个按钮时,我正在使用一种不好的方式来添加按钮,我就是这样做的(这样就不会添加多个按钮,你能建议一种更简单的方法吗?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>  `;


        }



查看完整描述

1 回答

?
蝴蝶刀刀

TA贡献1481条经验 获得超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>


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信