基于Flowplayer打造一款免费的WEB视频播放器附源码

2024-09-28 02:46:13

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

查看演示源码下载

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

flowplayer还支持播放列表，以及皮肤设置等多项高级设置，具体设置方法，感兴趣的同学可以请访问：http://flowplayer.org/documentation/configuration/index.html。

内嵌式RealPlayer播放器的参数含义

内嵌式RealPlayer播放器的参数含义内嵌式RealPlayer播放器的参数含义参数:autostart 属性:True或是False 作用:指定是否自动播放指定的源文件参数:backgroundcolor 属性:任何用符号"#"开头的16进制数值或是任何预定义的颜色作用:指定图像窗口的背景颜色参数:center 属性:True或是False 作用:指定片断使用初始编码大小播放,并且在图像窗口的中央. 参数:classid 属性:"
MediaPlayer 在线播放器代码

<object id="MediaPlayer1" width="220" height="176" align="baseline" border="0" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="AudioStream" VALUE="-1&qu
页面嵌入Windows Media Player播放器代码需要注意的

这里是WMP的版本ClassID,从WMP7后ID就成了clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6,之前的6.4为clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95,但是之前的版本还是可以用的,只不过新功能用不了罢了. 下面这个是具体的版本号,你可以对比一下你现在的是什么版本. 版本号 Windows Media Player (WMP) 的版本-------------------------
Window Media Player 播放器

比较吃力的地方是drop到播放列表,查MSDN查了n久,还有Window Media Player 6.x插件的play有些奇怪,所以我的代码也有些奇怪........ 拜托各位多测测,有Bug您说话,看我做的也挺不容易的,觉得好的您也多捧捧场. My HTML Player body { overflow:auto; font-size:12px; cursor:default; } #table01 { font-size:12px; background-Color:black; colo
基于jQuery的网页影音播放器jPlayer的基本使用教程

jPlayer简介: 想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还容易出现跨浏览器兼容性的问题,于是选了一款基于jQuery的播放器jPlayer来做. 设置jPlayer的尺寸大小使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽. 使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸. 注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB&quo
超酷的网页音乐播放器DewPlayer使用方法

使用方法:把代码添加到模板中,或者像我一样,放到广告代码中进行调用.注意修改swf文件和mp3文件路径.如需自动开始并循环播放,请添加代码 &autostart=1&autoreplay=1 ,如"mp3=http://www.x.com/x.mp3&autostart=1&autoreplay=1". 1.stream[135x50] 复制代码代码如下: <embed flashvars="mp3=mp3/test1.mp3"
layer弹出层中H5播放器全屏出错的解决方法

1. 在layer弹窗组件中如果使用了flash播放器,全屏是正常的但若使用了HTML5的播放器,全屏失效举个栗子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js
flvplayer.swf flv视频播放器使用方法

一.直接在html文件中加载: 复制代码代码如下: <div id="FlashFile"> <object type="application/x-shockwave-flash" width="470px" height="403px" data="flvplayer.swf?file=movies/company.flv"> <param name="movi
网页播放器的参数含义 Windows Media Player 网页播放器参数含义

(默认0为否,-1或1为是)<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225"> <param name="AudioStream" value="-1"> <param name="A
Android MediaPlayer实现音乐播放器实例代码

Android MediaPlayer实现音乐播放器 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=&qu

基于Flowplayer打造一款免费的WEB视频播放器附源码

相关推荐

随机推荐