flowplayer网页视频播放器事例详解--包含各种参数说明(自译) flowplayer网页视频播放器事例详解--包含各种参数说明(自译)

<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

<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

猜你喜欢

转载自www.cnblogs.com/proving/p/10192266.html