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

最新推荐文章于 2017-08-21 10:33:30 发布

转载最新推荐文章于 2017-08-21 10:33:30 发布 · 1.3k 阅读

web组件专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个Clean jPlayer皮肤的实现案例，包括了HTML结构、CSS样式和JavaScript交互代码。该示例展示了如何设置播放器的基本配置，如音量控制、播放进度等，并提供了错误处理及播放状态变化的回调函数。

[html]view plaincopy 
  

<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></pre><br>
<br>
<pre></pre>