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

video player for HTML 5 page not loading

本文关键字：播放器 加载 的视频 HTML      更新时间：2023-09-26

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

您已设置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-->​

我遇到了另一个问题。 视频.js 删除托管页面中的任何加载函数。因此，如果您在任一或 window.onload 中有 onload 调用，那么它不会触发。

相关文章：