最近在用bootstrap在做页面,由于可以在PC端与移动设备端均可以展示,其中有个自动提醒的功能,需要播放音频,在网上下载了jPlayer-2.9.2感觉不错,这个插件在几乎支持所有的浏览器,但是对IE8及其以下都不支持了,很无奈。看例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Website Design By: www.happyworm.com --> <title>Demo : jPlayer as an audio player</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="${rootPath}/webpad/js/jPlayer-2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${rootPath}/webpad/js/jPlayer-2.9.2/lib/jquery.min.js"></script> <script type="text/javascript" src="${rootPath}/webpad/js/jPlayer-2.9.2/dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { title: "Bubble", // mp3: "${rootPath}/webpad/song.mp3", // ogg: "${rootPath}/webpad/song.ogg", // wav: "${rootPath}/webpad/song.wav", m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" }).jPlayer("play");//自动开始播放 }, swfPath: "${rootPath}/webpad/js/jPlayer-2.9.2/dist/jplayer", supplied: "m4a,oga", wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); }); </script> </head> <body> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> </div> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </div> <div 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="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div> </body> </html>
这个例子可以实现自动播放(想手动播放把jPlayer("play");方法去掉即可),但是仅仅在PC端的,如果在你移动端则必须要用手去点击以下,否则无法播放。这是由于移动设备的安全机制导致的,这一点无法克服。但是这个组件是最接近移动设备的组件了。总之现在还没有一个可以在移动设备自动播放音乐的组件。
或许有的人会说html5的audio 标签 ,但是这个标签对IE只能支持IE9以上,并且在移动设备端根本无法播放音乐。
实例
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
Internet Explorer
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。
<audio> 标签的属性
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
或许有人问难道就没有一个好的支持IE8或者IE系列的播放音乐的标签吗?是有的,我测试过IE5也支持。在使用中的时候可以对各个浏览器进行判断即可。
<embed type="audio/mp3" src="${rootPath}/webpad/song.mp3" autostart="true" loop="false"></embed>
相关推荐
jPlayer as an audio player
A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and ...
Jplayer一个简单的播放器代码Clean jPlayer skin
很好的网页播放,兼容,IE,FF,Chrome,此demo为没有界面。
jq音频播放器插件,自定义audio标签样式,打造自己的网页音乐播放器
A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and ...
jPlayer-2.5.4完整版 包括demo以及用法
jPlayer 播放器demo,直接修改资源地址即可使用。jPlayer 播放器demo,直接修改资源地址即可使用。
jplayer是一个强大的支持多种音频格式的播放器
jplayer 是国外利用jquery开发的一套基于html5 video的插件,利用jplayer可以在网页中播放html5 video视频并且实现详细的控制功能。
jPlayer 2.9.2 更新日志:2014-12-14增加- 新功能:实现pull请求[详细介绍SASS皮肤]。- 错误修正:修正了[示例演示-04不工作。改变- jPlayer库重构:该皮肤源文件现在是在'SRC/ skin`并在“DIST/皮肤文件夹中生成...
跨浏览器播放器jPlayer jPlayer jPlayer
jPlayer影响播放插件,纯js
支持的平台与浏览器 Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 OSX: Safari, Firefox, Chrome, Opera iOS: Mobile Safari: iPad, iPhone, iPod Touch Android: Android 2.3 Browser Blackberry:...
一个JavaScript的图片展示插件Lightbox-Jplayer.rar
jPlayer详细使用说明及完整demo
jQuery jplayer支持格式的视频播放器代码 jQuery jplayer支持格式的视频播放器代码
jPlayer播放Demp(MP3)