JavaScriptまたはjQueryを使用してすべての動画要素を取得する方法

Question

ページに複数の動画を含むウェブサイトがあります。動画の数はユーザーによって異なります。ユーザーがページにアクセスすると、すべての動画が自動再生されます。これは、デスクトップとiOSのブラウザで実行できます。ただし、多くのAndroidブラウザでは、自動再生の回避策が必要です。私はquerySelectorとquerySelectorAllの両方を試してみました

<?php 
    for ($i=0; $i < $videos.length; $i++) { 
?> 

    <video playsinline autoplay muted loop> 
    <source class="img-responsive center-block col-md-7" src="<?php echo ${'videos' . $i} ?>" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 

<?php 
    } 
?> 


<script> 
var video = document.querySelector('video'); 

window.addEventListener('touchstart', function videoStart() { 
    video.play(); 
    console.log('first touch'); 
    // remove from the window and call the function we are removing 
    this.removeEventListener('touchstart', videoStart); 
}); 
</script> 

：私のコードを参照してください。 querySelector('video')は明らかに第1のビデオを選択するためには機能しますが、以下は該当しません。 querySelectorAll('video')は動画を選択していません。

querySelectorの代替手段はありますか？

Answer 1

あなたはこれがあなたのページから、すべてのビデオタグ

感謝を返します

var videoList = document.getElementsByTagName("video"); 

を試すことができます！