html5实现兼容各大浏览器的播放器的解析

歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！

!doctyPE html>
    html>
    head>
    meta charset=utf-8>
    tITle>
    歌词同步播放器-powered by widuu xiaowei/title>
    meta http-equiv="Cache-Control" content="no-cache">
    meta name="viewport" content="width=device-width;
     initial-scale=1.0;
     minimum-scale=1.0;
     maximum-scale=1.4">
    meta name="mobileOptimized" content="240">
    link href="/mP3/css/blue.css" rel="stylesheet" type="text/css" />
    script type="text/javascript" src="/mp3/js/jquery.js">
    /script>
    script type="text/javascript" src="/mp3/js/jquery.jplayer.js">
    /script>
    script type="text/javascript" src="/mp3/js/lrc.js">
    /script>
    style type="text/css">
* {
     margin:0;
     padding:0;
 }
ul, ol, dl {
     list-style:none;
 }
.content li.hover{
     color:red;
 }
.content{
     width:402px;
     height:200px;
     background:#ccc;
     overflow:hidden;
     padding:10px;
}
    /style>
    script>
//![CDATA[$(document).ready(function(){
 $("#jquery_jplayer_1").jPlayer({
  ready: function (event) {
   $(this).jPlayer("setMedia", {
    mp3:"yangcong.mp3" //mp3的播放地址   }
    ).jPlayer("play");
  }
,  timeupdate: function(event) {
    if(event.jPlayer.status.currentTime==0){
         time = "";
    }
else {
         time = event.jPlayer.status.currentTime;
    }
   }
,   play: function(event) {
    //点击开始方法调用lrc。start歌词方法 返回时间time    if(event.jPlayer.status.currentTime==0){
         $("#jquery_jplayer_1").jPlayer("pause",1);
    }
    if($('#lrc_content').val()!==""){
    $.lrc.start($('#lrc_content').val(), function() {
         return time;
    }
    );
    }
else{
         $(".content").html("没有字幕");
    }
   }
,   repeat: function(event) {
     if(event.jPlayer.options.loop) {
    $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
          $(this).jPlayer("play");
    }
    );
     }
 else {
        $(this).unbind(".jPlayerRepeat");
     }
   }
,  swfPath: "/js",    //存放jplayer.swf的决定路径  solution:"html, flash", //支持的页面  supplied: "mp3",  //支持的音频的格式  wmode: "window"     }
    );
     $("#lrc_content").hide();
}
    );
    //]]>
    /script>
    /head>
    body>
    textarea id="lrc_content" name="textfield" cols="70" rows="10">
    [ar:测试用 ] [00:03.00]洋葱[00:06.00]演唱：平安[00:09.00][00:11.38]如果你眼神能够为我片刻的降临[00:21.23]如果你能听到心碎的声音[00:28.88]盘底的洋葱像我永远是配角戏[00:35.74]偷偷的看着你偷偷的隐藏着自己[00:43.48][00:44.90]如果你愿意一层一层[00:48.46]一层的剥开我的心[00:52.66]你会发现你会讶异[00:56.40]你是我最压抑最深处的秘密[01:00.26]如果你愿意一层一层[01:03.69]一层的剥开我的心[01:07.76]你会鼻酸你会流泪[01:11.60]只要你能听到我看到我的全心全意[01:18.30][01:19.11]如果你愿意一层一层[01:22.57]一层的剥开我的心[01:26.66]你会发现你会讶异[01:30.41]你是我最压抑最深处的秘密[01:34.48]如果你愿意一层一层[01:37.58]一层的剥开我的心[01:41.51]你会鼻酸你会流泪[01:45.15]只要你能听到我看到我的全心全意[01:53.55][01:55.65]你会鼻酸你会流泪[01:59.84]只要你能听到我看到我的全心全意[02:12.57]/textarea>
    /p>
    p>
    p>
      p id="jquery_jplayer_1" class="jp-jplayer">
    /p>
      p id="jp_container_1" class="jp-audio">
       p class="jp-type-single">
        p class="jp-gui jp-interface">
         ul class="jp-controls">
          li>
    a href="javascript:;
    " class="jp-play" tabindex="1">
    play/a>
    /li>
          li>
    a href="javascript:;
    " class="jp-pause" tabindex="1">
    pause/a>
    /li>
          li>
    a href="javascript:;
    " class="jp-stop" tabindex="1">
    stop/a>
    /li>
          li>
    a href="javascript:;
    " class="jp-mute" tabindex="1" title="mute">
    mute/a>
    /li>
          li>
    a href="javascript:;
    " class="jp-unmute" tabindex="1" title="unmute">
    unmute/a>
    /li>
          li>
    a href="javascript:;
    " class="jp-volume-max" tabindex="1" title="max volume">
    max volume/a>
    /li>
         /ul>
         p class="jp-PRogress">
          p class="jp-seek-bar">
           p class="jp-play-bar">
    /p>
          /p>
         /p>
         p class="jp-volume-bar">
          p class="jp-volume-bar-value">
    /p>
         /p>
         p class="jp-time-holder">
          p class="jp-current-time">
    /p>
          p class="jp-duration">
    /p>
          ul class="jp-toggles">
           li>
    a href="javascript:;
    " class="jp-repeat" tabindex="1" title="repeat">
    repeat/a>
    /li>
           li>
    a href="javascript:;
    " class="jp-repeat-off" tabindex="1" title="repeat off">
    repeat off/a>
    /li>
          /ul>
         /p>
        /p>
        p class="jp-title">
         ul>
          li>
    mp3player powered by xiaowei/li>
         /ul>
        /p>
        p class="jp-no-solution">
         span>
    Update Required/span>
         To play the media you will need to either update your browser to a recent version or update your a href="a href="http://get.adobe.COM/flashplayer/">
    http://get.adobe.com/flashplayer//a>
    " target="_blank">
    Flash plugin/a>
    .    /p>
       /p>
      /p>
        p class="content">
    ul id="lrc_list">
      点击开始播放……  /ul>
    /p>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

使用HTML5实现网页音乐播放器

Html5中video标签无法播放mp4问题的解决办法

以上就是html5实现兼容各大浏览器的播放器的解析的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！