最近项目中需要添加播放视频的功能,视频文件是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视频播放插件[转]的更多相关文章

  1. flowplayer视频播放插件

    flowplayer视频播放插件 最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. f ...

  2. [开发笔记]-flowplayer视频播放插件

    最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...

  3. html5视频播放插件

    对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...

  4. HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  5. 视频播放插件Video.js

    这是一个很强大的视频播放插件.

  6. web视频播放插件:Video For Everybody

    相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...

  7. 视频播放插件JWPlayer的使用

      JwPlayer  简介   JW Media Player是一个开源的在网页上使用的Flash视频.音频以及图片播放器,支持 Sliverlight 播放,支持H.264 ( .mp4, .mo ...

  8. ckplayer视频播放插件使用

    研究ckplayer插件播放视频,播放视频需要配置信息修改如下: 1.设置ckplayer.js中的logo: 'null' 可以隐藏视频播放头部的图标: 2.设置ckplayer.js中的ckcpt ...

  9. Joomla的在线视频播放插件:AllVideos

    一个很好的插件,只需要在文章中插入一条简单的语句就可以实现视频播放,视频可以位于网站服务器上或其他视频网站的. 例如:{f4v}ShaHua-H264{/f4v}   我在使用中只有一个地方觉得需要更 ...

随机推荐

  1. 常用排序算法的Python实现

    冒泡排序 算法思想: 对于一组需要排序的数据,对于相邻的两个数进行比较,使较大(或者较小)的数一直向后推,经过多层排序之后,使整个序列是有序的. 算法实现: def bubble_sort(L): l ...

  2. [BZOJ4009][HNOI2015]接水果(整体二分)

    [HNOI2015]接水果 时间限制:60s      空间限制:512MB 题目描述 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果. 由于她已经DT FC 了The b ...

  3. 【20181030T1】排列树【树形结构+组合数】

    题面 [正解] 一眼找规律 --**这东西有啥规律啊 哎好像根节点是最小的 好像可以组合数分配子树大小,子树内部-- 可以递归啊! 乱搞一顿就好啦 过了大样例 复杂度\(O(N)\) 切完T2后T3水 ...

  4. bzoj 4094: [Usaco2013 Dec]Optimal Milking

    4094: [Usaco2013 Dec]Optimal Milking Description Farmer John最近购买了N(1 <= N <= 40000)台挤奶机,编号为1 . ...

  5. php上传中文文件文件名乱码问题

    php上传文件是最最基础的一个技术点,但是深入进去也有不少问题需要解决,这不,上传中文文件后,文件名变成了乱码. 下面是问题代码,很简单: 1.问题代码 html部分: <html> &l ...

  6. PHP -- 8个必备的PHP功能开发

    原文出处:http://www.codeceo.com/8-php-functions.html 做过PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得 ...

  7. 【原创】LogCat信息演示Activity生命周期

    界面如下:注意:这是在手机.竖屏状态下! (一)1个Activity     /**     * 7个方法     * 测试1个Activity的生命周期     *      * LogCat:   ...

  8. mySql---logback日志写入数据库(mysql)配置

    如题  建议将日志级别设置为ERROR.这样可以避免存储过多的数据到数据中. 1  logback 配置文件(如下) <?xml version="1.0" encoding ...

  9. Scrapy入门教程(转)

    关键字:scrapy 入门教程 爬虫 Spider作者:http://www.cnblogs.com/txw1958/出处:http://www.cnblogs.com/txw1958/archive ...

  10. Maven编译代码的相关命令

    第一.main目录下的主代码编写完毕后,使用Maven进行编译,在项目根目录下运行命令mvn clean compile进       行项目编译. 第二.test目录下的测试用例编写完毕之后就可以调 ...