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

来源：互联网发布：k近邻算法计算编辑：程序博客网时间：2024/05/01 01:49
<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>
0 0