添加jplayer播放列表插件
This commit is contained in:
Li Jianxuan
parent
d780492922
commit
cf66b417aa
|
|
@ -6,6 +6,7 @@ $this->headTitle()->setSeparator(' - ');
|
|||
$this->headLink()->appendStylesheet('/css/water.css');
|
||||
$this->theme->AppendPlus($this,'jquery');
|
||||
$this->theme->AppendPlus($this,'jplayer');
|
||||
$this->headScript()->appendFile("/js/lib/jplayer/add-on/jplayer.playlist.min.js");
|
||||
$this->headLink()->appendStylesheet('/js/lib/jplayer/skin/blue.monday/jplayer.blue.monday.css');
|
||||
$this->breadcrumb('<a href="/">首页</a>');
|
||||
$this->breadcrumb('<a href="/qzr/">青藏铁路</a>');
|
||||
|
|
@ -18,38 +19,52 @@ if(!empty($this->infos['keyword'])) $keyword = $this->infos['keyword']; else $ke
|
|||
<?= $this->partial('qzr/navi.phtml'); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div id='right'>
|
||||
<p>视频摘要（Abstract of the video）</p>
|
||||
|
||||
<div id='right'>
|
||||
<p>视频摘要（Abstract of the video）</p>
|
||||
|
||||
<p>Extreme Railway: Qinghai-Tibet Railway Engineer Pasi Lautala takes a look at the hi-tech solutions employed by the Chinese government in building the Qinghai-Tibet railway, which runs all the way from Xining to Lhasa. The 1000 kilometre track was planned over 50 years ago but had to wait until modern technology and engineering know-how could help to overcome the harsh environment of the Tibetan plateau. Permafrost, thin air and sand still threaten the amazing achievement which includes 675 bridges and the world’s highest tunnel. 140,000 labourers built the railway with the help of 2,000 medics who were needed to deal with altitude sickness. Lautala follows the train’s route and looks at the structural solutions devised by China’s top engineers.</p>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#jquery_jplayer_1").jPlayer({
|
||||
ready: function () {
|
||||
$(this).jPlayer("setMedia", {
|
||||
|
||||
new jPlayerPlaylist(
|
||||
{
|
||||
jPlayer: "#jquery_jplayer_1",
|
||||
cssSelectorAncestor: "#jp_container_1"
|
||||
},
|
||||
[
|
||||
{
|
||||
title:"青藏铁路",
|
||||
artist:"Blender Foundation",
|
||||
free:true,
|
||||
flv: "<?= 'http://'.$_SERVER['SERVER_NAME'] ?>/images/National Geographic Megastructures Extreme Railway.flv",
|
||||
//poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
|
||||
});
|
||||
},
|
||||
swfPath: "/js/lib/jplayer/",
|
||||
supplied: "flv",
|
||||
size: {
|
||||
width: "640px",
|
||||
height: "360px",
|
||||
cssClass: "jp-video-360p"
|
||||
},
|
||||
{
|
||||
title:"青藏铁路",
|
||||
artist:"Blender Foundation",
|
||||
flv: "<?= 'http://'.$_SERVER['SERVER_NAME'] ?>/images/National Geographic Megastructures Extreme Railway.flv",
|
||||
}
|
||||
],
|
||||
{
|
||||
swfPath: "<?= 'http://'.$_SERVER['SERVER_NAME'] ?>/js/lib/jplayer/",
|
||||
supplied: "flv",
|
||||
size: {
|
||||
width: "640px",
|
||||
height: "360px",
|
||||
cssClass: "jp-video-360p"
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
<div id="jp_container_1" class="jp-video jp-video-360p">
|
||||
<div class="jp-type-single">
|
||||
<div id="jp_container_1" class="jp-video jp-video-270p">
|
||||
<div class="jp-type-playlist">
|
||||
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
|
||||
<div class="jp-gui">
|
||||
<div class="jp-video-play">
|
||||
<a href="javascript:;" class="jp-video-play-icon" tabindex="2">play</a>
|
||||
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
|
||||
</div>
|
||||
<div class="jp-interface">
|
||||
<div class="jp-progress">
|
||||
|
|
@ -59,40 +74,50 @@ $(document).ready(function(){
|
|||
</div>
|
||||
<div class="jp-current-time"></div>
|
||||
<div class="jp-duration"></div>
|
||||
<div class="jp-title">
|
||||
<ul>
|
||||
<li>National Geographic Megastructures Extreme Railway</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jp-controls-holder">
|
||||
<ul class="jp-controls">
|
||||
<li><a href="javascript:;" class="jp-play" tabindex="2">play</a></li>
|
||||
<li><a href="javascript:;" class="jp-pause" tabindex="2">pause</a></li>
|
||||
<li><a href="javascript:;" class="jp-stop" tabindex="2">stop</a></li>
|
||||
<li><a href="javascript:;" class="jp-mute" tabindex="2" title="mute">mute</a></li>
|
||||
<li><a href="javascript:;" class="jp-unmute" tabindex="2" title="unmute">unmute</a></li>
|
||||
<li><a href="javascript:;" class="jp-volume-max" tabindex="2" title="max volume">max volume</a></li>
|
||||
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
|
||||
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
|
||||
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
|
||||
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
|
||||
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
|
||||
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
|
||||
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
|
||||
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
|
||||
</ul>
|
||||
<div class="jp-volume-bar">
|
||||
<div class="jp-volume-bar-value"></div>
|
||||
</div>
|
||||
|
||||
<ul class="jp-toggles">
|
||||
<li><a href="javascript:;" class="jp-full-screen" tabindex="2" title="full screen">full screen</a></li>
|
||||
<li><a href="javascript:;" class="jp-restore-screen" tabindex="2" title="restore screen">restore screen</a></li>
|
||||
<li><a href="javascript:;" class="jp-repeat" tabindex="2" title="repeat">repeat</a></li>
|
||||
<li><a href="javascript:;" class="jp-repeat-off" tabindex="2" title="repeat off">repeat off</a></li>
|
||||
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
|
||||
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
|
||||
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
|
||||
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
|
||||
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
|
||||
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jp-title">
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jp-playlist">
|
||||
<ul>
|
||||
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
|
||||
<li></li>
|
||||
</ul>
|
||||
</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>
|
||||
</div>
|
||||
<p><a href="/images/National Geographic Megastructures Extreme Railway.avi">AVI版本下载</a></p>
|
||||
|
||||
<p>
|
||||
<?php echo $this->infos['body'];?>
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue