基于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 入门实例1
Jun 25 Javascript
jquery随机展示头像代码
Dec 21 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
es6数值的扩展方法
Mar 11 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
详细分析React 表单与事件
Jul 08 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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中如何在有限的内存中读取大文件
2013/07/02 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
js内置对象 学习笔记
2011/08/01 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
如何提高数据访问速度
2016/12/26 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
python 测试实现方法
2008/12/24 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python自定义函数def的应用详解
2020/06/03 Python
用Python开发app后端有优势吗
2020/06/29 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
初中数学教学反思
2014/01/16 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang