教你如何在网页中插入flv播放器代码

蒋金阳

教你如何在网页中插入flv播放器代码

第一种：

利用GOOGLE的FLV播放器在线播放FLV文件的代码

首先知道Google播放器的地址：

http://video.google.com/googleplayer.swf

然后找到 flv文件的地址，例如：

http://v1.ouou.com/BAB51A4D332E4 ... 1/1170295437055.flv

然后找到你想要在开始播放前显示的缩略图例如：



最终形成两种代码：

有缩略图点击播放：

<embed src="http://video.google.com/googleplayer.swf?videoUrl=http://music1.hexun.com/Save/Video/2006/1206/126/M_7E83044DFF2983F3.FLV&thumbnailUrl=http://www.eooeo.com/IMAGES1/top2.jpg&playerMode=normal" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="450" height="370" autostart="true"></embed>

有缩略图自动播放：

<embed src="http://video.google.com/googleplayer.swf?videoUrl=http://music1.hexun.com/Save/Video/2006/1206/126/M_7E83044DFF2983F3.FLV&thumbnailUrl=http://www.eooeo.com/IMAGES1/top2.jpg&playerMode=normal&autoPlay=true" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="450" height="370" autostart="true"></embed>

缩率图也可以不要：

<embed src="http://video.google.com/googleplayer.swf?videoUrl=http://music1.hexun.com/Save/Video/2006/1206/126/M_7E83044DFF2983F3.FLV" type="application/x-shockwave-flash" wmode="transparent" quality="high" width="450" height="370" autostart="true"></embed>

http://video.google.com/googlepl ... 1/1170295437055.flv

第二种：

在 Dreamweaver 的“文档”窗口中打开 index.html 页面，插入一个三列的表格，在由三列组成的表格的中间一列中放置的图形之上单击一次。



1180665820673.jpg (16.51 KB)

2007-11-7 13:42


　　选择“插入”>“媒体”>“Flash 视频”。

　　在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 关于…

　　关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示您选择的 Flash 视频内容以及一组播放控件。

　　“插入 Flash 视频”命令提供以下选项，用于将视频内容发送给站点访问者：

　　累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。

　　流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频，您必须具有对 Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。

　　在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相对路径，方法是单击“浏览”，浏览至 cafe_townsend_home.flv 文件（位于站点的 cafe_townsend 根文件夹中），并选择该 FLV 文件。



1180665839353.jpg (17.81 KB)

2007-11-7 13:42


　　从“外观”弹出式菜单中选择 Halo Skin 2。

　　所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。

　　在“宽度”和“高度”文本框中，执行以下操作：

　　在“宽度”文本框中，键入 180。

　　在“高度”文本框中，键入 135 ，然后按 Enter 键。



1180665846492.jpg (22.06 KB)

2007-11-7 13:42


　　提示

　　单击“检测大小”以确定 FLV 文件的准确宽度和高度。但是，有时 Dreamweaver 无法确定 FLV 文件的尺寸大小。在这种情况下，必须手动输入宽度和高度值。

　　“宽度”和“高度”文本框中的值以像素为单位指定 FLV 文件的宽度和高度。可以任意调整这些值以更改 Web 页面上的 Flash 视频的大小。增加视频的尺寸时，视频的图片品质通常会下降。

　　注意

　　“包括外观”是 FLV 文件的宽度和高度与所选外观的宽度和高度的加和。

　　其余选项保留默认的选择值：

　　限制高宽比保持 Flash 视频组件的宽度和高度之间的高宽比不变。默认情况下会选择此选项。

　　自动播放指定在 Web 页面打开时是否播放视频。默认情况下取消选择该选项。

　　自动重新播放指定播放控件在视频播放完之后是否返回起始位置。默认情况下取消选择该选项。

　　单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页面。

　　“插入 Flash 视频”命令生成一个视频播放器 SWF 文件和一个外观 SWF 文件，它们用于在 Web 页面上显示 Flash 视频内容。（您可能需要单击“文件”面板中的“刷新”按钮来查看新的文件。）这些文件与 Flash 视频内容（在此情况下，为 cafe_townsend 根文件夹）所添加到的 HTML 文件存储在同一目录中。当您上传包含 Flash 视频内容的 HTML 页面时，Dreamweaver 将这些文件作为相关文件上传（只要单击“要上传相关文件？”对话框中的“是”）。

　　保存该页，然后可以测试下效果。

蒋金阳

在 Dreamweaver 的“文档”窗口中打开 index.html 页面，插入一个三列的表格，在由三列组成的表格的中间一列中放置的图形之上单击一次。

  

　　选择“插入”>“媒体”>“Flash 视频”。

　　在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 关于…

　　关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件；当您在浏览器中查看它时，它显示您选择的 Flash 视频内容以及一组播放控件。

　　“插入 Flash 视频”命令提供以下选项，用于将视频内容发送给站点访问者：

　　累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。

　　流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频，您必须具有对 Macromedia Flash Communication Server 的访问权限，这是唯一可对 Flash 视频内容进行流处理的服务器。

　　在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相对路径，方法是单击“浏览”，浏览至 cafe_townsend_home.flv 文件（位于站点的 cafe_townsend 根文件夹中），并选择该 FLV 文件。



　　从“外观”弹出式菜单中选择 Halo Skin 2。

　　所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。

　　在“宽度”和“高度”文本框中，执行以下操作：

　　在“宽度”文本框中，键入 180。

　　在“高度”文本框中，键入 135 ，然后按 Enter 键。



　　提示

　　单击“检测大小”以确定 FLV 文件的准确宽度和高度。但是，有时 Dreamweaver 无法确定 FLV 文件的尺寸大小。在这种情况下，必须手动输入宽度和高度值。

　　“宽度”和“高度”文本框中的值以像素为单位指定 FLV 文件的宽度和高度。可以任意调整这些值以更改 Web 页面上的 Flash 视频的大小。增加视频的尺寸时，视频的图片品质通常会下降。

　　注意

　　“包括外观”是 FLV 文件的宽度和高度与所选外观的宽度和高度的加和。

　　其余选项保留默认的选择值：

　　限制高宽比保持 Flash 视频组件的宽度和高度之间的高宽比不变。默认情况下会选择此选项。

　　自动播放指定在 Web 页面打开时是否播放视频。默认情况下取消选择该选项。

　　自动重新播放指定播放控件在视频播放完之后是否返回起始位置。默认情况下取消选择该选项。

　　单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页面。

　　“插入 Flash 视频”命令生成一个视频播放器 SWF 文件和一个外观 SWF 文件，它们用于在 Web 页面上显示 Flash 视频内容。（您可能需要单击“文件”面板中的“刷新”按钮来查看新的文件。）这些文件与 Flash 视频内容（在此情况下，为 cafe_townsend 根文件夹）所添加到的 HTML 文件存储在同一目录中。当您上传包含 Flash 视频内容的 HTML 页面时，Dreamweaver 将这些文件作为相关文件上传（只要单击“要上传相关文件？”对话框中的“是”）。

　　保存该页，然后可以测试下效果。

蒋金阳

在网页中插入Flv视频文件详细图解

视力保护色 -         

首先说下这个Flash视频，也就是Flash Video。

为什么要用这个？很显然是需要在网页中播放视频。我们都知道一般的视频文件，要不就是asf格式、wmv格式使用mediaplayer进行播放，要不就是rm格式用RealPlayer播放。

这样的问题是，格式的不同就需要选择不同的播放器，这对于本地计算机没有安装相应播放器的用户来说，这些视频根本无法收看。

并且，还由于这些文件的容量过大，下载慢，查看也不很流畅。

所以，解决播放器和容量的问题，运用Flash有个方法：将各类视频文件转换成Flash视频文件。

播放器有嵌入在浏览器中的Flash播放器，这好像每个人的机器都有的吧，解决了其它一般视频文件需要挑选播放器的问题，当然这也就是Flash的优势。

容量方面，从FlashMX2004起就支持了转换为Flash视频的功能，经过相关设置后，可缩小原有视频的容量，最终转换的文件扩展名是FLV。

一句话：最终获得的是个FLV即Flash视频文件。

那么Flv文件如何在网页中显示呢？Flv文件也只是视频文件，它的播放同样是需要播放器的，而这个播放器就是FlashPlayer。

第一种方法：

将本地Flv文件导入部署到Flash软件中，以库中元素的形式而存在，将该元素拖入场景，调整位置后，发布为swf文件即可。

注意以上文件在本地测试没有问题，但上传到网络时，其他浏览者是无法查看的，因为当前的播放器调用的是本地Flv文件。

所以，需要调整路径。首先需要将Flv文件上传到某个网络空间，并且获得其准确的路径地址。

其次，打开Flash软件，选择Flv组件，Alt+F7打开“组件检查器”，将“ContentPath”中的路径由本地地址替换为网络绝对地址

再来将该Flash发布导出swf文件。这时候才可以任意使用该swf文件，如同插入其他一般Flash文件一样。

测试：点这里

当然，此时还会有个播放器控制按钮相关的一个swf文件，记得要附带着。

第二种方式：

在第二种方式介绍之前，你有没有发觉第一种方式有点麻烦？因为我们是需要将视频插入到网页的，现在却需要先制作一个swf播放器文件，其中还有些曲折。然后再打开网页编辑器将swf文件插入。

正如我们在网页中插入Flash按钮一样，先要用Flash制作按钮，然后将该Flash插入到网页。但你有没有注意到Dreamweaver提供了直接插入Flash按钮的功能，也就是说：你不必去制作Flash按钮，直接通过DW中该途径就能很快完成自己的需要。

那么，同样，现在的Dreamweaver8支持了这一功能：插入Flash视频

你不需要去制作播放视频的swf文件，只需要提供一个Flv视频文件即可。这也就是我所要说的重点。

打开插入面板，选择常用类别，单击媒体按钮后的向下箭头，从下拉列表中选择“Flash视频”

弹出的对话框中，可使用网络上已经固定的Flv文件地址，还可以是选择浏览本地的Flv文件，但要注意该Flv文件应是你所定义的DW当前该站点中的，以获得相对路径，便于之后所有文件一起上传后，一样能寻找到该文件。

不出所料，设置完毕后，DW8自动生成了FLVPlayer_Progressive.swf播放器文件和Halo_Skin_3.swf控制器皮肤文件。

那么，最后你上传网页时就是4个文件一起上传。

OK，调试个地址看看：http://www.cnbruce.com/flv/

第三种方式：

如果你还是觉得文件比较的多，只要要一个播放器和一个Flv文件就了事。那么，借用下Google的这个swf播放器googleplayer.swf，自己只需要提供flv路径就可以了，除flv外，googleplayer.swf还支持mp3文件。

具体如何使用google的这个播放器，Danger同学介绍了个： http://www.dengjie.com/weblog/comments.asp?post_id=1066

并且还提供了个在线工具  /tc/?id=1&files=2007-4/27/2007427144333461.swf

以下显示的则是通过上面的工具设置的，采用的Google的播放器。

当然，毕竟这个播放器是Google的，只要通过URL的参数选项即可播放相应的该视频文件。

如果能脱离第一、第二种方式，使用第三种方法又不想使用Google的播放器，那只有自己来写一个swf播放器了。Danger似乎已经完成。

我的方法则是把google的该播放器下载了下来，然后放到自己的空间里面 ，接着就来使用了