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

posted on 2018-12-28 18:35  proving  阅读(621)  评论(0编辑  收藏  举报

导航