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:表示是否自动缓冲,即当视频文件设置为不自动播放时,播放器仍然预先下载视频文件内容。

转 -helloweba.com

Flowplayer-一款免费的WEB视频播放器 转 - helloweba.com的更多相关文章

  1. Flowplayer-一款免费的WEB视频播放器

    Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果. Flowplayer支持 ...

  2. Flowplayer-一款免费的WEB视频播放器(转)

    Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...

  3. Video.js web视频播放器

    免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...

  4. Clappr——开源的Web视频播放器

    巴西著名的门户网站Globo.com(视频播放器),使用的是基于OSMF的Flash组件.在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等.然而,由 ...

  5. 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布

    前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: h ...

  6. Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. <object> 标签用于包含对象,比如图像、音

    Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如 ...

  7. WEB视频播放器插件,总结

    WEB视频播放器插件,总结 2018年07月29日 20:42:11 流光忆莲 阅读数:572更多 个人分类: 推荐文章收藏   以下是关于网页中嵌入视频播放插件的各种资料的总结 基于H5的Vedio ...

  8. VOOKI:一款免费的Web应用漏洞扫描工具

    Vooki是一款免费且用户界面友好的Web应用漏扫工具,它可以轻松地为你扫描任何Web应用并查找漏洞.Vooki主要包括三个部分,Web应用扫描器,Rest API扫描器以及报告.Web应用扫描器​V ...

  9. 从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)

    前言 话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器.我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那 ...

随机推荐

  1. 后缀自动机(SAM) :SPOJ LCS - Longest Common Substring

    LCS - Longest Common Substring no tags  A string is finite sequence of characters over a non-empty f ...

  2. 【最短路】【STL】CSU 1808 地铁 (2016湖南省第十二届大学生计算机程序设计竞赛)

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1808 题目大意: N个点M条无向边(N,M<=105),每条边属于某一条地铁Ci ...

  3. App自动更新之通知栏下载

    见证过博客园的多次升级,你也希望你的软件通过更新发布新特性通知用户吧,是的.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.设计思路,使用Versio ...

  4. HDOJ(HDU) 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你

    Problem Description 当抢救人员发现她的时候,她已经死了,是被垮塌下来的房子压死的,透过那一堆废墟的的间隙可以看到她死亡的姿势,双膝跪着,整个上身向前匍匐着,双手扶着地支撑着身体,有 ...

  5. SRM 407(1-250pt, 1-500pt)

    DIV1 250pt 题意:每个员工可以有几个直系上司,也可以有几个直系下属.没有直系下属的人工资为1,有直系下属的人工资为所有直系下属工资之和.求所有人工资之和.人数 <= 50. 解法:直接 ...

  6. N - Find a way

    这个专题的最后一道题目了.... 应该说的是有两个人计划去KFC碰头,找出来一个最近的KFC让他们俩见面吧,应该是个比较容易的问题,不过需要注意在一个Bfs里面搜的话,别把两个人弄混乱了....... ...

  7. 在eclipse下编译hadoop2.0源码

    Hadoop是一个分布式系统基础架构,由apache基金会维护并更新.官网地址: http://hadoop.apache.org/ Hadoop项目主要包括以下4个模块: Hadoop Common ...

  8. CentOS7 盒盖休眠

    https://wiki.archlinux.org/index.php/Power_management_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87) CentOS ...

  9. IOT数据库选型——NOSQL,MemSQL,cassandra,Riak或者OpenTSDB,InfluxDB

    IoT databases should be as flexible as required by the application. NoSQLdatabases -- especially key ...

  10. 关于kali安装vmware的坑,linux套路太深。

    http://www.linuxidc.com/Linux/2015-08/122240.htm 但是还有些坑 安装gcc5.4.1 apt-get install gcc-5 gcc-5所在目录 / ...