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. SQL 第二章 作业

    /*第二章 作业*/ create table S ( sno char(2) NOT NULL UNIQUE, sname char(3), city char(2) ); alter table ...

  2. poj 3281 最大流建图

    题目链接:http://poj.org/problem?id=3281 #include <cstdio> #include <cmath> #include <algo ...

  3. grep 查找当前文件夹下所有文件内内容 并显示文件名

    grep -H comm * 显示结果 rclog:recommend/ysclick,1,2 rclog:recommend/utagclick,1,8 .................... t ...

  4. git如何clone所有的远程分支

    问题: 文/赖忠标 周末在家里改了下代码,新建了个angular版本的分支,然后push到coding.net上面了. 今天,到公司却不知道怎么拉取这个angular分支到公司的电脑上面.如下图(1) ...

  5. springMVC整合jedis+redis

    http://www.cnblogs.com/zhengbn/p/4140549.html 前两天写过 springMVC+memcached 的整合,我从这个基础上改造一下,把redis和sprin ...

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

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

  7. WebChat 清爽来袭 -- JavaChat系统Ⅳ

    题记:          WebChat 依然搭配的是 JavaChat 服务器,在不修改原来服务器代码的情况下进行使用终端的扩展.         此次项目的难点在于,Action/Servlet ...

  8. Android RadioGroup Fragment Viewpager FragmentPagerAdapter 去哪网Fragment嵌套

    RadioGroup中的各个选择器 <selector xmlns:android="http://schemas.android.com/apk/res/android"& ...

  9. 统计学习导论:基于R应用——第四章习题

    第四章习题,部分题目未给出答案 1. 这个题比较简单,有高中生推导水平的应该不难. 2~3证明题,略 4. (a) 这个问题问我略困惑,答案怎么直接写出来了,难道不是10%么 (b) 这个答案是(0. ...

  10. 獲取 Textarea 的光標位置(摘自網絡)

    在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的.下面我们一起来看看如何获取到 Textarea 元素中的光标位置.首先,我们用 rang ...