flowplayer视频播放器的简略使用 _Web前端

flowplayer视频播放器的简单使用

首先下载下来flowplayer这个播放器，将播放器面板flowplayer-3.1.5.swf复制到flv文件夹

html代码

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="jslib/flowplayer-3.1.4.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/flv.js"></script>	
	<link rel="stylesheet" type="text/css" href="css/player.css">
	<title>Flash播放器</title>
</head><body>
<div id="page">
		<h1>Flash播放器</h1>
		<p>&nbsp;</p>
		<a   href="http://59.175.133.13/youku/1572D4E3E7B4382EA4868F3158/03000201004BBC1D16C803017AC557D6DE8D18-D5A3-5C81-EEA0-997ED0239903.flv"
			 style="display:block;width:600px;height:450px"
			 id="player">
		</a>

<script>
			<!--初始化播放器-->
			flowplayer("player", "flv/flowplayer-3.1.5.swf");
		</script>
<p>
		  请输入URL地址<input type="text"  id="url"> <input id="exchange" type="button" value="播放">
</div>
</body></html>

?? jslib/flv.js代码

$(document).ready(function() {
    var exchange = $("#exchange");
    exchange.click(function(){
         var urlText = $.trim($("#url").val());
             if(urlText.length>0){
                var player = $("#player");
                player.attr("href",urlText);//改变页面的链接
                flowplayer("player", "flv/flowplayer-3.1.5.swf",{});//重新初始化播放器
             }else{
                 alert("请输入内容");
             }
    });    
});