Question

我正在使用VideoJS作为我正在处理的项目的视频播放器。基本上我有一个div，我希望在该div中有视频播放器，但是当我加载页面时没有任何反应，并且视频从未播放过。事实上，视频永远不会加载也不会显示在页面中。我基本上从VideoJS页面复制了这个例子。有什么想法吗？

 <div class="video-js-box">
            <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
         <div style="position: absolute; top: 50px; left: 600px; display:none">
            <video id="example_video_1" class="video-js vjs-default-skin"  
              controls preload="auto" width="640" height="264"  
              poster="http://video-js.zencoder.com/oceans-clip.png"  
              data-setup='{"example_option":true}'>  
             <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'></source>
             <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>></source>  
             <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'></source>  
            </video>
            <!-- Download links provided for devices that can't play video in the browser. -->
            <p class="vjs-no-video"><strong>Download Video:</strong>
              <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
              <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
              <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
              <!-- Support VideoJS by keeping this link. -->
              <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
            </p>
          </div>    
        <div style="clear:both;"></div>
    </div><!--main-->

Answer 1

您已设置div显示：无。因此，即使在玩家加载后，它所驻留的div也被隐藏了。将您的div更改为<div style="position: absolute; top: 50px; left: 600px; display:none"> to <div style="position: absolute; top: 50px;">以正确显示播放器！

工作演示：http://jsfiddle.net/epinapala/YsXTu/1/

<div class="video-js-box">
        <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
     <div style="position: absolute; top: 50px;">
        <video id="example_video_1" class="video-js vjs-default-skin"  
          controls preload="auto" width="640" height="264"  
          poster="http://video-js.zencoder.com/oceans-clip.png"  
          data-setup='{"example_option":true}'>  
         <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'></source>
         <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>></source>  
         <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'></source>  
        </video>
        <!-- Download links provided for devices that can't play video in the browser. -->
        <p class="vjs-no-video"><strong>Download Video:</strong>
          <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
          <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
          <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
          <!-- Support VideoJS by keeping this link. -->
          <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
        </p>
      </div>    
    <div style="clear:both;"></div>
</div><!--main-->

Answer 2

我遇到了另一个问题。 video.js删除托管页面中的所有onload函数。因此，如果您在或者window.onload中都有onload调用，那么它将不会触发。

HTML 5页面的视频播放器未加载

2 个答案: