实现土豆网的视频播放

Web 2.0时代，要说什么类型网站最火，自然是以

国外的Youtube、Google Video，国内的土豆

网、UUME为代表的视频分享网站了。这类网站提供

的视频内容可谓各有千秋，但它们无一例外的都使用

了Flash作为视频播放载体，支撑这些视频网站的技

术基础就是—— Flash 视频 (FLV) 。 001

FLV 是一种全新的流媒体视频格式，它利用了网页上广泛使用的Flash Player 平台，将视频整合到Flash 动画中。也就是说，网站的访问者只要能看Flash动画，自然也能看FLV 格式视频，而无需再额外安装其它视频插件，FLV视频的使用给互联网视频传播带来了极大便利。

看了上面这些，相信大家也跃跃欲试了吧，下面我们就来讲讲如何在网页中使用FLV 视频。

视频转换为FLV格式

从Flash MX 2004开始，软件就提供了FLV 格式支持，不过笔者建议大家使用目前最新版本的Flash 8，这个版本的Flash中有一个独立的FLV转换工具：Flash 8 Video Encoder。点击系统菜单“程序”→“Macromedia”→“Macromedia Flash 8 Video Encoder”进入。

进入程序后，可以看到软件界面非常简单，如图1。实际上使用这一工具转换普通视频为FLV视频很容易，只需几步即可完成。

图1

点击“增加”按纽，软件自动调用系统“打开”对话，选择需要导入的视频即可。Flash 8 Video Encoder支持转换的视频格式相当广泛，如：AVI、WMV、MPEG、ASF、MOV等常见视频格式。视频添加进队列后，如果你不需要做特殊修改，那么点击“开始队列”按纽，程序即开始视频转换。

软件转换视频的速度，笔者总的感觉还是较快，当然这与原始视频大小及设置的视频数据速率有关。整个转换过程，主窗口下方都有信息提示，并且还能看到实时的进度预览。转换结束后，在转换视频同一文件夹下，我们就能得到一个同名的FLV文件。

当然，上述这些只是按照默认设置进行转换的情况，实际情况下，我们对于视频转换的控制还可以很多，点击主窗口“设置”按纽进入高级设置对话框，如图2。

图2

在视频编码设置对话框中，最显著的就是FLV视频品质设置，默认是“Flash 8 - 中等品质 (400kbps)”，软件内置7种不同的编码设置组合。我们也可以选择自定义设置，点击“显示高级设置”按纽，软件将显示自定义的设置界面，如图3。

图3

软件提供了两种视频解码器供选择：On2 VP6（用于 Flash Player 8，支持Alpha 通道）、Sorenson Spark（用于 Flash Player 7，适用于低配置用户）；“调整视频大小”也颇有用，我们很容易生成制定尺寸的动画；如果你只重视视频效果，那么你还可以对“音频编码”开刀，将默认编码数率设置低些，那么输出的文件还会更小巧。

高级设置中的选择还很多，它甚至还提供了简单的视频编辑功能，点击“裁切和修剪”标签，如图4。

图4

裁切使用很简单，软件提供了四个方向的控制，输入数值以裁切视频，或者点击“三角”按纽显示控制滑块，拖动滑块直观地调整视频尺寸，视频预览区会实时用虚线勾画裁切范围。

修剪的使用也不复杂，在视频预览区下方可以看到一个蓝色的视频进度指示条，拖动上方的“倒三角”按纽定位视频播放进度。进度指示条下方有两个按纽，它们就是“开始点”和“结束点”定位按纽，分别拖动按纽到所需位置，即完成简单的视频修剪。

Flash插入FLV视频

得到了FLV文件，其实我们并不能直接在网页中使用，我们还需要将它嫁接到Flash动画中去。如同大家在各种视频网站中看到的一样，我们创建的Flash视频并不是简单播放就算了，它也是带播放控制的。 001

运行Flash 8，创建新的Flash 文档，点击菜单“文件”→“导入”→“导入视频”，进入“导入视频”对话框，如图5。

图5

可以看到，选择视频时会有两种不同的选择：“在您的计算机上”、“已经部署到Web服务器”，这两者是有区别的，不过目前我们仅需在本地测试动画，选择“在您的计算机上”。点击“浏览”按纽，通过系统打开对话框，载入我们刚生成的FLV文件，点击“下一个”按纽继续。

接下来选择“部署方式”为：“从 Web 服务器渐进式下载”，进入“外观”选项，如图6。

图6

Flash 8目前已经为播放FLV视频内置了数十个播放控制器，它们的外观各异，控制选项也有区别，你可以根据自己的需要，选择一个合适的播放控制器，最后点击“完成”按纽结束。

返回Flash 8主窗口工作区，可以看到我们刚插入的视频已经布置到位了，此时你可以直接按Ctrl+Enter测试动画了，如图7。

图7

FLV播放器的生成

通过动画预览，我们可以发现，目前默认的Flash动画尺寸比播放器宽了不少，我们需要重新设置一下。鼠标在工作区中选择“播放器控件”，调用“属性”面板（Ctrl+F3），修改X、Y轴值为“0.0”，这样我们就将“播放器控件”这个元件定位到了工作区的左上方顶点处，如图8。 001

图8

点击菜单“修改”→“文档”，进入“文档属性”对话框，选择“匹配”值为“内容”，点击“确定”返回，现在Flash文档的尺寸就与播放器一致了。

如果大家制作的FLV视频动画只打算在本地计算中播放，那么就直接输出SWF文件即可，如果是准备在网络中调用，那么还需要做一些事情。

先上传自己制作的FLV文件到网络服务器，获得文件远程网络地址：如：http://www.scxp.net/01.flv。接下来，选择工作区中的“播放器控件”，调用“参数”面板，找到“contentPath”字段，修改它的值为“http://www.scxp.net/01.flv”(原始值就是最开始大家设置的本地FLV文件路径)，如图9。

图9

点击菜单“文件”→“导出”→“导出影片”，例：设置导出影片地址为“D:\”，文件名为“01.swf”。接下来，设置播放器版本为“Flash Player 8”，ActionScript版本为“ActionScript 2.0”，点击“确定”完成。

进入“D:\”，可以看到，除了刚生成的“01.swf”文件外，还多了个“SteelOverPlaySeekMute.swf”文件，它也是调用Flash视频必须的文件，现在将这两个文件也上传到你的服务器中即可。以后你在网上任何地方需要调用Flash视频时，只需要插入服务器上的那个“01.swf”动画的网络地址即可。

注：设置Flash动画调用的FLV文件为网上远程路径后，本地预览“01.swf”文件会有安全警告，这是正常的情况，大家不必担心。

FLV格式Flash视频文件上传服务器后不能播放

FLV格式文件上传服务器后不能播放因为国内大多都是Win2003的主机.默认是没有指定输出FLV这种格式的虽然FTP里面可以看见,但无法通过http访问,也就无法播放了.
原因：WIN2003加强了IIS6的MIME验证，扩展文件格式统统显示404错误。手动在IIS中HTTP头->MIME添加MIME影射关系，MIME类型: video/x-flv 扩展名:.flv，即可通过Flash7+客户端Load进来播放]

办法解决“虚拟主机都不支持Flv格式文件”的问题：比如你的Flv文件名称是a.flv,在虚拟主机上建一个名为“a.flv”的目录，在此目录下放你的Flv格式文件，将其改名为：index.htm,这样就行了，播放器中的文件名保持原样不动 ]

本教程主要介绍HTML网页如何取得形如test.html?foo=mytest的foo参数，以及在HTML网页中如何向swf传递参数。

一、在HTML网页中使用js获取参数。
我们知道HTML页面是在客户端执行的，这样要获取参数必须使用客户端脚本（如JavaScript），在这点上不同于服务器端脚本获取参数方式。
下面的这段js代码获取HTML网页形如"test.html?foo=mytest&program=flash" "?"后所有参数。

下面的这段js代码则可以更加细化获取HTML网页某一参数

方法一：在网页中使用js，SetVariable设置flashobject中的变量，代码如：

// "HtmlToSwf"为网页中的flashobject IDHtmlToSwf.SetVariable("_root.info_str","Happy Newyear");

方法二：使用FlashVars，以下主要介绍FlashVars的用法。使用FlashVars后嵌入HTML的flashobject代码如下：

通过上面的代码，在SWF(FlashVars.swf)中就可以直接获取foo、program、language变量数据。FlashVars.fla获取FlashVars参数的代码如下：

// 创建三个文本字段_root.createTextField("foo_txt",1,0,0,16,16);_root.createTextField("program_txt",2,0,32,16,16);_root.createTextField("language_txt",3,0,64,16,16);foo_txt.autoSize = true;foo_txt.border = true;program_txt.autoSize = true;program_txt.border = true;language_txt.autoSize = true;language_txt.border = true;// 获取FlashVars变量foo_txt.text = "HTML中的foo参数："+foo;program_txt.text = "HTML中的program参数："+program;language_txt.text = "HTML中的language参数："+language;

三、两者的有效结合。
在HTML网页中使用js获取参数，然后将获取的参数作为FlashVars写入flashobject传递给swf。代码如下：

使用方法：

方法一、js嵌入

直接copy下面代码，修改其中红色部分，即：swf_width、swf_height、texts、files 参数

其中：

幸福的脚丫预告片

http://www.ruochi.com/product/vcastr/flv/happy_feet.flv

http://www.ruochi.com/product/vcastr2/vcastr22.swf

flv播放器 Vcastr 2.0 下载

http://www.ruochi.com/product/vcastr2/vcastr22.zip

方法二、简单直接传递影片地址

方法三、读取影片xml

其中：http://www.ruochi.com/product/vcastr/vcastr.xml 是播放列表的xml地址

高级选项

<http://www.ruochi.com/product/vcastr2/vcastr22.swf?参数A=111&参数B=222&....>

在以上"参数A=111&参数B=222"部分添加参数，使用参数=值的格式，多个参数用&连接，参数数量不限制，注意有2个红色部分http://www.ruochi.com/product/vcastr2/vcastr22.swf地方需要修改

例如：

value="http://www.ruochi.com/product/vcastr2/vcastr22.swf?vcastr_file=http://www.ruochi.com/product/vcastr/flv/happy_feet.flv&vcastr_title=幸福的脚丫预告片&BarColor=0xFF6600&BarPosition=1"

表示影片地址是"http://www.ruochi.com/product/vcastr/flv/happy_feet.flv"，标题是"变形金刚预告片"，控制栏颜色是0xFF6600，控制栏位置在下方。

参数名称	参数说明	默认值
vcastr_file	方法2传递影片flv文件地址参数，多个使用\|分开	空
vcastr_title	影片标题参数，多个使用\|分开，与方法2配合使用	空
vcastr_xml	方法3 传递影片flv文件地址参数，样板参考 http://www.ruochi.com/product/vcastr2/vcastr.xml	vcastr.xml
IsAutoPlay	影片自动播放参数：0表示不自动播放，1表示自动播放	0
IsContinue	影片连续播放参数：0表示不连续播放，1表示连续循环播	1
IsRandom	影片随机播放参数：0表示不随机播放，1表示随机播放	0
DefaultVolume	默认音量参数：0-100 的数值，设置影片开始默认音量大小	100
BarPosition	控制栏位置参数：0表示在影片上浮动显示，1表示在影片下方显示	0
IsShowBar	控制栏显示参数：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示	2
BarColor	播放控制栏颜色，颜色都以0x开始16进制数字表示	0x000033
BarTransparent	播放控制栏透明度	60
GlowColor	按键图标颜色，颜色都以0x开始16进制数字表示	0x66ff00
IconColor	鼠标悬停时光晕颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
TextColor	播放器文字颜色，颜色都以0x开始16进制数字表示	0xFFFFFF
LogoText	可以添加自己网站名称等信息(英文)	空
LogoUrl	可以从外部读取logo图片，注意自己调整logo大小，支持图片格式和swf格式	空
EndSwf	影片播放结束后,从外部读取swf文件，可以添加相关影片信息，影片分享等信息，需自己制作	空
BeginSwf	影片开始播放之前,从外部读取swf文件，可以添加广告，或者网站信息，需自己制作	空
IsShowTime	是否显示时间 : 0表示不显示时间，1表示显示时间	1
BufferTime	影片缓冲时间，单位（秒）	2

常见问题

posted @ 2007-10-08 08:58 dayang Views(545) Comments(0) 收藏举报

刷新页面返回顶部

dayang