• 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;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; 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

  • 相关阅读:
    jmeter 5压测https接口报错javax.net.ssl.SSLHandshakeException: Remote host closed connection during handshake的解决方法
    压测部署在k8s的服务时,出现{"message":"An unexpected error occurred"}错误的可能原因
    用jmeter测试post接口body带中文参数报错,同样的body粘贴到postman里正常-----解决方法
    hive删除分区表以及修复分区表
    查看Hive表信息及占用空间
    jmeter测试的get接口中有特殊字符时的处理
    面试题-给你一个扫码支付的二维码,如何写测试用例?
    零碎的 软件测试面试题
    linux常见问题
    自动化面试常问问题
  • 原文地址:https://www.cnblogs.com/proving/p/10192266.html
Copyright © 2020-2023  润新知