本实例是关于Flowplayer动态切换视频内容的一小段代码,主要方式就是通过Javascript循环绑定播放按钮,url中添加实际的视频地址即可。
// loop those links and alter their click behaviour
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
// play the clip specified in href- attribute with Flowplayer
$f().play(this.getAttribute("href", 2));
// by returning false normal link behaviour is skipped
return false;
};
}
全部代码请看下面的JSP页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.overlay {
padding: 40px;
width: 576px;
display: none;
background-image: url(images/white.png);
}
.close {
background: url(images/close.png) no-repeat;
position: absolute;
top: 2px;
right: 5px;
display: block;
width: 35px;
height: 35px;
cursor: pointer;
}
#player {
height: 450px;
display: block;
}
</style>
<!-- -->
<script src="js/flowplayer/jquery.tools.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/flowplayer/flowplayer-3.2.8.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$f("player", "js/flowplayer/flowplayer-3.2.8.swf", {
clip: {
// use baseUrl so we can play with shorter file names
//baseUrl: 'http://blip.tv/file/get',
// use first frame of the clip as a splash screen
autoPlay: false,
autoBuffering: true
}
});
// get all links that are inside div#clips
var links = document.getElementById("clips").getElementsByTagName("a");
// loop those links and alter their click behaviour
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
// play the clip specified in href- attribute with Flowplayer
$f().play(this.getAttribute("href", 2));
// by returning false normal link behaviour is skipped
return false;
};
}
</script>
</head>
<body>
<a
href="/resource/Flvs/1332676825470_2.flv"
style="display:block;width:400px;height:300px;"
id="player">
</a>
<div id="clips">
<a href="/resource/Flvs/1332676825470_2.flv">Eating sushi</a>
<a href="/resource/Flvs/1332679307009_1332253379184_02.flv">Hotel room with brown carpet</a>
</div>
<br clear="all" />
</body>
</html>