Flowplayer简单酷炫的视频播放器

收藏

Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

1、引入Flowplayer插件。

<script type="text/javascript" src="flowplayer.js"></script>

HTML

2、然后我们加入两个演示demo。第一个默认设置，第二个自定义。

<div class="demo" id="demo1"> 
    <a href="demo.flv" style="display:block;width:520px;height:330px" id="player"></a>  
</div> 
 
<div class="demo" id="player2" style="width:520px; height:330px"></div>

Javascript

调用flowplayer播放视频方法：

flowplayer("player", "flowplayer.swf"); 
flowplayer("player2", "flowplayer.swf", { 
    clip: { 
        url: "demo.flv",//视频文件地址 
        autoPlay: false,//是否自动播放 
        autoBuffering: true //是否自动缓冲，即当视频文件设置为不自动播放时，播放器仍然预先下载视频文件内容 
    } 
});

flowplayer还支持播放列表，以及皮肤设置等多项高级设置，更多配置方法如下，感兴趣的可以自己尝试做起来。

flowplayer（"player"，"flowplayer.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: "demo.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: "上一个" 
 
            } 
 
        } 
 
    } 
 
}）;

最后让我们看下flowplayer视频播放演示效果吧。