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. 在mac中用终端来运行.c文件

    第一步:打开终端,位置在lauchpad中去找搜索. 第二步:建一个.c文件. 第三步: 在终端输入.c路径.用cd命令 第五步:cc -c +tab键.生成.O文件 第六步:cc +tab键.生成. ...

  2. poj2255

    题目大意: 树恢复??树复原?? 小Valentine非常喜欢玩二叉树的游戏,他非常喜欢在二叉树的树根上随机的写上一下大写字母,这是她创造的一个例子: D / \ / \ B E / \ \ / \ ...

  3. 网站搬家后,UC通信失败解决方法

    把应用里边的UC设置信息,类似如下的,复制覆盖config/config_ucenter.php里边的全部信息,多个的话,放在相应的位置就好了 define('UC_CONNECT', 'mysql' ...

  4. [置顶] Ubuntu 12.04以上如何恢复GNOME传统界面

    Ubuntu 12.04以上开始使用Unity作为界面系统了,对于一直以来使用GNOME界面的人来说太不适应了,以下是如何在Ubuntu 12.04上恢复GNOME桌面 打开Linux终端上输入以下命 ...

  5. XPath与Xquery

    XPath 和 XQuery 在某些方面很相似.XPath 还是 XQuery 完整不可分割的一部分.这两种语言都能够从 XML 文档或者 XML 文档存储库中选择数据.本文简要介绍了 XPath 和 ...

  6. XMPPFrameWork IOS 开发(一)xmpp简介

    原始地址:XMPPFrameWork IOS 开发(一) XMPP : The Extensible Messaging and Presence Protocol 中文全称: 可扩展通讯和表示协议 ...

  7. DLL程序的创建步骤和測试程序

    首先,创建DLL程序 然后,加入一个导出类 比如: //Test.h #pragma once class AFX_EXT_CLASS Test { public:  Test(void);  ~Te ...

  8. Linux TCP队列相关参数的总结

    作者:阿里技术保障锋寒 原文:https://yq.aliyun.com/articles/4252 摘要: 本文尝试总结TCP队列缓冲相关的内核参数,从协议栈的角度梳理它们,希望可以更容易的理解和记 ...

  9. chmod -x chmod的N种解法

    声明:该文章摘自陈皓的酷壳. 问题: 如果某天你的Unix/Linux系统上的chomd命令被某人去掉了x属性(执行属性),那么,你如何恢复呢? 参考答案: 1)重新安装.对于Debian的系统: s ...

  10. iOS---多线程实现方案一 (pthread、NSThread)

    在iOS开发中,多线程是我们在开发中经常使用的一门技术.那么本文章将和大家探讨一下针对于多线程的技术实现.本文主要分为如下几个部分: iOS开发中实现多线程的方式 单线程 pthread NSThre ...