zoukankan      html  css  js  c++  java
  • jplayer.js 与 video.js

    HTML5 - 两款基于JS的视频播放器

    都是基于h5 video 标签,如果不支持则会自动转成flash,这里个人比较推荐使用jplayer;

    1、video.js

    pc端有时候会与视频打交道,如果要兼容ie是个比较烦的事情,特别是对于没有pc端经验,比如我就更加烦。

    我一开始是用的video.js ,因为开始看video.js api  http://videojs.com/getting-started/,看到这段代码

    1  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
    2   poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    3     <source src="MY_VIDEO.mp4" type='video/mp4'>
    4     <source src="MY_VIDEO.webm" type='video/webm'>
    5     <p class="vjs-no-js">
    6       To view this video please enable JavaScript, and consider upgrading to a web browser that
    7       <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    8     </p>
    9   </video>

    非常喜欢,然后直接用,悲剧的是在ie 7、ie8存在一些问题,如各个版本的ie 样式不一致,如果是高版本ie7报错等!

    果断放弃;

    2、jplayer.js

    之所以推荐jplayer插件是因为它的兼容性是最好的,可以兼容到IE6,官网上对它兼容性有很详细的说明

    1、不仅兼容性好,而且样式一致。

    2、扩展性强。

    api:http://www.jplayer.cn/developer-guide.html#jPlayer-event-object 

    看完这个就会更加喜欢了,至少我是这样的,因为这个东西可以定制化,随便你怎么改

    把图标一换是不是有点像暴风语音。

    使用注意事项:

    jPlayer需要在服务器上上传两个文件:
    jquery.jplayer.min.js
    Jplayer.swf(如果不是放在js文件中,要注意路径是否正确)

    在两个文件一定要上传到服务器,开始使用的时候以为这个swf是在不支持视频播放的时候要自己准备的swf,过10多分钟才明白,jplay 不需要自己准备swf,他会自己转码,之所以会有这个想法完全是受之前vjdeo.js的影响。

    代码

     1  <script>
     2     //<![CDATA[
     3     $(document).ready(function () {
     4 
     5         $("#jquery_jplayer_1").jPlayer({
     6             ready: function () {
     7                 $(this).jPlayer("setMedia", {
     8                     title: "",
     9                     m4v: "http://1318.vod.myqcloud.com/1318_2cb48eca442111e6a46d294f954f93eb.f0.mp4",
    10                     webmv: "http://1318.vod.myqcloud.com/1318_2cb48eca442111e6a46d294f954f93eb.f0.webm",
    11                     poster: "@ViewHelper.Content("/content/img/video_bg.png")"
    12                 });
    13             },
    14             swfPath: "../../content/js/jsplayer/videoResource/",
    15             supplied: "webmv, ogv, m4v",
    16             size: {
    17                  "640px",
    18                 height: "360px",
    19                 cssClass: "jp-video-360p"
    20             },
    21             useStateClassSkin: true,
    22             autoBlur: false,
    23             smoothPlayBar: true,
    24             keyEnabled: true,
    25             remainingDuration: true,
    26             toggleDuration: true
    27         });
    28 
    29     });
    30     //]]>
    31 </script>
    View Code
     1  <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
     2           
     3             <div class="jp-type-single">
     4                 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
     5                 <div class="jp-gui">
     6                     <div class="jp-video-play">
     7                         <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
     8                     </div>
     9                     <div class="jp-interface">
    10                         <div class="jp-progress">
    11                             <div class="jp-seek-bar">
    12                                 <div class="jp-play-bar"></div>
    13                             </div>
    14                         </div>
    15                         <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
    16                         @*<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>*@
    17                         <div class="jp-controls-holder">
    18                             <div class="jp-controls">
    19                                 <button class="jp-play" role="button" tabindex="0">play</button>
    20                                 @*<button class="jp-stop" role="button" tabindex="0">stop</button>*@
    21                             </div>
    22                             <div class="jp-volume-controls">
    23                                 <button class="jp-mute" role="button" tabindex="0">mute</button>
    24                                 @*<button class="jp-volume-max" role="button" tabindex="0">max volume</button>*@
    25                                 <div class="jp-volume-bar">
    26                                     <div class="jp-volume-bar-value"></div>
    27                                 </div>
    28                             </div>
    29                             <div class="jp-toggles">
    30                                 @*<button class="jp-repeat" role="button" tabindex="0">repeat</button>*@
    31                                 <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
    32                             </div>
    33                         </div>
    34                         @*<div class="jp-details">
    35                             <div class="jp-title" aria-label="title">&nbsp;</div>
    36                         </div>*@
    37                     </div>
    38                 </div>
    39                 <div class="jp-no-solution">
    40                     <span>更新要求</span>
    41                     要播放媒体,您需要更新您的浏览器到最近的版本或更新您的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.
    42                 </div>
    43             </div>
    44         </div>
    View Code

    http://www.jplayer.cn/developer-guide.html#jPlayer-event-type  说的够详细了,demo也很多就不多说了,改改demo总有一款适合你。

    可以多多看下官网的api,你就找到了方法,我这个分析的并不全面,如果大家有什么疑问,希望可以多多交流。

  • 相关阅读:
    HTML DOM教程 14HTML DOM Document 对象
    HTML DOM教程 19HTML DOM Button 对象
    HTML DOM教程 22HTML DOM Form 对象
    HTML DOM教程 16HTML DOM Area 对象
    ubuntu 11.04 问题 小结
    VC6.0的 错误解决办法 小结
    boot.img的解包与打包
    shell里 截取字符串
    从零 使用vc
    Imagemagick 对图片 大小 和 格式的 调整
  • 原文地址:https://www.cnblogs.com/CandyManPing/p/6072289.html
Copyright © 2011-2022 走看看