web开源FlowPlayer视频播放器

1.原文地址：http://www.cnblogs.com/babycool/p/3172303.html

2.针对原作者的代码示例修正！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="flowplayer/flowplayer-3.2.11.min.js" type="text/javascript"></script>
</head>
<body>
<!--第一种方法--><!-- <a href="video/story.flv" style="display: block; width: 670px; height: 450px" id="tl_player"></a><script>flowplayer("tl_player", "flowplayer/flowplayer-3.2.12.swf");</script>--><br />第二种方法<div id="tl_player" style="width: 670px; height: 450px;"></div><script>flowplayer("tl_player", "flowplayer/flowplayer-3.2.12.swf", { clip: { url: "video/story.flv", autoPlay: false, autoBuffering: true} });</script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

最近项目中需要添加播放视频的功能，视频文件是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代码

作者：酷小孩

出处：http://www.cnblogs.com/babycool/

本文首发博客园，版权归作者跟博客园共有。

转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法

web开源FlowPlayer视频播放器相关推荐

flowplayer 视频播放器
flowplayer 视频播放器转载于:https://www.cnblogs.com/whoknows1/p/11525866.html
介绍当前流行的一些开源Flash视频播放器
栏目导航 Java开源 OPEN文档 OPEN搜索 OPEN家园 OPEN资讯提交开源项目 A Accordion AutoComplete Animation C Calendar Charts ...
十款开源在线视频播放器
转http://blog.lixiphp.com/10-top-free-opensource-flv-player/ 10 Free Open Source embeddable Video Pla ...
一个牛逼的开源 H5 视频播放器
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是章鱼猫.今天给大家分享的这个开源项目,对于前端开发者来讲非常非常的有用.因为它是一个 H5 的视频播放器. 字 ...
网页html5播放器,一个强大的开源HTML5视频播放器，字节出品
哈喽,大家好!现在短视频.直播十分的火,相信许多开发童鞋都遇到要在项目中加入视频组件的情况吧. 一般视频播放或者直播的前端组件都要有诸如弹幕.清晰度调整.倍数播放等功能,今天精选板给大家带来的就是这样 ...
Android开源音视频播放器
https://zhuanlan.zhihu.com/p/52621395 https://zhuanlan.zhihu.com/p/25857302
个人开源项目视频播放器~ERPlayer
ERPlayer 使用AVPlayerLayer封装的基本视频控件,自定义度高~项目已上传github,计划下一步做弹幕和流媒体~github地址~https://github.com/Erma-Wa ...
Flash视频播放器flowplayer的使用
一.flowplayer介绍 FlowPlayer 是一个用Flash开发的在Web上的视频播放器,可以很容易将它集成在任何的网页上.支持HTTP以及流媒体传输. 二.flowplayer下载官方地 ...
Javascript 控制 Flash FLV视频播放器 --国外开源
制作一个简单的FLV播放器很简单 , 做功能强大的就心有余而力不足了 . 经过google ,找到了一款开源的视频播放器JW_FLV_Player, 也可以当MP3播放器 . javascritp可 ...
气愤！史上最好用的开源视频播放器遭人剽窃
大家好,我是你们的校长. 作为一个 Mac 电脑的忠实粉丝,在视频播放器这块,我想应该很多人都听说过甚至都一直在用这个播放器:IINA . IINA 作为 Mac 电脑上开源的视频播放器,一直备受推崇 ...

web开源FlowPlayer视频播放器

web开源FlowPlayer视频播放器相关推荐

最新文章

热门文章