爲javascript中的視頻元素創建重複的視頻對象。控制html5視頻

我需要控制我網站中視頻元素的播放和暫停。下面給出了html的重要部分。爲javascript中的視頻元素創建重複的視頻對象。控制html5視頻

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
      codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="515"> 
     <param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 
     <param name="src" value="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" /> 
     <param name="controller" value="true" /> 
     <param name="loop" value="false" /> 
     <param name="autoplay" value="false" /> 
     <param name="autostart" value="false" /> 
     <param name="scale" value="aspect" /> 
     <!--[if !IE]>--> 
     <object data="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" type="video/mp4" width="800" height="515"> 
      <param name="src" value="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" /> 
      <param name="pluginurl" value="http://www.apple.com/quicktime/download/" /> 
      <param name="controller" value="true" /> 
      <param name="loop" value="false" /> 
      <param name="autoplay" value="false" /> 
      <param name="autostart" value="false" /> 
      <param name="scale" value="aspect" /> 
     <!--<![endif]--> 
      <span class="mediaplugin mediaplugin_html5video"> 
<video controls="true" width="800" height="500" preload="metadata" title="6N1.1 Intro Video.mp4"> 
    <source src="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" type="video/mp4"></source> 
    <a class="mediafallbacklink" href="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4">6N1.1%20Intro%20Video.mp4</a> 
</video> 

</span> 
     <!--[if !IE]>--> 
     </object> 
     <!--<![endif]--> 
    </object> 
</span><br></p>

現在我試圖控制下面的代碼

var videos = document.querySelectorAll('video'); 
    for(i=0;i<videos.length;i++) { 
     videos[i].id = 'video-'+i; 
    } 



    $(document).ready(function() { 
    var interval = self.setInterval(function(){LoopForever()},1000); 
    var video0 = document.getElementById('video-0'); 

     function LoopForever() { 
      $.ajax({url:"http://localhost/StudentState.php", 
      headers: { 
        'Access-Control-Allow-Origin': '*' 
       }, 
      success:function(data){ 
       var video0 = document.getElementById('video-0'); 

       if(video0.ended == false){ 
         if(data >0){ 
           video0.play(); 
         } else{ 
          video0.pause(); 
         } 
       } 
      } 

      }) 
     } 
    });

的視頻，但會發生什麼，創建了兩個視頻對象。從上面的JavaScript代碼中，只有新創建的對象被控制，而不是瀏覽器中顯示的對象。

有沒有人有回答這個？

更新

完整的代碼放在這裏：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
<body> 

<p><span class="mediaplugin mediaplugin_qt"> 
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
      codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="515"> 
     <param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 
     <param name="src" value="Area_of_irregular_shape.mp4" /> 
     <param name="controller" value="true" /> 
     <param name="loop" value="false" /> 
     <param name="autoplay" value="false" /> 
     <param name="autostart" value="false" /> 
     <param name="scale" value="aspect" /> 
     <!--[if !IE]>--> 
     <object data="Area_of_irregular_shape.mp4" type="video/mp4" width="800" height="515"> 
      <param name="src" value="Area_of_irregular_shape.mp4" /> 
      <param name="pluginurl" value="http://www.apple.com/quicktime/download/" /> 
      <param name="controller" value="true" /> 
      <param name="loop" value="false" /> 
      <param name="autoplay" value="false" /> 
      <param name="autostart" value="false" /> 
      <param name="scale" value="aspect" /> 
     <!--<![endif]--> 
      <span class="mediaplugin mediaplugin_html5video"> 
<video controls="true" width="800" height="500" preload="metadata"> 
    <source src="Area_of_irregular_shape.mp4" type="video/mp4"></source> 
</video> 

</span> 
     <!--[if !IE]>--> 
     </object> 
     <!--<![endif]--> 
    </object> 
</span><br></p> 


<script> 

     var videos = document.querySelectorAll('video'); 
     for(i=0;i<videos.length;i++) { 
       videos[i].id = 'video-'+i; 
     } 



    $(document).ready(function() { 
     var interval = self.setInterval(function(){LoopForever()},1000); 
     var video0 = document.getElementById('video-0'); 

      function LoopForever() { 
        $.ajax({url:"http://localhost/StudentState.php", 
        headers: { 
        'Access-Control-Allow-Origin': '*' 
       }, 
        success:function(data){ 
           var video0 = document.getElementById('video-0'); 

           if(video0.ended == false){ 
              if(data >0){ 
               video0.play(); 
               } else{ 
                 video0.pause(); 
               } 
           } 
         } 

        }) 
      } 
     }); 
</script> 
</body>a 
</html>

現在，如果我在Chrome調試它，它被複制。

來源

2016-08-22 Arun Chaudhary

是什麼讓你相信這種情況？在jsFiddle或類似的演示中會很好。 – Whothehellisthat

正在播放兩個視頻，但我在html文件中只有一個視頻元素。另外，如果我在瀏覽器中暫停了在GUI上看到的視頻，另一個視頻繼續播放。第二個視頻可以由javascript代碼控制，但不是我在瀏覽器中看到的第一個視頻。順便說一句，這兩個視頻內容相同，我從正在播放的音頻中確認。 –

您已將不同版本的視頻嵌入到網頁中，對嗎？你有QT，MP4（物體）和MP4（視頻）。如果刪除那些

爲javascript中的視頻元素創建重複的視頻對象。控制html5視頻

回答

相關問題