基于Flowplayer打造一款免费的WEB视频播放器附源码


Posted in Javascript onSeptember 06, 2015

Flowplayer 是一个开源(GPL 3的)WEB视频播放器。您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果。本文主要介绍Flowplayer的使用。

基于Flowplayer打造一款免费的WEB视频播放器附源码

查看演示   源码下载

Flowplayer支持播放flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。

1、加载flowplayer.js

在要播放视频的页面的head之间加入flowplayer.js。

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

您可以到flowplyer官网上下载最新版本:http://flowplayer.org/download/index.html

2、XHTML

在需要加入播放器的地方加入如下一段代码:

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

将a标签的href属性指向要播放的视频地址,然后设置样式,宽度和高度,以及设置display:block,当然关键的是还要给a标签指定一个id,以便于JS调用。

当然你也可以只在html中指定一个DIV,然后由Javascript来控制播放地址,如:

<div id="player2" style="width:520px; height:330px"> </div>

3、Javascript

在页面底部计入javascript脚本调用播放器:

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

使用flowplayer()函数调用播放器,第一个参数是播放器的id,第二个参数是播放器的路径,它是一个flash文件,一定要保证播放器的路径正确。

如果不是使用a标签调用视频文件,而是使用DIV来调用,则代码如下:

flowplayer( 
 "player2", 
 "flowplayer-3.2.7.swf",{ 
 clip: { 
 url: "flowplayer.flv", 
 autoPlay: false, 
 autoBuffering: true 
 } 
 } 
);

flowplayer()函数的第三个参数是可以进行多项设置的,其实就是高级设置。clip方法里的url:表示视频文件的真实地址,autoPlay:表示是否自动播放,默认是true,autoBuffering:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。

flowplayer还支持播放列表,以及皮肤设置等多项高级设置,具体设置方法,感兴趣的同学可以请访问:http://flowplayer.org/documentation/configuration/index.html。

Javascript 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 #Javascript
javascript日期处理函数,性能优化批处理
Sep 06 #Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 #Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 #Javascript
基于jquery实现的树形菜单效果代码
Sep 06 #Javascript
jQuery.extend 函数及用法详细
Sep 06 #Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 #Javascript
You might like
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
php5与php7的区别点总结
2019/10/11 PHP
用console.table()调试javascript
2014/09/04 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
Python实现随机选择元素功能
2017/09/14 Python
python @property的用法及含义全面解析
2018/02/01 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
django表单的Widgets使用详解
2019/07/22 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
女大学生个人求职信
2013/12/09 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
《锄禾》教学反思
2014/04/08 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL