html5播放器没有播放

时间:2012-06-17 05:22:19

标签: javascript html css html5

我正在尝试在我正在开发的网站(http://videojs.com/)中使用VideoJS,但是我正在尝试在页面上加载一个简单的YouTube视频用于测试目的但仍无效:

 <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="my_video_1" class="video-js vjs-default-skin" controls
              preload="auto" width="640" height="264" poster="my_video_poster.png"
              data-setup="{}">
              <source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>
              <source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/webm'></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://www.youtube.com/watch?v=ehjDXDVpLgo">MP4</a>,
              <a href="http://www.youtube.com/watch?v=ehjDXDVpLgo">WebM</a>,
              <a href="http://www.youtube.com/watch?v=ehjDXDVpLgo">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-->

在我的页面上:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/c/video.js"></script>

有什么线索在这里出了什么问题?我期待能够在我的页面上加载和播放该视频。

1 个答案:

答案 0 :(得分:1)

不要使用Youtube视频来测试videojs,因为很难找到直接链接到视频源。请查看this question

您提供的代码链接到youtube页面而不是视频源。

<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>

视频源可能隐藏in here,但我不确定。使用您网站上托管的自己的视频进行测试。

但是,如果您仍想使用YouTube视频,请查看Video.js forum,其中有人提供解决方法的代码。

嵌入YouTube视频的简便方法是点击视频页面下的“分享”,然后点击“嵌入”标签,然后将代码复制并粘贴到您的网站上。 哪个会给你这样的东西。

<iframe width="560" height="315" 
    src="http://www.youtube.com/embed/gZKXrLjCwa8"
    frameborder="0" allowfullscreen>
</iframe>

另外,我建议您再次在how to setup上阅读Video.js文档。