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

相关文章