Flowplayer 动态切换视频内容

最新推荐文章于 2020-04-26 14:41:06 发布

teemai

最新推荐文章于 2020-04-26 14:41:06 发布

阅读量3.3k

点赞数 1

分类专栏：前端开发专题 CPS项目专题文章标签： returning html function url java file

本文链接：https://blog.csdn.net/withiter/article/details/7396469

版权

前端开发专题同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CPS项目专题

6 篇文章 0 订阅

订阅专栏

本实例是关于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>