flowplayer视频播放插件[转]
最近项目中需要添加播放视频的功能,视频文件是flv格式的。在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些。特将使用方法记录一下。
flowplayer也有html5版本的,但由于网站为了支持IE较低版本,还是选择了flash版本的。
flowplayer官网:http://flowplayer.org/
一. 介绍:Flowplayer支持播放flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。
二. 调用:
1. 在页面头部Head标签内添加引用 (我使用的是3.2.12免费版,最新版可从官网下载)
<script src="../../js/flowplayer/flowplayer-3.2.11.min.js" type="text/javascript"></script>
2. 在页面中添加播放器实例化代码:
这里介绍两种调用方法
方法一:
<a href="/Video/story.flv" style="display: block; width: 670px; height: 450px" id="tl_player">
</a>
<script>
flowplayer("tl_player", "/js/flowplayer/flowplayer-3.2.12.swf");
</script>
说明:
将a标签的href属性指向要播放的视频地址,设置播放器显示时的宽度和高度,设置a标签为display:block,并为a标签指定id,该id用于flowplayer的js调用。
方法二:
<div id="tl_player" style="width: 670px; height: 450px;">
</div>
<script>
flowplayer("tl_player", "/js/flowplayer/flowplayer-3.2.12.swf", { clip: { url: "/Video/story.flv", autoPlay: false, autoBuffering: true} });
</script>
说明:
也可以用div或者span 等其他标签来作为播放器的容器,但要给定其style的高度,宽度且为块级元素。
一些设置参数:clip方法里的url:表示视频文件的真实地址,autoPlay:表示是否自动播放,默认是true,autoBuffering:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。
三. 免费版的缺点:
1. 播放器在刚开始加载时,左下角会有一个logo,不过是一闪而过,正常播放时没有。
2. 播放器在全屏时右上角会有一个大的logo标,不过在非全屏模式下不会显示。
全屏模式下效果:
非全屏模式下:
3. 右键菜单:
附:我使用的3.2.12免费版及测试时的 Demo代码
flowplayer视频播放插件[转]的更多相关文章
- flowplayer视频播放插件
flowplayer视频播放插件 最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. f ...
- [开发笔记]-flowplayer视频播放插件
最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...
- html5视频播放插件
对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...
- HTML5视频播放插件 video.js介绍
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- 视频播放插件Video.js
这是一个很强大的视频播放插件.
- web视频播放插件:Video For Everybody
相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...
- 视频播放插件JWPlayer的使用
JwPlayer 简介 JW Media Player是一个开源的在网页上使用的Flash视频.音频以及图片播放器,支持 Sliverlight 播放,支持H.264 ( .mp4, .mo ...
- ckplayer视频播放插件使用
研究ckplayer插件播放视频,播放视频需要配置信息修改如下: 1.设置ckplayer.js中的logo: 'null' 可以隐藏视频播放头部的图标: 2.设置ckplayer.js中的ckcpt ...
- Joomla的在线视频播放插件:AllVideos
一个很好的插件,只需要在文章中插入一条简单的语句就可以实现视频播放,视频可以位于网站服务器上或其他视频网站的. 例如:{f4v}ShaHua-H264{/f4v} 我在使用中只有一个地方觉得需要更 ...
随机推荐
- 【BZOJ 4403】 4403: 序列统计 (卢卡斯定理)
4403: 序列统计 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 653 Solved: 320 Description 给定三个正整数N.L和R, ...
- tomcat8.5请求参数限制的问题
前段时间遇到这个问题: 包含json字符串类型的参数的http请求失败,返回状态码400,提示invalid character found in the request target. Tomcat ...
- Test20171009 考试总结 NOIP模拟赛
题目难度合适,区分度适中,但是本人水平不佳,没有拿到满意的分数. T1(matrix) 一种比较容易想到的想法是枚举起点求出最长全1串做预处理,这是O(n^2)的. 接着枚举列起点,列终点,通过后缀和 ...
- px,dp,sp以及像素密度
px px(pixel): 像素,是指在由一个数字序列表示的图像中的一个最小单位.在Android中,无论屏幕密度多少,一个像素单位对应一个屏幕像素单位,不会根据屏幕密度自动缩放,因此一般不推荐使用p ...
- CXF和Axis2的区别
1.CXF支持 WS-Addressing,WS-Policy, WS-RM, WS-Security和WS-I Basic Profile.Axis2不支持WS-Policy,但是承诺在下面的版本支 ...
- redis配置参数简介
redis配置查看方式: 1.redis的安装目录查看redis.conf 2.登陆redis客户端,使用 config get xx命令. 比如:查看所有的配置: config get * [roo ...
- 关闭Spring Boot的Jsckson的FAIL_ON_EMPTY_BEANS
说明:Spring Boot中默认使用了Jackson做JSON的解析. 解决方法: 1.通过注入Bean来实现 错误: org.springframework.http.converter.Http ...
- Windows 10 UWP程序标题栏设置
在Windows 10程序中,以前只能用于全屏方式的Metro程序现在可以运行在窗口模式下了,并且改了个新名字,叫Windows 通用程序(Universal Windows app),简称UWP程序 ...
- Digital Adjustment of DC-DC Converter Output Voltage 电阻选择
- 源码分析:动态分析 Linux 内核函数调用关系
源码分析:动态分析 Linux 内核函数调用关系 时间 2015-04-22 23:56:07 泰晓科技 原文 http://www.tinylab.org/source-code-analysi ...