zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    20200209 ZooKeeper 3. Zookeeper内部原理
    20200209 ZooKeeper 2. Zookeeper本地模式安装
    20200209 Zookeeper 1. Zookeeper入门
    20200206 尚硅谷Docker【归档】
    20200206 Docker 8. 本地镜像发布到阿里云
    20200206 Docker 7. Docker常用安装
    20200206 Docker 6. DockerFile解析
    20200206 Docker 5. Docker容器数据卷
    20200206 Docker 4. Docker 镜像
    Combining STDP and Reward-Modulated STDP in Deep Convolutional Spiking Neural Networks for Digit Recognition
  • 原文地址:https://www.cnblogs.com/proving/p/10192266.html
Copyright © 2011-2022 走看看