jplayer播放器完整标准的写法应该是这样的-阿里云开发者社区

jplayer播放器完整标准的写法应该是这样的

2014-05-10 1222

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Clean jPlayer skin: Example $(document).ready(function() { //视频播放的地址 var media = { m4v: '/projects/cl...

<pre code_snippet_id="337288" snippet_file_name="blog_20140510_1_5361656" name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>  
	<meta charset="utf-8">
	<title>Clean jPlayer skin: Example</title>   
	<link rel="stylesheet" href="/projects/clean-jplayer-skin/player.css">
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="/projects/clean-jplayer-skin/jquery.jplayer.js"></script>
	<script type="text/javascript" src="/projects/clean-jplayer-skin/jplayer.cleanskin.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//视频播放的地址
			var media = { m4v: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4',
			              poster: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4' 
						}
			//jplayer的参数列表
			var options = {
			//初始化播放器
				ready: function () {
					$(this).jPlayer("setMedia", media);
				},
			//自定义样式开关,不开启也不影响
			//customCssIds:true;       
			// Extra Settings
			//注意的swf的路径，不能写错的，如果是根目录写一个点
				swfPath: "/img/jplayer.swf",
				supplied: 'm4v',
				solution: 'html, flash',
			   //音量 总共是1,0.5代表50%;
				volume: 0.5,
				size: size,
				smoothPlayBar: false,
				keyEnabled: true,

				// CSS Selectors
				//播放器器的包裹div的class样式
				cssSelectorAncestor: '.playerGUI',
				//这是jplayer默认使用的样式，如果根据自己的实际情况修改，
				//我记得以前要使用自定义的样式要开启 customCssIds: true,
				cssSelector: {
					videoPlay: ".video-play",
					play: ".play",
					pause: ".pause",
					seekBar: ".seekBar",
					playBar: ".playBar",
					volumeBar: ".currentVolume",
					volumeBarValue: ".currentVolume .curvol",
					currentTime: ".time.current",
					duration: ".time.duration",
					fullScreen: ".fullScreen",
					restoreScreen: ".fullScreenOFF",
					gui: ".controls",
					noSolution: ".noSolution"
				},
				//播放器出错 回调函数
				error: function(event) {
					if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
						// Setup the media stream again and play it.
						$(this).jPlayer("setMedia", media).jPlayer('play');
					}
				
				//播放器点击播放按钮
				play: function() {
					$('#player1 .video-play').fadeOut();
					$(this).on('click', function() { $('#player1').jPlayer('pause');});
					$(this).jPlayer("pauseOthers");
				},
				//暂回调函数
				pause: function() {
					$('#player1 .video-play').fadeIn();
					$('#player1 .playerScreen').unbind('click');
				},
				//声音改变回调函数
				volumechange: function(event) {        
					if(event.jPlayer.options.muted) {
						$('#player1 .currentVolume').val(0);
					} else {
						$('#player1 .currentVolume').val(event.jPlayer.options.volume);
					}   
				},
				//这个名字不知道有什么用，应该叫进度条好些吧 
				timeupdate: function(event) {
					$('#player1 .seekBar').val(event.jPlayer.status.currentPercentRelative);
				},
				// 播放完毕后的回调函数
				ended: function() {
					$(this).jPlayer("setMedia", media);
				}


			};

			// 创建声音控制条
			$('#player1 .currentVolume').slider({
				range: [0, 1],
				step: 0.01,
				start : 0.5,
				handles: 1,
				slide: function() {
					var value = $(this).val();
					$(mainPlayer).jPlayer("option", "muted", false);
					$(mainPlayer).jPlayer("option", "volume", value);
					$('#player1 .volumeText').html('Volume: ' + (value * 100).toFixed(0) + '');
				}
			});

			$('#player1 .seekBar').slider({
				range: [0,100],
				step: 0.01,
				start: 0,
				handles: 1,
				slide: function() {
					var value = $(this).val();
					$('#player1').jPlayer("playHead", value);
				}
			});

			// Initialize Player
			$('#player1').jPlayer(options);

		});
	</script>
</head>
<body>
	<div id="player1" class="playerGUI">
		<div id="videoPlayer"></div>
		<div class="playerScreen">
			<a tabindex="1" href="#" class="video-play"></a>
		</div>
		<div class="controls">
			<div class="leftblock">
				<a tabindex="1" href="#" class="play smooth"></a>
				<a tabindex="1" href="#" class="pause smooth"></a>
			</div>
			<div class="progress">
				<span>Tomorrowland 2013 - Aftermovie</span>
				<div class="progressbar">
					<div class="seekBar">
						<div class="playBar"></div>
					</div>
				</div>
				<div class="time current">00:00</div>
				<div class="time duration">00:00</div>
			</div>
			<div class="rightblock">
				<div class="volumeBar">
					<div class="currentVolume"><div class="curvol"></div></div>
				</div>
				<a class="volumeText">Volume: 50</a>
				<a href="#" tabindex="1" class="fullScreen smooth"></a>
				<a href="#" tabindex="1" class="fullScreenOFF smooth"></a>
			</div>
		</div>
	</div>
</body>
</html>

jplayer播放器完整标准的写法应该是这样的

热门文章

最新文章

相关电子书