видеопроигрыватель для HTML 5 страница не загружается

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: none. Таким образом, даже после того, как игрок является loadin, 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 на странице хостинга. Поэтому, если у вас есть вызов onload в or или window.onload, он не срабатывает.