视频切换播放的例子（视频切换范例）代码

最新推荐文章于 2023-07-28 16:09:34 发布

阿酷tony

最新推荐文章于 2023-07-28 16:09:34 发布

阅读量741

点赞数

分类专栏：视频应用专栏文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/ffffffff8/article/details/126010614

版权

视频应用专栏专栏收录该内容

62 篇文章 3 订阅

订阅专栏

视频切换播放的例子（视频切换范例）代码

酷播云倍速播放功能_播放效果

<!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>

实现点击一个播放一个的切换视频效果。