亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊其他視頻時無法刪除暫停/播放按鈕

單擊其他視頻時無法刪除暫停/播放按鈕

胡說叔叔 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 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>


查看完整回答
反對 回復 2022-09-23
  • 1 回答
  • 0 關注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號