-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 display：noneを設定しました。そのため、プレーヤーがロードインされた後でも、プレーヤーが存在する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

私は別の問題に遭遇しました。video.jsは、ホスティングページのすべてのonload関数を削除します。したがって、またはwindow.onloadのいずれかにonload呼び出しがある場合、それは起動しません。

于 2013-03-13T21:29:03.437 に答える