视频切换播放的例子(视频切换范例)代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5播放器调用范例</title>
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style type="text/css">
.plist a,.plist a:link,.plist a:visited { cursor:hand;cursor:pointer;display:block; line-height:60px;height:60px; width:180px; border:1px #ccc solid; text-align:center;border-radius:5px; float:left;margin-top:20px; margin-right:10px; color:#666666;}
.plist a:hover { background:#efefef;}
.current a,.current a:link,.current a:visited {background:#0099ff;cursor:hand;cursor:pointer; color:#fff;display:block; line-height:60px;height:60px; width:180px; border:1px #0099ff solid; text-align:center;border-radius:5px; float:left;margin-top:20px; margin-right:10px;}
</style>
</head>
<body>
<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 900,
height: 600,
volume: 0.75,
vid: '138dcc9667850eba0705401288131bf1_1',
});
function nextVideo(vid,num){
player.changeVid(vid,0,true);
getPlayList(num);
console.log("play== "+num)
}
function getPlayList(step)
{
for(var i=0; i<5; i++)
{
document.getElementById('current_' + i).className = 'plist';
if (step == i)
{
document.getElementById('current_' + i).className = 'current';
}
}
}
</script>
<h1>html5播放器视频切换范例</h1>
<div class="w">
<div id="current_3" class="plist">
<a href="javascript:void(0);" onclick="nextVideo('138dcc96672de50d310b61a288a99679_1','3');">视频4-别克君越</a>
</div>
<div id="current_2" class="plist">
<a href="javascript:void(0);" onclick="nextVideo('138dcc9667f9c0c236963b2c2d394f6a_1','2');">视频3-别克威朗</a>
</div>
<div id="current_1" class="plist">
<a href="javascript:void(0);" onclick="nextVideo('138dcc96670a0728e2ddb6276128d93e_1','1');">视频2-吉利汽车</a>
</div>
<div id="current_0" class="plist">
<a href="javascript:void(0);" onclick="nextVideo('138dcc9667850eba0705401288131bf1_1','0');">视频1-吉利宣传</a>
</div></div>
<div class="clearfix back"><a href="http://www.cuplayer.com/html5player/?f=link-back" class="cGray">返回演示平台</a> </div>
<footer class="clearfix">
<p>2009-2022(C)</p>
</footer>
</body>
</html>
实现点击一个播放一个的切换视频效果。