论坛风格切换
  • 2852阅读
  • 2回复

[电脑服务]教你如何在网页中插入flv播放器代码 [复制链接]

上一主题 下一主题
 

发帖
7842
只看楼主 倒序阅读 使用道具 楼主  发表于: 2009-10-28
— 本帖被 Admin 从 电脑服务 移动到本区(2013-01-09) —
教你如何在网页中插入flv播放器代码 qmpT G:+  
[K #$W  
第一种: _hV34:1F  
z@IG"D  
利用GOOGLE的FLV播放器在线播放FLV文件的代码 <FkaH8,7  
-]KgLgJ  
首先知道Google播放器的地址: dY$nw  
U*K4qJ6U  
http://video.google.com/googleplayer.swf pSQ2wjps  
?pJ2"/K   
然后找到 flv文件的地址,例如: t9<BQg  
OcF_x/#  
http://v1.ouou.com/BAB51A4D332E42A1/_01/data/video_source/videos/oubj/2007/02/01/1170295437055.flv Z*3RI5)dx  
1 M!4hM Q  
然后找到你想要在开始播放前显示的缩略图例如: J ##a;6@  
4IZAJqw(*  
hO> q|+mC  
X n0HJ^"_  
最终形成两种代码: ^-?^iWQ G  
]v:,<=S  
有缩略图点击播放: %6lGRq{/?  
V8F! o  
<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> %6fnL~ A  
[r 7Hcb  
有缩略图自动播放: -T+YMAFU_  
tlO=>  
<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> :fRta[  
k2->Z);X  
缩率图也可以不要: 5D/Td#T04  
Jityb}Z"  
<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> 4V[(RXc/  
oD2! [&  
http://video.google.com/googleplayer.swf?videoUrl=http://v1.ouou.com/BAB51A4D332E42A1/_01/data/video_source/videos/oubj/2007/02/01/1170295437055.flv BIMX2.S1o  
.mrv"k\<  
第二种: CaCApL  
BPW.&2?<  
在 Dreamweaver 的“文档”窗口中打开 index.html 页面,插入一个三列的表格,在由三列组成的表格的中间一列中放置的图形之上单击一次。 >j]Gz-wC  
n>JJ Xw,,  
nO6UlY  
%Jl6e}!  
1180665820673.jpg (16.51 KB) #QlxEs#%  
p?Ux1S  
2007-11-7 13:42 E5S(1Z}]p{  
a m5;B`}q  
=zAFsRoD_B  
  选择“插入”>“媒体”>“Flash 视频”。 =4x6v<  
[%LGiCU]  
  在“插入 Flash 视频”对话框中,从“视频类型”弹出式菜单中选择“渐进式下载视频”。 关于… :twp95{R1  
tAjT-CXg  
  关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令,可将 Flash 视频内容插入 Web 页面,而无需使用 Flash 创作工具。该命令可以插入 Flash 组件;当您在浏览器中查看它时,它显示您选择的 Flash 视频内容以及一组播放控件。 ?-&k?I  
3?aM\z;  
  “插入 Flash 视频”命令提供以下选项,用于将视频内容发送给站点访问者: nO`[C=|  
fMf;  
  累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上,然后播放。但是,与传统的“下载并播放”视频传送方法不同,累进式下载允许在下载完成之前就开始播放视频文件。 }duqX R  
&/' O?HWl  
  流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频,您必须具有对 Macromedia Flash Communication Server 的访问权限,这是唯一可对 Flash 视频内容进行流处理的服务器。 bp8sZK"z  
8}[<3K%*g  
  在 URL 文本框中,指定 cafe_townsend_home.flv 文件的相对路径,方法是单击“浏览”,浏览至 cafe_townsend_home.flv 文件(位于站点的 cafe_townsend 根文件夹中),并选择该 FLV 文件。 76[ qFz  
,>(X}Q  
ok,O/|E}?  
6&E[hvu  
1180665839353.jpg (17.81 KB) `TF3Ho\MC  
>nehyo:#  
2007-11-7 13:42 nY;Sk#9  
aTHf+;  
Ro$*bN6p  
  从“外观”弹出式菜单中选择 Halo Skin 2。 O '#FVZ.g  
KpG'E  
  所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。 o\tw)_ >  
'9vsv\A&  
  在“宽度”和“高度”文本框中,执行以下操作: (`Y;U(n  
F_@` <d!  
  在“宽度”文本框中,键入 180。 yWc%z6dXC  
\g]rOYW  
  在“高度”文本框中,键入 135 ,然后按 Enter 键。 'Eia=@  
}<2|6 {  
-k>k<bDAI  
d/TFx  
1180665846492.jpg (22.06 KB) K7x;/O  
wk'(g_DP  
2007-11-7 13:42 zBI2cB8;P  
-*&aE~Cs  
kN<;*jHV  
  提示 A Ef@o+A  
,lCFe0>k!=  
  单击“检测大小”以确定 FLV 文件的准确宽度和高度。但是,有时 Dreamweaver 无法确定 FLV 文件的尺寸大小。在这种情况下,必须手动输入宽度和高度值。 }3 ~*/30V  
HIj:?y  
  “宽度”和“高度”文本框中的值以像素为单位指定 FLV 文件的宽度和高度。可以任意调整这些值以更改 Web 页面上的 Flash 视频的大小。增加视频的尺寸时,视频的图片品质通常会下降。 S~z$ =IiB  
-=:tlH n  
  注意 Vd.XZ*}r*  
fUq}dAs*K  
  “包括外观”是 FLV 文件的宽度和高度与所选外观的宽度和高度的加和。 [G+@[9hn%  
GdScYAC   
  其余选项保留默认的选择值: h+q#|N  
-{?xl*D  
  限制高宽比保持 Flash 视频组件的宽度和高度之间的高宽比不变。默认情况下会选择此选项。 7]5+%[Dg!  
Wvd-be  
  自动播放指定在 Web 页面打开时是否播放视频。默认情况下取消选择该选项。 *.$ov<E.  
!: vQg+S  
  自动重新播放指定播放控件在视频播放完之后是否返回起始位置。默认情况下取消选择该选项。 w5-^Py  
~nj+" d]  
  单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页面。 WzdlrkD  
|d42?7}  
  “插入 Flash 视频”命令生成一个视频播放器 SWF 文件和一个外观 SWF 文件,它们用于在 Web 页面上显示 Flash 视频内容。(您可能需要单击“文件”面板中的“刷新”按钮来查看新的文件。)这些文件与 Flash 视频内容(在此情况下,为 cafe_townsend 根文件夹)所添加到的 HTML 文件存储在同一目录中。当您上传包含 Flash 视频内容的 HTML 页面时,Dreamweaver 将这些文件作为相关文件上传(只要单击“要上传相关文件?”对话框中的“是”)。 .,thdqOO  
iH>JR[A  
  保存该页,然后可以测试下效果。 rmX5-k  
评价一下你浏览此帖子的感受

精彩

感动

搞笑

开心

愤怒

无聊

灌水
十年磨一剑,鼎力打造个人事业平台,我的事业我做主,做人生命运的掌舵手.做自己人生的设计师.
培养鹰一样的个人,打造雁一般的团队!

发帖
7842
只看该作者 沙发  发表于: 2009-10-28
在 Dreamweaver 的“文档”窗口中打开 index.html 页面,插入一个三列的表格,在由三列组成的表格的中间一列中放置的图形之上单击一次。  OWN|W,  
S[rfcL"  
  1mEW]z  
!P6y_Frpe  
  选择“插入”>“媒体”>“Flash 视频”。 HqOnZ>D  
m1p% ,  
  在“插入 Flash 视频”对话框中,从“视频类型”弹出式菜单中选择“渐进式下载视频”。 关于… aO<H!hK  
M9yqJPS}B  
  关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令,可将 Flash 视频内容插入 Web 页面,而无需使用 Flash 创作工具。该命令可以插入 Flash 组件;当您在浏览器中查看它时,它显示您选择的 Flash 视频内容以及一组播放控件。 (ke<^sv7!  
!VfVpi+-  
  “插入 Flash 视频”命令提供以下选项,用于将视频内容发送给站点访问者: ,b+Hy`t  
I= z+`o8  
  累进式下载视频将 Flash 视频 (FLV) 文件下载到站点访问者的硬盘上,然后播放。但是,与传统的“下载并播放”视频传送方法不同,累进式下载允许在下载完成之前就开始播放视频文件。 FQJFq6l  
BIvz55g  
  流视频将 Flash 视频内容进行流处理并立即在 Web 页面中播放。若要在 Web 页面中启用流视频,您必须具有对 Macromedia Flash Communication Server 的访问权限,这是唯一可对 Flash 视频内容进行流处理的服务器。 jd+HIR  
;ov}%t>UD  
  在 URL 文本框中,指定 cafe_townsend_home.flv 文件的相对路径,方法是单击“浏览”,浏览至 cafe_townsend_home.flv 文件(位于站点的 cafe_townsend 根文件夹中),并选择该 FLV 文件。  b` 9Zin  
a}Jy o!.  
  gr>FLf   
\\"CgH-  
  从“外观”弹出式菜单中选择 Halo Skin 2。 wp/x|AV  
4 >D5t)254  
  所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。 !\&4,l(  
2[Qzx%Vp  
  在“宽度”和“高度”文本框中,执行以下操作: PO2]x:  
3bugVJ9 3  
  在“宽度”文本框中,键入 180。 6~k qU4lL  
E?m W4?  
  在“高度”文本框中,键入 135 ,然后按 Enter 键。  i079 V  
M?$tHA~OX  
  NXE1v~9V  
Dt]FmU  
  提示 .9!&x0;  
Y}x_ud,  
  单击“检测大小”以确定 FLV 文件的准确宽度和高度。但是,有时 Dreamweaver 无法确定 FLV 文件的尺寸大小。在这种情况下,必须手动输入宽度和高度值。 HOPsp  
Gg7ZSB 7  
  “宽度”和“高度”文本框中的值以像素为单位指定 FLV 文件的宽度和高度。可以任意调整这些值以更改 Web 页面上的 Flash 视频的大小。增加视频的尺寸时,视频的图片品质通常会下降。 m]\d9%-AT&  
C|ou7g4'p  
  注意 61TL]S8  
Lr>4~1:`  
  “包括外观”是 FLV 文件的宽度和高度与所选外观的宽度和高度的加和。 ~1{~iB2G  
! }awlv;  
  其余选项保留默认的选择值: 1T3YFt@&I  
0`WZ  
  限制高宽比保持 Flash 视频组件的宽度和高度之间的高宽比不变。默认情况下会选择此选项。 y+VR D  
W?@+LQa??  
  自动播放指定在 Web 页面打开时是否播放视频。默认情况下取消选择该选项。 AkqGk5e ^  
-1!s8G  
  自动重新播放指定播放控件在视频播放完之后是否返回起始位置。默认情况下取消选择该选项。 y|.dM.9V  
_..5G7%#%  
  单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页面。 %__.-;)o  
Od]wh  
  “插入 Flash 视频”命令生成一个视频播放器 SWF 文件和一个外观 SWF 文件,它们用于在 Web 页面上显示 Flash 视频内容。(您可能需要单击“文件”面板中的“刷新”按钮来查看新的文件。)这些文件与 Flash 视频内容(在此情况下,为 cafe_townsend 根文件夹)所添加到的 HTML 文件存储在同一目录中。当您上传包含 Flash 视频内容的 HTML 页面时,Dreamweaver 将这些文件作为相关文件上传(只要单击“要上传相关文件?”对话框中的“是”)。 495(V(+5  
{O[ !*+O  
  保存该页,然后可以测试下效果。
十年磨一剑,鼎力打造个人事业平台,我的事业我做主,做人生命运的掌舵手.做自己人生的设计师.
培养鹰一样的个人,打造雁一般的团队!

发帖
7842
只看该作者 板凳  发表于: 2009-10-28
在网页中插入Flv视频文件详细图解
视力保护色 -         首先说下这个Flash视频,也就是Flash Video。 4?&CK  
zzBqb\Ky  
为什么要用这个?很显然是需要在网页中播放视频。我们都知道一般的视频文件,要不就是asf格式、wmv格式使用mediaplayer进行播放,要不就是rm格式用RealPlayer播放。 ?{6[6T  
;]h:63 S  
这样的问题是,格式的不同就需要选择不同的播放器,这对于本地计算机没有安装相应播放器的用户来说,这些视频根本无法收看。 A,#hYi=-,  
nnO@$T  
并且,还由于这些文件的容量过大,下载慢,查看也不很流畅。 i0~L[v9l<  
m4@w M?  
所以,解决播放器和容量的问题,运用Flash有个方法:将各类视频文件转换成Flash视频文件。 Y3wL EG%,:  
! J@pox-t  
播放器有嵌入在浏览器中的Flash播放器,这好像每个人的机器都有的吧,解决了其它一般视频文件需要挑选播放器的问题,当然这也就是Flash的优势。 ma4r/8Q  
mkmVDRK  
容量方面,从FlashMX2004起就支持了转换为Flash视频的功能,经过相关设置后,可缩小原有视频的容量,最终转换的文件扩展名是FLV。 ( G6N@>V(`  
[Z?vC  
一句话:最终获得的是个FLV即Flash视频文件。 F1o"H/:n  
O/R>&8R$  
那么Flv文件如何在网页中显示呢?Flv文件也只是视频文件,它的播放同样是需要播放器的,而这个播放器就是FlashPlayer。 -Qco4>Z8  
> 'KQL?!F  
第一种方法: } "ts  
s97L/iH  
将本地Flv文件导入部署到Flash软件中,以库中元素的形式而存在,将该元素拖入场景,调整位置后,发布为swf文件即可。 oWc +i U(  
V 5ihplAk  
注意以上文件在本地测试没有问题,但上传到网络时,其他浏览者是无法查看的,因为当前的播放器调用的是本地Flv文件。 ,o j\=2  
N[,/VCW  
所以,需要调整路径。首先需要将Flv文件上传到某个网络空间,并且获得其准确的路径地址。 0=J69Yd  
DK;/eZe  
其次,打开Flash软件,选择Flv组件,Alt+F7打开“组件检查器”,将“ContentPath”中的路径由本地地址替换为网络绝对地址 4.mbW  
再来将该Flash发布导出swf文件。这时候才可以任意使用该swf文件,如同插入其他一般Flash文件一样。 &U/~*{  
TS<uBX  
测试:点这里 A,s .<TG  
cM'5m  
IN9o$CZ:  
当然,此时还会有个播放器控制按钮相关的一个swf文件,记得要附带着。 }tT*Ch?u  
D+  **o  
第二种方式: M+TF0c  
QWGFXy,=1  
在第二种方式介绍之前,你有没有发觉第一种方式有点麻烦?因为我们是需要将视频插入到网页的,现在却需要先制作一个swf播放器文件,其中还有些曲折。然后再打开网页编辑器将swf文件插入。 w]0jq U6  
eL!G, W  
正如我们在网页中插入Flash按钮一样,先要用Flash制作按钮,然后将该Flash插入到网页。但你有没有注意到Dreamweaver提供了直接插入Flash按钮的功能,也就是说:你不必去制作Flash按钮,直接通过DW中该途径就能很快完成自己的需要。 *8CE0;p'k  
5{|\h}  
那么,同样,现在的Dreamweaver8支持了这一功能:插入Flash视频 +nslS:(  
6.'+y1yS)  
你不需要去制作播放视频的swf文件,只需要提供一个Flv视频文件即可。这也就是我所要说的重点。 aw:0R=S,>  
R OQIw  
打开插入面板,选择常用类别,单击媒体按钮后的向下箭头,从下拉列表中选择“Flash视频” )Z 3fytY  
f?C !Br}  
弹出的对话框中,可使用网络上已经固定的Flv文件地址,还可以是选择浏览本地的Flv文件,但要注意该Flv文件应是你所定义的DW当前该站点中的,以获得相对路径,便于之后所有文件一起上传后,一样能寻找到该文件。 ;EfMTI}6K  
wbId}!  
不出所料,设置完毕后,DW8自动生成了FLVPlayer_Progressive.swf播放器文件和Halo_Skin_3.swf控制器皮肤文件。 KhV; />(  
MXhRnVz"W  
那么,最后你上传网页时就是4个文件一起上传。 ^5~[G%G4  
y0' "  
OK,调试个地址看看:http://www.cnbruce.com/flv/ {N,w5!cP  
*ha9Vq@X  
第三种方式:  0-+`{j  
!kfnqe?|  
如果你还是觉得文件比较的多,只要要一个播放器和一个Flv文件就了事。那么,借用下Google的这个swf播放器googleplayer.swf,自己只需要提供flv路径就可以了,除flv外,googleplayer.swf还支持mp3文件。 8Lpy`He  
DD hc^(  
具体如何使用google的这个播放器,Danger同学介绍了个: http://www.dengjie.com/weblog/comments.asp?post_id=1066 ZvO:!u0+"  
\:?H_^^ d  
并且还提供了个在线工具  /tc/?id=1&files=2007-4/27/2007427144333461.swf  Kn9 ,N@bU_  
BPd]L=,/  
a[8_ O-   
以下显示的则是通过上面的工具设置的,采用的Google的播放器。 | Y1<P^  
  -Q8pWtt  
4[&6yHJ^  
" ,rA  
:PaFC{O)*  
rbP3&L  
*WgP+"h  
0,;FiOp  
jr:LLn#}  
k\}qCDs  
;mb 6i_  
afc?a-~Z  
hTn }AsfLY  
Z{n7z$s*  
-}juj;IVv  
vP'R7r2Yx  
EH$wW l^  
q& Vt*  
{UYqRfgbZ  
z[ ;{p.W  
6C/D&+4  
$P@P}%2  
LVLh&9  
W:>RstbnMG  
|R*fw(=W  
8YN+ \  
I>-jKSkwc  
  aV(*BE/@F  
  Ec6{?\  
当然,毕竟这个播放器是Google的,只要通过URL的参数选项即可播放相应的该视频文件。 MOmp{@  
I/)dXk~  
如果能脱离第一、第二种方式,使用第三种方法又不想使用Google的播放器,那只有自己来写一个swf播放器了。Danger似乎已经完成。 [* > @hx  
^HL#)fK2I  
我的方法则是把google的该播放器下载了下来,然后放到自己的空间里面 ,接着就来使用了  pp[? k}@  
十年磨一剑,鼎力打造个人事业平台,我的事业我做主,做人生命运的掌舵手.做自己人生的设计师.
培养鹰一样的个人,打造雁一般的团队!