将多媒体内容放到网页中

将多媒体内容放到网页中

多媒体音频、视频文件格式很多,这些文件都有自己特定的播放器,因此在网页中添加多媒体音频、视频文件,就需要嵌入相应的播放器才能实现。无论使用哪种多媒体格式,将多媒体文件嵌入到网页中的步骤都和以下介绍的相同。

7.1.1 链接到多媒体文件

要将视频、音频文件包含到网页中,最简单、方便的方法是使用链接,就像链接到HTML文件一样。

【标签说明】

<a href="多媒体文件路径">多媒体文件</a>

说明:多媒体文件路径是指要播放的多媒体文件的相对路径或绝对路径,多媒体文件是添加的链接文字。

【实例】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>链接到多媒体文件</title> </head> <body> <a href="Clown-放手也是幸福.mp3">歌曲-放手也是幸福</a> </body> </html>

【运行结果】

运行代码的效果如

链接到多媒体文件

媒体播放器

7.1.2 添加多媒体文件标签标签代码<embed>

如果在网页中正确浏览嵌入到网页中的多媒体文件,就需要在客户端的计算机中安装相应的播放软件,使用<embed>标签可以将多媒体文件嵌入到网页中。

【标签说明】

<embed src="多媒体文件地址" width=播放界面的宽度 height=播放界面 的高度></embed>

说明:width和height参数的值必须要设置,单位是像素,否则无法正确显示播放多媒体文件的软件。

【实例】

<html> <head> <title>嵌入多媒体文件</title> </head> <body> 下面是嵌入的多媒体文件:<br> <embed src="视频素材.avi" width=500 height=200></embed> </body> </html>

【运行结果】

运行代码可以看到一个播放页面,如class="h-pic" src="https://res.weread.qq.com/wrepub/epub_655946_95" data-w="29px" data-ratio="0.966" data-w-new="28px" style="height: 1em; vertical-align: middle;"> ,播放插入的视频文件“视频素材.avi”。

嵌入网页中的多媒体

7.1.3 设置媒体文件自动运行标签代码autostart

登录网页时,常常会看到一些视频文件直接播放,不需要手动开始,特别是一些广告内容,这是通过autostart参数来实现的。

【标签说明】

<embed src="多媒体文件地址" autostart=是否自动运行></embed>

说明:autostart的取值有两个:true或者false, true表示自动播放;false表示不自动播放。

【实例】

<html> <head> <title>设置自动运行</title> </head> <body> 下面的视频文件中左边的视频文件将会自动播放,而右边的视频文件则需 要手动播放:<br> <embed src="视频素材.avi" width=200 autostart=True> </embed> <embed src="视频素材.avi" width=200 autostart=False> </embed> </body> </html>

【运行结果】

运行代码看到两个视频文件的不同效果,如

设置自动运行

7.1.4 设置媒体文件的循环播放标签代码loop

多媒体文件可以设置是否自动播放,也可以设置是否自动循环播放,广告内容大多选择自动循环播放,通过设置loop参数即可实现。

【标签说明】

<embed src="多媒体文件地址" loop=是否循环播放></embed>

说明:在该语法中,loop的取值不是具体的数字,而是true或者false。如果取值为true,表示媒体文件将无限次地循环播放;如果取值为false,则只播放一次。这里的loop也可以设置为播放次数。

【实例】

<html> <head> <title>设置循环播放多媒体文件</title> </head> <body> <embed src="视频素材.avi" width=200 autostart=True loop="true"></embed> </body> </html>

【运行结果】

运行代码的效果如

媒体文件不停地循环播放

7.1.5 隐藏媒体播放面板标签代码hidden

在网页中播放多媒体视音频时,可以将媒体文件的声音保留而隐藏

【标签说明】

<embed src="多媒体文件地址" hidden=是否隐藏></embed>

说明:在该语法中,hidden可以设置两个值,一个是true,表示隐藏面板;另一个是 false,表示显示面板,这是添加媒体文件的默认选项。如果要保留声音就要设置文件的自动播放。

【实例】

<html> <head> <title>设置隐藏面板</title> </head> <body> 下面的视频文件隐藏了播放面板<br> <embed src="视频素材.avi" width=200 autostart=True hidden="true"></embed> </body> </html>

【运行结果】

运行代码看到播放控制面板已经不见了,只能听到播放的声音效果,如

隐藏播放面板

7.1.6 添加flash动画文件

除了AVI媒体文件外,在网页中还可以嵌入Flash、MPEG等类型的媒体文件,方法与AVI媒体文件相同。

【标签说明】

<embed src="多媒体文件地址" width=播放界面的宽度 height=播放界面 的高度></embed>

说明:其中的参数和前面播放其他多媒体文件是相同的。

【实例】

<html> <head> <title>设置flash动画</title> </head> <body> <embed src="彩光飞舞-3.swf" width="200" height="200"></embed> </body> </html>

【运行结果】

运行代码看到在页面中添加了flash文件,如

添加flash动画

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

将多媒体内容放到网页中