-2

我正在使用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-->
4

2 回答 2

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-->​
于 2012-06-25T03:11:19.707 回答
0

I have come across another problem. video.js removes any onload functions in the hosting page. So if you have an onload call in either or window.onload then it won't fire.

于 2013-03-13T21:29:03.437 回答