<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="flowplayer-3.2.11.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form id="form1" runat="server"> <%--<div>//简单调用 <a href="flowplayer-700.flv" style="display:block;width:520px;height:330px" id="player"> </a> <script> flowplayer("player", "flowplayer-3.2.12.swf", { clip: { autoPlay: false, autoBuffering:true } }); </script> </div>--%> <div> <a href="flowplayer-700.flv" style="display: block; width: 520px; height: 330px" id="player"></a> <script> flowplayer("player", "flowplayer-3.2.12.swf", {//播放器主文件(根据项目定亦可引用:http://releases.flowplayer.org/swf/flowplayer-3.2.12.swf) clip: { autoPlay: true,//自动播放 autoBuffering:true//是否开启缓冲 }, playlist: [//播放列表 { url: "notfound.jpg",//默认显示图片(如果没有这显示播放视频的第一个画面) //duration: 5,//持续时间 scaling: 'orig'//缩放 }, { url: 'flowplayer-700.flv',//需要播放的文件 autoPlay: false, provider: 'http', autoBuffering: true } ], plugins: { controls: { bottom: 0,//功能条距底部的距离 height: 24, //功能条高度 zIndex: 1, fontColor: '#ffffff', timeFontColor: '#333333', playlist: true,//上一个、下一个按钮 play:true, //开始按钮 volume: true, //音量按钮 mute: true, //静音按钮 stop: true,//停止按钮 fullscreen: true, //全屏按钮 scrubber: true,//进度条 url: "flowplayer.controls-3.2.12.swf", //决定功能条的显示样式(功能条swf文件,根据项目定亦可引用:http://releases.flowplayer.org/swf/flowplayer.controls-3.2.12.swf) time: true, //是否显示时间信息 autoHide: true, //功能条是否自动隐藏 backgroundColor: '#aedaff', //背景颜色 backgroundGradient: [0.1, 0.1, 1.0], //背景颜色渐变度(等分的点渐变) opacity: 0.5, //功能条的透明度 borderRadius: '30',//功能条边角 tooltips: { buttons: true,//是否显示 fullscreen: '全屏',//全屏按钮,鼠标指上时显示的文本 stop:'停止', play:'开始', volume:'音量', mute: '静音', next:'下一个', previous:'上一个' } } } }); </script> </div> </form> </body> </html>
播放器外观样式定制页面:http://flowplayer.org/documentation/skinning/controlbar.html