慕容的工作随笔


分享技术经验、创业副业经验、AI教程、精品素材等

flowplayer网页视频播放器事例详解--包含各类参数申明

2018年1月13日 0条评论 223次阅读 0人点赞 慕容

2015-03-11 16:11:00

<html xmlns="http://www.w3.org/1999/xhtml" >

<br><head runat="server">
<br>    <title></title>
<br>    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<br>    <script type="text/javascript" src="flowplayer-3.2.11.min.js"></script>
<br>    <link rel="stylesheet" type="text/css" href="style.css" />
<br></head>
<br><body>
<br>    <form id="form1" runat="server">
<br>    <％--<div>//简单调用
<br>        <a 
<br>             href="flowplayer-700.flv"
<br>             style="display:block;width:520px;height:330px"
<br>             id="player">
<br>        </a>
<br>   
<br>        <script>
<br>            flowplayer（"player"， "flowplayer-3.2.12.swf"， {
<br>                clip: {
<br>                    autoPlay: false，
<br>                    autoBuffering:true
<br>                }
<br>            }）;
<br>        </script>
<br>    </div>--％>
<br>    <div>
<br>        <a href="flowplayer-700.flv" style="display: block; width: 520px; height: 330px"
<br>            id="player"></a>
<br>        <script>
<br>            flowplayer（"player"， "flowplayer-3.2.12.swf"， {//播放器主文件（按照项目定亦可引用：http://releases.flowplayer.org/swf/flowplayer-3.2.12.swf）
<br>                clip: {
<br>                    autoPlay: true，//主动播放
<br>                    autoBuffering:true//是否开启缓冲
<br>                }，
<br>                playlist: [//播放列表
<br>                    {
<br>                        url: "notfound.jpg"，//默认显示图片（若是没有这显示播放视频的第一个画面）
<br>                        //duration: 5，//连气儿时候
<br>                        scaling: ""orig""//缩放
<br>                    }，
<br>                    {
<br>                        url: ""flowplayer-700.flv""，//须要播放的文件
<br>                        autoPlay: false，
<br>                        provider: ""http""，
<br>                        autoBuffering: true
<br>                    }
<br>                ]，
<br>                plugins: {
<br>                    controls: {
<br>                        bottom: 0，//功能条距底部的间隔
<br>                        height: 24， //功能条高度
<br>                        zIndex: 1，
<br>                        fontColor: ""＃ffffff""，
<br>                        timeFontColor: ""＃333333""，
<br>                        playlist: true，//上一个、下一个按钮
<br>                        play:true， //开端按钮
<br>                        volume: true， //音量按钮
<br>                        mute: true， //静音按钮
<br>                        stop: true，//停止按钮
<br>                        fullscreen: true， //全屏按钮
<br>                        scrubber: true，//进度条
<br>                        url: "flowplayer.controls-3.2.12.swf"， //决意功能条的显示样式（功能条swf文件，按照项目定亦可引用:http://releases.flowplayer.org/swf/flowplayer.controls-3.2.12.swf）
<br>                        time: true， //是否显示时候信息
<br>                        autoHide: true， //功能条是否主动隐蔽
<br>                        backgroundColor: ""＃aedaff""， //靠山色彩
<br>                        backgroundGradient: [0.1， 0.1， 1.0]， //靠山色彩渐变度（等分的点渐变）
<br>                        opacity: 0.5， //功能条的透明度
<br>                        borderRadius: ""30""，//功能条边角
<br>                        tooltips: {
<br>                            buttons: true，//是否显示
<br>                            fullscreen: ""全屏""，//全屏按钮，鼠标指上时显示的文本
<br>                            stop:""停止""，
<br>                            play:""开端""，
<br>                            volume:""音量""，
<br>                            mute: ""静音""，
<br>                            next:""下一个""，
<br>                            previous:""上一个""
<br>                        }
<br>                    }
<br>                }
<br>            }）;
<br>        </script>
<br>
<br>    </div>
<br>    </form>
<br></body>
<br></html>
playlist: [
    'first.jpg',
    'second.mp4',
    // customized third clip with autoPlay set to false
    {
        url: 'third.flv',
        autoPlay: false
    }
]
  1. <script>
  2.                     $f("a.myPlayer", "<%=path %>/flowplayer/flowplayer-3.2.11.swf", {
  3.                         clip : {
  4.                             scaling: 'fit',
  5.                             autoPlay: true,
  6.                             autoBuffering: true
  7. //                          onStart: function(clip) {
  8. //                              alert("Playing");
  9. //                          }
  10.                         },
  11.                         playlist: [ //视频播放列表
  12.                         {
  13.                              url: '/ad/upload/flv/20120705/20120705094010828.flv',   //视频路径
  14.                              duration: 1,//视频播放时间
  15.                              title:'test'    //标题
  16.                         },
  17.                         {
  18.                              url: '/ad/upload/flv/20120705/20120705094052343.flv',   //视频路径
  19.                              duration: 2,//视频播放时间
  20.                              title:'test2'   //标题
  21.                         }
  22.                         ],
  23.                         plugins:  {
  24.                             controls:  {
  25.                                 playlist: true
  26.                             }
  27.                         }
  28.                     });
  29.                 </script>
点赞
No Tag
最后编辑：2018年1月13日

发表回复

电子邮件地址不会被公开。必填项已用 * 标注