HTML5 播放器无法播放

html5 player not playing

本文关键字：播放 播放器 HTML5      更新时间：2023-09-26

我正在尝试在我正在开发的网站中使用VideoJS（http://videojs.com/），但是我正在尝试在页面上加载一个简单的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>

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

不要使用 Youtube 视频来测试 videojs，因为很难找到指向视频源的直接链接。看看这个问题。

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

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

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

但是，如果您仍然想使用YouTube视频，请查看Video.js论坛，有人提供了解决方法的代码。

嵌入

YouTube视频的一种更简单的方法是单击视频页面下方的"共享"然后"嵌入"选项卡，然后将代码复制并粘贴到您的网站上。这会给你这样的东西。

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

另外，我建议再次阅读有关如何设置的视频.js文档。

相关文章：