0

私のページには多くのビデオがあり、ビデオを高速化するためにビデオに追加のボタンを作成しました。getElementById を呼び出すと機能します。ページ上のすべての動画に 1 つの Javascript を使用することはできますか? 約 80+ であるため、速度 1x に戻るボタンも作成する必要があるため、多くの重複した JavaScript コードになります。

HTMLページブロックはこんな感じ。

....
<div class="LigthBox">
        <a href="#DVDList" class="close" id="clVid1"></a> <a href="javascript:Play15();" class="speed15"> <a href="javascript:Play1();" class="speed1"></a> 
        <video class="Video_LitBox" id="DVD101" controls preload="none" poster="img/DVDThb-101.png"> <source src="res/vid-str.php?play_video=101" type="video/mp4"> </video>  
        <h3 class="DVid_title">101 Intro </h3>
        <p class="DVid_body">101 Intro description .....</p>
    </div>
....

以下のスクリプト領域には、次のものがあります。

<script type="application/javascript">
  var vid = document.getElementById("DVD101");
  vid.onended = function() { 
    alert("The video has ended");
    fireEvent( document.getElementById('clVid1'), 'click'); 
  } 

  function Play1() { 
    vid.playbackRate = 1;
  }
  function Play15() { 
    vid.playbackRate = 1.5;
  }
</script>

そのため、変数 vid をページ上のすべてのビデオに対して何らかの方法で定義するか、他の回避策があればそれを回避します。ところで、ビデオが終了した後もfireeventは機能しません。アラートは表示されますが、ウィンドウは閉じません。

4

2 に答える 2

1

メソッドを使用する代わりに、セレクターを変更する必要がありgetElementById()ます。

document.querySelectorAll('video')

これは、すべてのビデオ インスタンスを含む配列を返します。次に、単純なfor...inまたはforEachループを使用して、必要なことを簡単に行うことができます。

メソッドの詳細querySelectorAll()。

于 2021-02-02T23:50:38.967 に答える