更改多個html5視頻播放器的速度

Question

我有一個頁面很少有HTML5視頻播放器，我想以0.5倍的速度播放它們。我已經展示了僅適用於單個視頻播放器的js代碼段。

<script type="text/javascript"> 
    /* play video twice as fast */ 
    document.querySelector('video').defaultPlaybackRate = 1.0; 
    document.querySelector('video').play(); 

    /* now play three times as fast just for the heck of it */ 
    document.querySelector('video').playbackRate = 3.0; 
</script> 

這僅適用於第一視頻。我需要它爲每個視頻。下面是html的一部分的片段。

<ul class="regular slider"> 
    <li class="videodiv" style="background-image: url('boxing.jpg')"> 
     <video preload="yes" loop> 
     <source src="12950321.mp4" type="video/mp4"/> 
     </video> 
     <div class="slantedcaption">Boxing</div> 
     <a href="detail.html"> 
     <div class="caption"> 
      <h2>Boxing</h2> 
      <div class="category">Passion</div> 
     </div> 
     </a> 
    </li> 
    <li class="videodiv" style="background-image: url('coding.jpg')"> 
     <video preload="yes" loop> 
     <source src="14019065.mp4" type="video/mp4"/> 
     </video> 
     <div class="slantedcaption">Boxing</div> 
     <a href="detail.html"> 
     <div class="caption"> 
      <h2>Boxing</h2> 
      <div class="category">Passion</div> 
     </div> 
     </a> 
    </li> 
    <li class="videodiv" style="background-image: url('dance.jpg')"> 
     <video preload="yes" loop> 
     <source src="12950321.mp4" type="video/mp4"/> 
     </video> 
     <div class="slantedcaption">Boxing</div> 
     <a href="detail.html"> 
     <div class="caption"> 
      <h2>Boxing</h2> 
      <div class="category">Passion</div> 
     </div> 
     </a> 
    </li> 
</ul> 

Answer 1

變化Javscript文件：

<script type="text/javascript"> 
    /* play video twice as fast */ 
    document.querySelector('video').defaultPlaybackRate = 1.0; 
    document.querySelector('video').play(); 

    /* now play three times as fast just for the heck of it */ 
    var videos =document.querySelectorAll('video'); 
    for (var i=0;i<videos.length;i++) 
    { 
    videos[i].playbackRate = 3.0; 
    } 
</script> 

這個錯誤是因爲你使用querySelector，它返回一個視頻對象。 作爲querySelectorAll，返回對象數組（所有視頻標籤）。因此您必須迭代數組並增加視頻的速度。

希望它可以幫助。 快樂編碼！

Answer 2

這是因爲querySelector只返回第一個元素。

如果您想訪問多個視頻標籤，則可以使用querySelectorAll。

querySelectorAll將返回所有視頻的數組，然後您將需要循環它們以應用您的defaultPlaybackRate。

例子：

var videos = document.querySelectorAll('video'); 

for(i=0;i<videos.length;i++){ 
    videos[i].playbackRate = 0.5; 
}