`
747017186
  • 浏览: 331326 次
社区版块
存档分类
最新评论

jPlayer组件与audio标签以及embed 标签

 
阅读更多

最近在用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">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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">&nbsp;</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>

分享到：
| jquery特别好用的流程节点插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jPlayer as an audio player

    **jPlayer音频播放器详解** **一、jPlayer简介** jPlayer是一款开源的JavaScript库，专为网页设计者和开发者提供了强大的音频和视频播放功能。它基于HTML5技术，同时兼容旧版本的浏览器，通过Flash插件进行后援。...

    jPlayer-HTML5 Audio & Video for jQuery

    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基于HTML5/Flash的音频、视频播放器

    **jPlayer：HTML5/Flash音频与视频播放器详解** jPlayer是一款强大的开源JavaScript库，专为构建跨平台、跨浏览器的音频和视频播放器而设计。它利用了现代浏览器的HTML5技术，并且在不支持HTML5的环境中无缝回退到...

    jPlayer-2.9.2.zip_-baijiahao_dist/jplayer_jplayer_jplayer swf_j

    标签中的"-baijiahao"可能是发布者或者某个网站的标识，"dist/jplayer"进一步确认了压缩包中的文件结构，"jplayer_jplayer"可能是重复的关键词，而"jplayer__swf"暗示了压缩包内包含用于Flash支持的SWF文件。...

    jplayer demo jplayer例子

    《JPlayer 播放器：打造无缝网页音频与视频体验》 JPlayer 是一个强大的JavaScript库，专门用于在网页上实现高质量的音频和视频播放功能。作为一个开源项目，JPlayer 支持多种浏览器，包括IE、Firefox 和 Chrome，...

    jPlayer详细使用说明及完整demo

    `jPlayer详细使用说明及完整demo_files` 文件夹包含与示例页面相关的 CSS 和 JavaScript 文件，如样式表、图片资源和 jPlayer 库文件。 通过这个示例，开发者可以深入理解 jPlayer 的用法，学习如何创建自定义...

    jplayer_2.9.2_demo

    3. **自定义audio标签样式** - jPlayer允许开发者通过CSS完全控制播放器的外观。这包括按钮、进度条、时间显示等元素的样式。你可以根据品牌调色板或个人喜好来定制播放器的颜色、形状和大小，实现与网页设计的无缝...

    jPlayer Demo案例

    - **跨浏览器支持**：jPlayer 支持多种浏览器，包括最新的Chrome、Firefox、Safari、Edge以及Internet Explorer。这使得开发者无需担心因浏览器兼容性问题而影响用户体验。 - **纯JavaScript实现**：jPlayer 完全...

    jPlayer-2.9.2.tar.gz_jplayer

    3. **HTML5 优先**：jPlayer 主要依赖 HTML5 的 `&lt;audio&gt;` 和 `&lt;video&gt;` 标签，但在不支持 HTML5 的浏览器中，它可以回退到 Flash 播放器，确保广泛的兼容性。 4. **丰富的 API**：jPlayer 提供了丰富的 JavaScript...

    jPlayer-2.9.1播放器demo

    本篇将深入探讨jPlayer的核心特性、使用方法以及如何根据需求进行配置。 ### 1. jPlayer的功能特性 - **跨平台兼容性**：jPlayer支持HTML5和Flash两种技术，确保在多种浏览器和设备上都能正常工作，包括桌面端和...

    jplayer插件的运用

    jPlayer支持多种媒体格式，包括MP3、AAC、WAV以及M4V、Ogg Vorbis、WebM等视频格式，同时通过Flash fallback技术，确保在不支持HTML5的浏览器中也能正常工作。 **二、jPlayer的核心特性** 1. **跨平台兼容性**：...

    jPlayer2.1.0实例包

    通过实际操作，逐步掌握如何配置 jPlayer、创建播放器实例、绑定事件以及调用方法。在实践中不断调整和优化，最终可以构建出满足特定需求的多媒体播放器。 总结，jPlayer 是一款强大的 HTML5 多媒体播放器插件，它...

    jPlayer播放Demp（MP3）

    此外，还需要提供一个`&lt;audio&gt;`或`&lt;video&gt;`标签来指定媒体资源，这里我们关注的是MP3，所以使用`&lt;audio&gt;`标签，并设置`src`属性指向MP3文件。 3. **初始化jPlayer**：使用JavaScript来初始化jPlayer，调用`.jPlayer...

    jplayer+html5实现的播放器

    本文将深入探讨如何利用HTML5、jQuery以及JavaScript技术来构建一个自定义的播放器，即"jplayer+html5实现的播放器"。 首先，HTML5提供了`&lt;audio&gt;`和`&lt;video&gt;`标签，用于在网页中嵌入音频和视频内容。这些标签使得...

    Jplayer一个简单的播放器代码Clean jPlayer skin

    1. **跨平台兼容性**：JPlayer 支持各种现代浏览器，包括Chrome、Firefox、Safari、Opera以及Internet Explorer，确保用户在不同设备和浏览器上都能享受一致的播放体验。 2. **多格式支持**：JPlayer 可以播放MP3、...

    jplayer视频播放

    此外，JPlayer还支持多种视频格式，如MP4、WebM和Ogg，以及视频流服务，如HLS和MPEG-DASH。 在实际应用中，JPlayer与原生HTML5视频播放器相比有以下优势： 1. **兼容性**：JPlayer利用Flash作为备用方案，确保在老...

    Jplayer demo资源

    这个“Jplayer demo资源”包含了演示所需的全部组件和示例代码，旨在帮助开发者快速理解和应用Jplayer到自己的项目中。接下来，我们将深入探讨Jplayer的核心特点、使用方法以及如何结合提供的demo资源进行实践。 1....

    jQuery音乐播放插件jPlayer

    7. **媒体文件格式支持**：除了常见的MP3和WAV格式，jPlayer还支持AAC、Ogg、FLAC等其他音频格式，以及MP4、WebM和Ogg Vorbis等视频格式。 8. **播放列表功能**：jPlayer支持创建和管理播放列表，用户可以轻松地...

    jPlayer-master

    **jPlayer 播放器概述** `jPlayer` 是一个开源的 JavaScript 播放器，它使得在网页上实现音频和视频播放变得简单易行。jPlayer 支持多种浏览器，包括主流的 Chrome、Firefox、Safari、Edge 和 Internet Explorer，...

Magicbox
Global site tag (gtag.js) - Google Analytics