HTML5视频播放器VideoJS使用附【源码及示例】- 兼容IE

Posted

HTML5很强大的说，但IE的不给力。让人抓狂。这里介绍一个HTML5的视频播放器，VideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。

这里附上源码，省流量视频文件就不放本地了，后面会附上在线示例和源码包。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>如何使用VideoJS</title>
  <!-- 加载 VideoJS js -->
  <script src="video.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    // 这段代码必须放在video.js后面

    // 页面加载完成  才加载VideoJS的标签
    VideoJS.setupAllWhenReady();
  </script>
  <!-- 皮肤 -->
  <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">
</head>
<body>

  <!-- Begin VideoJS -->
  <div class="video-js-box" style="margin:20px auto">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- 如果浏览器不兼容HTML5则使用flash播放 -->
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- 视频图片. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- 这里是几个源文件的下载地址 -->
    <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>
  <!-- End VideoJS -->

</body>
</html>

HTML5好像只支持MP4，webm，ogg格式，不知道对不对还望高手指教。

在线示例

大家也可以去他的官方网站http://videojs.com/

本文为原创：转载请注明出处 madeby83.com

Comments are closed.