[开发笔记]-flowplayer视频播放插件
2013-07-04 19:51
351 查看
最近项目中需要添加播放视频的功能,视频文件是flv格式的。在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些。特将使用方法记录一下。
flowplayer也有html5版本的,但由于网站为了支持IE较低版本,还是选择了flash版本的。
flowplayer官网:http://flowplayer.org/
一. 介绍:Flowplayer支持播放flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。
二. 调用:
1. 在页面头部Head标签内添加引用 (我使用的是3.2.12免费版,最新版可从官网下载)
2. 在页面中添加播放器实例化代码:
这里介绍两种调用方法
方法一:
说明:
将a标签的href属性指向要播放的视频地址,设置播放器显示时的宽度和高度,设置a标签为display:block,并为a标签指定id,该id用于flowplayer的js调用。
方法二:
说明:
也可以用div或者span 等其他标签来作为播放器的容器,但要给定其style的高度,宽度且为块级元素。
一些设置参数:clip方法里的url:表示视频文件的真实地址,autoPlay:表示是否自动播放,默认是true,autoBuffering:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。
三. 免费版的缺点:
1. 播放器在刚开始加载时,左下角会有一个logo,不过是一闪而过,正常播放时没有。
2. 播放器在全屏时右上角会有一个大的logo标,不过在非全屏模式下不会显示。
全屏模式下效果:
非全屏模式下:
3. 右键菜单:
附:我使用的3.2.12免费版及测试时的 Demo代码
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视频播放插件
- 新版网络学堂播放视频升级,使用Flowplayer插件, 一款免费的WEB视频播放器
- iPhone开发之音视频的播放——MPMoviePlayerViewController和AVAutoPlayer的使用
- iOS开发--利用MPMoviePlayerController播放视频简单实现
- debian学习笔记7, mplayer smplayer详细配置说明.解决播放视频没有画面只有声音,w32codecs.w74codecs插件配置.
- RTMP与Flowplayer实现web页面视频流播放功能
- android开发SurfaceView+MediaPlayer实现视频播放
- ios开发笔记之 视频播放收藏
- iPhone开发笔记(1)MPMoviePlayerController的用法和播放时只有声音没有图像的解决办法
- 【iOS开发】解决“点击MPMoviePlayerController播放视频时,出现一个黑屏闪屏问题”
- 归纳笔记019:MPMoviePlayerController播放视频
- JS 实现网页视频播放: vcastr22 、 flowplayer 、 jwplayer
- 基于Retrotfit2.1+Material Design+ijkplayer开发的一个APP(新闻,gif 动图,视频播放)
- 为CKEditor开发FLV视频播放插件
- web视频播放空间 flowplayer-3.2.16
- iOS开发--利用MPMoviePlayerViewController播放视频简单实现
- Android应用开发学习笔记之播放视频
- ios开发笔记之 MPMoviePlayerController网络视频加载