在HTML中添加视频的代码

最新推荐文章于 2024-03-04 09:36:18 发布

人类观察所主任

最新推荐文章于 2024-03-04 09:36:18 发布

阅读量6.6w

点赞数 3

分类专栏： HTML 文章标签： html javascript flash 浏览器 object iframe

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在HTML中添加视频的代码

自动载入视频

　　与音乐的播放一样，我们可以使用EMBED标签播放视频，

　　　　<EMBED SRC="http://blog.163.com/qianxue126@126/blog/视频文件地址">

属性有：

SRC="http://blog.163.com/qianxue126@126/blog/FILENAME"	设定文件的路径
AUTOSTART=TRUE/FALSE	是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE
LOOP=TRUE/FALSE	设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。
STARTIME="分:秒"	设定开始播放时间，如20秒后播放写为STARTIME=00:20
VOLUME=0-100	设定音量的大小。如果没设定的话，就用系统的音量。
WIDTH HEIGHT	设定控制面板的大小

例：
*************************************

<body>
<B><font size=4>播放视频WINDOWS95</font></B>
<P>
　　<EMBED SRC="http://blog.163.com/qianxue126@126/blog/welcome.avi" autostart=false loop=false width=350 height=250>
</P>
</body>
</html>

swf文件中参数param用法介绍

<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="580" height="110">
<param name="_cx" value="10372"> 
<param name="_cy" value="2355"> 
<param name="FlashVars" value="-1"> 
<param name="Movie" value="swf.swf"> 
<param name="Src" value="1.swf"> 
<param name="WMode" value="Transparent"> 
<param name="Play" value="-1"> 
<param name="Loop" value="-1"> 
<param name="Quality" value="High"> 
<param name="SAlign" value> 
<param name="Menu" value="0"> 
<param name="Base" value> 
<param name="AllowScriptAccess" value="always"> 
<param name="Scale" value="ShowAll"> 
<param name="DeviceFont" value="0"> 
<param name="EmbedMovie" value="0"> 
<param name="BGColor" value> 
<param name="SWRemote" value> 
<embed src="http://blog.163.com/qianxue126@126/blog/1.swf" width="580" height="110" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" menu="false"></embed>
</object>

参数和属性
下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的用于显示 Flash 内容的 HTML 时，可以参考此列表。除非特别说明，否则所有条目都同时适用于 object 标记和 embed 标记。可选条目也在此列出。Internet Explorer 可以识别用于 object 标记的参数，而 Netscape 则可以识别用于 embed 标记的参数。属性既可用于 object 标记，也可用于 embed 标记。当自定义模板时，可以用此处列出的模板变量替代相应的值。请参阅自定义 HTML 发布模板。
注意：此部分中列出的属性和参数特意以小写字母显示，以符合 XHTML 标准。
devicefont 属性/参数
值: true | false
模板变量：$DE
说明:
（可选）对于未选定“设备字体”选项的静态文本对象，指定是否仍使用设备字体进行绘制（如果操作系统提供了所需字体）。
src 属性
值: movieName.swf
模板变量：$MO
说明 : 指定要加载的 SWF 文件的名称。仅适用于 embed。
movie 参数
值: movieName.swf
模板变量：$MO
说明: 指定要加载的 SWF 文件的名称。仅适用于 object。
classid 属性
值: clsid:D27cdb6e-ae6d-11cf-96b8-444553540000
说明: 标识浏览器的 ActiveX 控件。输入的值必须与上面的显示完全一致。仅适用于 object。
width 属性
值: n 或 n%
模板变量：$WI
说明:以像素值或浏览器窗口的百分比值来指定应用程序的宽度。
height 属性
值: n 或 n%
模板变量：$HE
说明: 以像素值或浏览器窗口的百分比值来指定应用程序的高度。
注意：因为 Flash 应用程序是可缩放的，所以只要高宽比保持不变，不论以任何尺寸播放，它们的品质都不会降低。（例如，以下尺寸的高宽比都是 4:3：640 x 480 像素、320 x 240 像素和 240 x 180 像素。）
codebase 属性
值: active.macromedia.com/flash7/cabs/swflash.cab#version=7,0,0,0
说明: 标识 Flash Player ActiveX 控件的位置，以便在尚未安装该控件时，浏览器可以自动下载它。输入的值必须与上面的显示完全一致。仅适用于 object。
pluginspage 属性
值: www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash
说明: 标识 Flash Player 插件的位置，以便在尚未安装该插件时，用户可以下载它。输入的值必须与上面的显示完全一致。仅适用于 embed 。
swliveconnect 属性
值: true | false
说明: （可选）指定第一次加载 Flash Player 时浏览器是否应启动 Java。如果忽略此属性，默认值为 false。如果在同一页面上同时使用 JavaScript 和 Flash，Java 必须处于运行状态，FSCommand() 函数才能起作用。但是，如果您运行 JavaScript 只是为了检测浏览器或用于其他与 fscommand() 动作无关的目的，则可以通过将 SWLIVECONNECT 设置为 false，从而防止 Java 启动。当没有将 JavaScript 和 Flash 一起使用时，也可以通过将 SWLIVECONNECT 属性明确设置为 true，强制 Java 启动。启动 Java 会显著增加启动 SWF 文件所需的时间，因此，只有在必要时才应将此标记设置为 true。仅适用于 embed。
使用 fscommand() 动作可从独立的放映文件中启动 Java。
play 属性/参数
值: true | false
模板变量：$PL
说明:（可选）指定应用程序是否在浏览器中加载时就开始播放。如果您的 Flash 应用程序是交互式的，则可以让用户通过单击按钮或执行某些其他任务来开始播放。在这种情况下，将 play 属性设置为 false 可禁止应用程序自动开始播放。如果忽略此属性，默认值为 true。
loop 属性/参数
值: true | false
模板变量：$LO
说明: （可选）指定 Flash 内容在它到达最后一帧后是无限制重复播放还是停止。如果忽略此属性，默认值为 true。
quality 属性/参数
值: low | medium | high | autolow | autohigh | best
模板变量：$QU
说明: （可选）指定在应用程序回放期间使用的消除锯齿级别。因为消除锯齿需要更快的处理器先对 SWF 文件的每一帧进行平滑处理，然后再将它们呈现到观众屏幕上，所以需要根据要优化速度还是优化外观来选择一个值：
“Low”使回放速度优先于外观，而且从不使用消除锯齿功能。
“Autolow”优先考虑速度，但是也会尽可能改善外观。回放开始时，消除锯齿功能处于关闭状态。如果 flash Player 检测到处理器可以处理消除锯齿功能，就会打开该功能。
“Autohigh” 在开始时是回放速度和外观两者并重，但在必要时会牺牲外观来保证回放速度。回放开始时，消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下，就会关闭消除锯齿功能以提高回放速度。使用此设置可模拟 flash 中的“消除锯齿”命令（“查看”>“预览模式”>“消除锯齿”）。
“Medium”会应用一些消除锯齿功能，但并不会平滑位图。该设置生成的图像品质要高于“Low”设置生成的图像品质，但低于“High”设置生成的图像品质。
“High”使外观优先于回放速度，它始终应用消除锯齿功能。如果 SWF 文件不包含动画，则会对位图进行平滑处理；如果 SWF 文件包含动画，则不会对位图进行平滑处理。
“Best”提供最佳的显示品质，而不考虑回放速度。对所有输出都进行消除锯齿处理，并且对所有位图都进行平滑处理。
如果忽略 quality 属性，其默认值为 high。
bgcolor 属性/参数
值: #RRGGBB（十六进制 RGB 值）
模板变量：$BG
说明: （可选）指定应用程序的背景色。使用此属性来覆盖在 flash SWF 文件中指定的背景色设置。此属性不影响 HTML 页面的背景色。
scale 属性/参数
值: showall | noborder | exactfit
模板变量：$SC
说明: （可选）当 width 和 height 值是百分比时，定义应用程序如何放置在浏览器窗口中。
“Showall”（默认值）使整个 flash 内容显示在指定区域中，且不会发生扭曲，同时保持它的原始高宽比。边框可能会出现在应用程序的两侧。
“Noborder”对 flash 内容进行缩放以填充指定区域，不会发生扭曲，它会使应用程序保持原始高宽比，但有可能会进行一些裁剪。
“Exactfit”使整个 flash 内容显示在指定区域中，但不尝试保持原始高宽比。可能会发生扭曲。
如果忽略此属性（而且 width 和 height 值是百分比），则它的默认值是 showall。
align 属性
值: Default | L | R | T | B
模板变量：$HA
说明: 指定 object、embed 和 img 标记的 align 值，并确定如何在浏览器窗口内放置 flash SWF 文件。
“默认”使应用程序在浏览器窗口内居中显示，如果浏览器窗口小于应用程序，则会裁剪边缘。
L、R、T 和 B 让应用程序分别沿着浏览器窗口的左、右、上、下边缘对齐，并根据需要裁剪其余三边。
salign 参数
值: L | R | T | B | TL | TR | BL | BR
模板变量：$SA
说明: （可选）指定缩放的 flash SWF 文件在由 width 和 height 设置定义的区域内的位置。有关这些条件的详细信息，请参阅scale 属性/参数。
L、R、T 和 B 让应用程序分别沿着浏览器窗口的左、右、上、下边缘对齐，并根据需要裁剪其余三边。
TL 和 TR 让应用程序分别与浏览器窗口的左上角和右上角对齐，并根据需要裁剪底边和剩余的右侧或左侧边缘。
BL 和 BR 让应用程序分别与浏览器窗口的左下角和右下角对齐，并根据需要裁剪顶边和剩余的右侧或左侧边缘。
如果忽略此属性，flash 内容会在浏览器窗口中居中显示。
base 属性
值: 基本目录或 URL
说明: （可选）指定用于解析 flash SWF 文件中的所有相对路径语句的基本目录或 URL。如果 SWF 文件保存在与您的其他文件不同的目录下，这个属性是非常有用。
menu 属性/参数
值: true | false
模板变量：$ME
说明: （可选）指定当观众在浏览器中右击 (Windows) 或按住 Command 键单击 (Macintosh) 应用程序区域时将显示的菜单类型。
“true” 显示完整的菜单，让用户使用各种选项增强或控制回放。
“false” 显示的是一个只包含“关于 Macromedia flash Player 6”选项和“设置”选项的菜单。
如果忽略此属性，默认值为 true。
wmode 属性/参数
值: Window | Opaque | Transparent
模板变量：$WM
说明: （可选）使您可以使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示的功能。此标记/属性仅在带有 flash Player ActiveX 控件的 Windows 中有效。
“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明 flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。
“Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分进行显示，这样可能会降低动画性能。
“Opaque windowless” 和“Transparent windowless” 都可与 HTML 层交互，并允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于 “Transparent”允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来。
如果忽略此属性，默认值为 Window。仅适用于 object。
allowscriptaccess 属性/参数
值: always | never | samedomain
说明: 使用 allowscriptaccess 使 Flash 应用程序可与承载它的 HTML 页通信。此参数是必需的，因为 fscommand() 和 getURL() 操作可能导致 JavaScript 使用 HTML 页的权限，而该权限可能与 flash 应用程序的权限不同。这与跨域安全性有着重要关系。
always 允许随时执行脚本操作。
never 禁止所有脚本执行操作。
samedomain 只有在 flash 应用程序来自与 HTML 页相同的域时才允许执行脚本操作。

下面笔者以IE5.0为例，说明一个嵌入式WEB视频点播系统的实现方法，其中用到了部分PHP和JavaScript技术，有疑惑的读者请参考相关资料。

一、插入RealPlayer ActiveX对象（如果要进行测试，需要先安装RealPlayer播放器）

假定以下代码包含在video.php文档中（该文件将在主页面中通过 <iframe> 进行链接）。

<object width= "320 " 
height= "250 " classid= "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA "> 
<param name= "CONTROLS " value= "ImageWindow "> 
<param name= "CONSOLE " value= "Video "> 
<param name= "CENTER " value= "TRUE "> 
<param name= "MAINTAINSPECT " value= "TRUE "> 
</object> //定义播放界面 
<object width= "320 " height= "30 " classid= "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA ">
<param name= "CONTROLS " value= "StatusBar "> 
<param name= "CONSOLE " value= "Video "> 
</object> //定义状态栏 
<object width= "320 " height= "30 " classid= "clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA ">
<param name= "CONTROLS " value= "ControlPanel "> 
<param name= "CONSOLE " value= "Video "> 
<param name= "SRC " value= " <?php echo getsrc(); ?> "> 
<param name= "AUTOSTART " value= "TRUE "> 
<param name= "PREFETCH " value= "0 "> 
<param name= "LOOP " value= "0 "> 
<param name= "NUMLOOP " value= "0 "> 
</object> //定义控制面板

其中，CONTROLS参数用来指定播放器的控件外观，可以用多个控件进行组合，并通过CONSOLE参数进行关联。

有关param参数，读者可以参阅RealPlayer官方网站http://service.real.com/help/library/guides/production/htmfiles/control.htm。

这里的SRC参数尤为重要，用来指定视频流文件的URL地址。这里笔者使用PHP代码的方法动态的指定SRC，读者也可以使用其它如ASP，或完全通过
JavaScript 实现。

二、使用DHTML动态控制RealPlayer控件的播放

小技巧： <IFRAME> 的妙用。由于为RealPlayer控件指定新的SRC需要刷新页面，使用 <IFRAME> 可以把RealPlayer控件嵌入到单独的页面中，这样，动态刷新就是在 <IFRAME> 内进行，不会影响用户观看页面其它内容。

以下代码包含在主页面中：

<IFRAME id= "iVideo " SRC="http://blog.163.com/qianxue126@126/blog/video.php " Width=500
Height=345 frameborder=0 SCROLLING= "no "> 

</IFRAME>

，其中，video.php文件用力显示RealPlayer控件。

下面我们加入简单的JavaScript 代码用来控制视频的播放。

<script language= "JavaScript "> 
function play(filename){ 
top.document.all( "iVideo ").src = "video.php?src="http://blog.163.com/qianxue126@126/blog/+filename;
} // iVideo 是刚刚定义的IFRAME 的标识符 
</script>

我们可以使用javascript控制RealPlayer插件更复杂的功能，如提取视频的长宽、测试用户的网络速率、自定义播放事件等等。关于RealPlayer
ActiveX开发的具体细节，请参阅RealPlayer官方网站http://service.real.com/help/library/guides/extend/embed.htm。

我们假设有一个视频文件，其URL为http://YourURL/filename.ram，那么我们就可以这样定义：

<a href= "JavaScript:play( 'http://YourURL/filename.ram ') "> 文件1 </a> ，如果文件是在本地，URL也可以为相对路径。

三、检测用户是否安装RealPlayer播放器

在页面的 <head> </head> 部分加入以下JavaScript代码，用以检测用户是否安装RealPlayer播放器：

<SCRIPT LANGUAGE=JavaScript> 

<!-- 

var RealMode=0; 
var RealPlayer5=0; 
var RealPlayer4=0; 
var RealPlayerG2=0; 
if (navigator.userAgent.indexOf( "MSIE ") < 0 ){ 
numPlugins = navigator.plugins.length; 
for (i = 0; i < numPlugins; i++){ 
plugin = navigator.plugins[i]; 
if (plugin.name.substring(0,10)== "RealPlayer "){ 
RealMode=1; 
} 
} 
} 


// 以下代码通过VBScript的CreateObject()函数动态的创建RealPlayer对象 
document.write( ' <SCRIPT LANGUAGE=VBScript\> \n '); 
document.write( 'on error resume next \n '); 
document.write( 'RealPlayerG2 = (NOT IsNull(CreateObject( "rmocx.RealPlayer 
G2 Control ")))\n '); 
document.write( 'RealPlayer5 = (NOT IsNull(CreateObject( "RealPlayer.RealPlayer(tm)
ActiveX Control (32-bit) ")))\n '); 
document.write( 'RealPlayer4 = (NOT IsNull(CreateObject( "RealVideo.RealVideo(tm)
ActiveX Control (32-bit) ")))\n '); 
document.write( ' </SCRIPT\> \n '); 
if ( RealPlayerG2 || RealPlayer5 || RealPlayer4 ){ 
//可以在此处添加 <object> 对象 
}else if ( RealMode ){ // NetScape浏览器用户 
// 可以在此处加入 <embed> 对象 
}else{ 
window.location.replace( "install.htm "); // 转入install.htm页面指导用户进行安装 
} 
-->

人类观察所主任

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
在HTML中添加视频的代码

在HTML中添加视频的代码自动载入视频　　与音乐的播放一样，我们可以使用EMBED标签播放视频，　　　　属性有：SRC="http://blog.163.com/qianxue126@126/blog/FILENAME"设定文件的路径AUTOSTART=TRUE/FALSE是否要文件传送完就自动播放，TRUE是要，FALSE是不
复制链接

扫一扫