jPlayer插件的使用

最新推荐文章于 2024-10-02 09:27:42 发布

dancing_burry

最新推荐文章于 2024-10-02 09:27:42 发布

阅读量2.2k

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/thumd_lee/article/details/53708704

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

最近，又双叒叕做了一个页面（好吧，其实还是之前的那个），里面用到了一个叫做 jPlayer插件的东西。用法贴出，具体可以看官网DEMO

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				title: "Big Buck Bunny",
				m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
				ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
				webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
				poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
			});
		},
		swfPath: "../../dist/jplayer",
		supplied: "webmv, ogv, m4v",
		size: {
			width: "640px",
			height: "360px",
			cssClass: "jp-video-360p"
		},
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});

});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
	<div class="jp-type-single">

		
		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div class="jp-gui">
			<div class="jp-video-play">
				<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
			</div>
			<div class="jp-interface">
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time" role="timer" aria-label="time"> </div>
				<div class="jp-duration" role="timer" aria-label="duration"> </div>
				<div class="jp-controls-holder">
					<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-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-toggles">
						<button class="jp-repeat" role="button" tabindex="0">repeat</button>
						<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
					</div>
				</div>
				<div class="jp-details">
					<div class="jp-title" aria-label="title"> </div>
				</div>
			</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>

1、里面自带css样式表，需要引用，可以按需修改

2、播放界面的按钮图标以背景图片的方式呈现，不是扁平化的性冷淡风，个人不太喜欢。有时间可以修改（需同时该css和js）

3、此插件的各种方法介绍也可以在官网查询了解

我在开发时，只是简单使用了两个方法

ready ‡

Function : (Default: undefined) : 定义绑定到$.jPlayer.event.ready 事件的事件处理器函数。要引用当前对象实例，使用$(this). 通常，建议对象实例至少要使用一个函数$(this).jPlayer("setMedia",media)来保证url 有效可用。

事件处理器ready创建的目的是消除JS代码和Flash代码间的竞态条件。因此保证当js代码执行的时候Flash函数定义已经存在。
这个处理器绑定到.jPlayer 命名空间。

swfPath

String : (Default: "js") : 定义jPlayer 的Jplayer.swf文件的路径。它允许开发者把swf文件放在任何位置，使用相对定位或是绝对路径合作或是相对服务器路径引用。

swfPath选项可以是指向.swf结尾的swf文件路径,也可以是url。例如， For example,jPlayer({swfPath:"/scripts/banana.swf"}) 是你把Jplayer.swf重命名为"banana.swf"之后的路径。不要把.swf 扩展名或者是假设的路径给重命名了。

你可以使用jPlayer({solution:"flash, html")在支持flash的html5浏览器上测试你的swfPath是否正确。

当你执行比如jPlayer("setMedia", media)这样的命令时，不正确的swfPath 会使$.jPlayer.event.error 报$.jPlayer.error.FLASH 错误。

单独的尾斜杠，比如"myPath/" 和"myPath"是一样的意思。
提供的URL必须使用标准的URL编码规则。

solution

String : (Default: "html, flash") : 定义html和flash解决方案的优先级。默认优先使用html，flash备用。交换顺序"flash, html" 优先使用Flash，备用html。

根据supplied 格式，jPlayer可能会两种解决方案同时使用。例如，使用jPlayer{supplied:"mp3,oga,m4v"} 作为媒体播放器，Firefox等浏览器需要Flash解决方案来播放视频媒体格式，而音频媒体可以使用html解决方案播放。

当然你可以限定值使用一种解决方案，虽然我们不建议你这么做。

jPlayer解决方案的选择取决于你的浏览器和supplied 选项中定义的格式。

supplied

String : (Default: "mp3") : 定义提供给jPlayer的格式。顺序表示优先级，左边的格式优先级最高，右边的优先级较低。

更多格式信息见Media Encoding。更多关于为什么有些格式是强制的的信息见Essential Formats。

必需的音频格式: mp3 or m4a.
必需的视频格式: m4v.

其他对应格式: webma, webmv, oga, ogv, wav, fla, flv, rtmpa, rtmpv.

所有在supplied选项中的格式必需在jPlayer("setMedia",media) 命令中给出。

这个规则也有例外，如一个同时播放视频和音频的多媒体播放器。视频和音频的格式都在supplied 选项中定义。那么在使用jPlayer("setMedia",media)命令的时候，可以使用视频格式也可以使用音频格式。（你必须给出supplied 选项中的所有音频格式和视频格式。）

solution 优先级高于supplied 格式的优先级。jPlayer找到给定解决方案中的第一个可正常工作的格式之后开始工作。所以在，chrome中{solution:"html,flash"} and {supplied:"mp3,oga"} 本机html会播放mp3文件，尽管mp3 和oga它都能播放。

jPlayer格式的选择取决于你的浏览器和solution选项。
必需的格式是那些Flash支持，那些不支持Flash的浏览器比如iPad/iPhone支持对的格式。
其他相应的格式用于增强多核浏览器对html5 多媒体支持。

size †

object : 设置restored screen 模式下的尺寸。默认尺寸取决于提供的是音频还是视频格式。当两者都提供时默认使用视频的默认尺寸。

对象属性:

width

String : (Default: [Video:"480px"] [Audio:"0px"]) : css规则的宽度。

height

String : (Default: [Video:"270px"] [Audio:"0px"]) : css规则的高度。

cssClass

String : (Default: [Video:"jp-video-270p"] [Audio:""]) : 在这种模式下添加到cssSelectorAncestor上的类名。

$(id).jPlayer( "setMedia", Object: media ) : jQuery

描述

这个方法用来定义播放的多媒体。参数media 是一个对象，它包含不同的编码格式属性和海报属性。

jPlayer("setMedia", media) 方法必须在jPlayer执行其他方法比如jPlayer("play")之前定义media。

即使你提供的是相对url，所有的多媒体url被转换成绝对url。转换之后的url存储在event.jPlayer.status.media对象中。转换成绝对url 之后修复了Flash mp4 播放器和 m4a/m4v/flv 格式是相对swf文件而不是相对页面的一个问题。

所有在jPlayer({supplied: "f1, f2, fN"})构造函数选项中定义的格式必须提供那个格式编码的多媒体文件的有效url。一个jPlayer中既有视频又有音频媒体的情况例外。必须要定义所有的supplied 音频格式或者所有的supplied 视频格式。

可以使用构造函数选项jPlayer({solution: "s1, s2") 来定义jPlayer使用html 和flash解决方案的优先级。

jPlayer 要区分两种不同的媒体类型。在一个setMedia命令中同时使用视频和音频使得决定到底播放哪个变得困难了。最后的决定取决于solution 和supplied 以及使用的浏览器。比如第一个能在solution中正常播放的supplied那个视频或者音频就是最终的要播放的。

jPlayer开始下载多媒体的时间点随着media.load()方法和media.src 属性的的w3c html5多媒体说明文档的变化使其变得复杂。为了使老的html5 浏览器能够正常使用jPlayer，仍然保留了 media.load()，其实它应该被移除，应为不再需要它了。

jPlayer构造函数选项jPlayer({preload})用于控制jPlayer何时开始下载新的多媒体资源。一些浏览器在preload选项被设置为"metadata"的时候会开始下载整个多媒体资源。另外一些会要求使用"auto"。保证不自动下载的唯一方式是把preload选项设置为"none"。记住，根据你使用的浏览器，多媒体资源可能不会被下载。手机浏览器比如IOS 4.2上的手机 safari在任何多媒体下载或者播放前都需要一个手势。用户必须在第一次加载或者播放操作的时候点击一个按钮进行初始化。

任何正在播放的多媒体在执行命令的时候都会中止。下载会不会被取消取决于你的浏览器是不是遵循最近的w3c html多媒体规范。事实上，setMedia除了在ready事件中第一次使用外，setMedia命令之后紧接着是一个停止老的下载的播放命令。多媒体播放器例外，不同类型（音频或者视频）的老的多媒体资源会继续下载例外。用来取消下载时清楚src，iPhone内建的视频播放器会hang住。

url必须按照标准url编码规则提供。

参数

media

Object : 定义多媒体格式url 和海报

mp3

String : 定义mp3格式的音频url

m4a

String : 定义mp4格式的音频url(MP4: AAC)

m4v

String : 定义mp4格式的视频url(MP4: H.264/AAC)

webma

String : 定义webm格式的音频url(WebM: Vorbis)

webmv

String : 定义webm格式的视频url (WebM: VP8/Vorbis)

oga

String : 定义ogg格式的音频url (OGG: Vorbis)

ogv

String : 定义ogg格式的视频url (OGG: Theora/Vorbis)

fla

String : 定义flv格式的音频url (FLV: Flash)

flv

String : 定义flv格式的视频url (FLV: Flash)

wav

String : 定义wav格式的音频url

poster

String : 定义海报url。
海报的纵横比应该和jPlayer的尺寸一样，否则在海报会变形。

title

String : [可选] 定义多媒体的 title。如果没有定义时遵循向下兼容什么也不做。比如，如果你在html增加了title，那么在media对象中不定义title则html 的title 会保持不变。
如果你的title不变，那么是你忘了在media对象中增加title。

duration

String : [可选] 明确地定义显示的 duration
Number : [可选] 定义媒体资源的 duration。

track

Array : 每一个array元素是一个定义 <track>元素的对象。
没有暴露合适的GUI控制器这个属性只被部分实现。
浏览器或者flash解决方案都没有这个属性的补充，所以不支持webVTT。
虽然它使用受限，当使用 jPlayer({nativeVideoControls})选项并且你的目标浏览器对webVTT的支持有详细的说明时，它或许很适合。
更多关于它们的信息参见 W3C Media Element Living Standard 和 WebVTT Living Standard。

kind

字符串 : 定义track的类型。

src

字符串 : 定义track的URL。

srclang

字符串 : 定义track的语言。

label

字符串 : 定义track的标签。

def

布尔值 : 如果这是默认的track则为True。

注意只有列出来的属性被jPlayer使用，因此你可以在同一个对象中存储所有的其他信息，如果这样你的项目会工作的更好的话。例如，一个音频track的标题和专辑名字。然而我们打算将来扩展多媒体对象的属性，将来某天会有的属性可能包括：stream，chapters， subtitles。

示例代码：

  
  $("#jpId").jPlayer( {
  ready: function() {
    $(this).jPlayer( "setMedia", {
      m4a: "m4a/elvis.m4a",
      oga: "oga/elvis.oga",
      webma: "webm/elvis.webm"
    });
  },
  supplied: "webma, m4a, oga"
);