多媒体元素标记.docx

多媒体元素标记.docx

《多媒体元素标记.docx》由会员分享，可在线阅读，更多相关《多媒体元素标记.docx（21页珍藏版）》请在冰豆网上搜索。

多媒体元素标记

多媒体元素标记

：

背景音乐标记

在网页中，除了可以嵌入普通的声音文件之外，还可以为某个网页设置背景音乐。

作为背景音乐的可以是音乐文件，也可以是声音文件。

其中最常用的是midi文件。

语法：

说明：

作为背景音乐的文件还可以是avi文件、mp3文件等声音文件。

实例代码：

    薄雾浓云愁永画，瑞脑消金兽。

    佳节又重阳，玉枕纱厨，半夜凉初透。

    东离把酒黄昏后，有暗香盈袖。

    莫道不消魂，帘卷西风，人比黄花瘦。

运行这段代码，打开如下所示的界面，在打开界面之后就可以听到背景音乐。

设置背景音乐

loop：

背景音乐的循环播放次数

通常情况下，背景音乐需要不断的播放，但有时也需要指定播放的次数，这一功能实现起来并不难，只要设置相应的loop参数即可。

语法：

说明：

如果希望无限次循环播放背景音乐，可用将循环次数设置为True。

实例代码：

    薄雾浓云愁永画，瑞脑消金兽。

    佳节又重阳，玉枕纱厨，半夜凉初透。

    东离把酒黄昏后，有暗香盈袖。

    莫道不消魂，帘卷西风，人比黄花瘦。

运行这段代码，背景音乐在循环播放3次以后停止。

：

多媒体文件标记

在网页中常见的多媒体文件包括声音文件和视频文件。

语法：

说明：

在该语法中，width和height一定要设置，单位是像素，否则无法正确显示播放多媒体文件的软件。

实例代码：

下面是嵌入的多媒体文件：

运行这段代码，可以看到一个播放页面，如下所示。

单击页面中的播放按钮

可以播放插入的声音文件exam01.mid。

插入多媒体文件

autostart：

设置自动运行

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

语法：

说明：

autostart的取值有两个：

一个是True，表示自动播放；另一个是False，表示不自动播放。

实例代码：

下面的视频文件中左边的视频文件将会自动播放，而右边的视频文件则需要手动播放：

运行这段代码，可用看到两个视频文件的不同效果如下所示。

设置自动运行

loop：

媒体文件的循环播放

这里的循环播放一般是在设置了自动播放的时候采用，与背景音乐的设置基本相同。

语法：

说明：

在该语法中，loop的取值不是具体的数字，而是True或者False，如果取值为True，表示媒体文件将无限次的循环播放；如果取值为False，则只播放一次。

这里的loop也可以设置为播放次数，但是用途并不广泛。

实例代码：

下面的视频文件将循环播放：

运行这段代码的效果如下所示。

媒体文件不停的循环播放

hidden：

隐藏面板

其实也可以将媒体文件的声音保留而隐藏图像，这样就相当于设置了背景声音。

通过hidden参数可以隐藏播放面板。

语法：

说明：

在该语法中hidden可以设置两个值：

一是True，表示隐藏面板；另一个是False，表示显示面板，这是添加媒体文件的默认选项。

如果要保留声音就要设置文件的自动播放。

实例代码：

下面的视频文件播放面板被隐藏：

运行这段代码，看到播放控制面板已经不见了，只能听到播放的声音效果，如下所示。

隐藏播放面板

：

滚动文字标记

使用marquee标记可以将文字设置位动态滚动的效果。

语法：

滚动文字

说明：

只要在标记之间添加要进行滚动的文字即可。

而且可以在标记之间设置这些文字的字体、颜色等。

实例代码：

你好，欢迎光临梦幻小屋!

这里有欢乐的歌声，这里有美好的景色

运行这段代码，为红色隶书的文字从浏览器的右方缓缓向左滚动，如下所示。

设置滚动文字

direction：

文字滚动方向

默认情况下文字只能是从右向左滚动，而在实际应用中常常需要不同滚动方向的文字，可以通过direction这一参数来设置。

语法：

滚动文字

说明：

该语法中的滚动方向可以包含4个取值，分别为up、down、left和right，他们分别表示文字向上、向下、向左和向右滚动，其中向左滚动left的效果与默认效果相同，而向上滚动的文字则常常出现在网站的公告栏中。

实例代码：

你好，欢迎您的光临

这里是梦想小屋

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

你好，欢迎您的光临

这里是梦想小屋

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码，可以看到文字不同的滚动效果，如下所示。

图中两段文字的感觉就像是从中间被拉扯开一样。

设置滚动方向运行一段时间的效果

如图将文字方向相反设置，也就是上面一段文字的direction设置为“down”，下面一段设置为up，运行结果就似乎是两组文字融合到一起一样。

behavior：

设置文字的滚动方式

除了将文字设置为单方向的滚动外，还可以为文字设置滚动方式，如往复运动等。

这一功能可以通过添加behavior属性来实现。

语法：

滚动文字

说明：

在这里，滚动方式behavior的取值可以设置为如下表所示的某个值，不同取值的滚动效果也不相同。

滚动方式的设置

behavior的取值

滚动的效果

scroll

循环滚动，默认效果

slide

只滚动一次就停止

alternate

来回交替进行滚动

实例代码：

你好，欢迎您的光临

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码可以看到如下所示的效果。

其中第一行文字不停的循环一圈一圈的滚动；而第二行文字则在第一次到达浏览器边缘就停止了滚动；最后一行文字则在滚动到浏览器左边缘后开始反方向运动。

设置滚动方式

loop：

循环设置

设置滚动文字后，在默认情况下会不断的循环下去，如果希望当文字滚动几次停止，那么可以使用loop参数来进行设置。

语法：

滚动文字

实例代码：

你好，欢迎您的光临

这里是梦想小屋

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码会发现当文字滚动三个循环之后，滚动文字将不再出现，如左图所示。

但是如果设置滚动方式为交替滚动的话，那么在滚动三个循环之后，文字将停留在窗口中，如右图所示。

设置循环次数的效果设置交替滚动的循环次数

scrollamount：

滚动速度

在设置滚动文字的时候，有时候可能希望他快一些，也有时候希望他慢一点。

这一功能可以使用scrollamount参数来实现。

语法：

说明：

在该语法中，滚动文字的速度实际上是设置滚动文字每次移动的长度，以像素为单位。

实例代码：

看看我走得速度怎么样？

看看我走得速度怎么样？

看看我走得速度怎么样？

运行这段代码可以看到三行文字同时开始滚动，但是速度是不一样的，设置的scrollamount越大，速度也就越快，如下所示。

设置不同的滚动速度

scrolldelay：

滚动延迟

scrolldelay参数可以设置滚动文字滚动的时间间隔。

语法：

说明：

scrolldelay的时间间隔单位是毫秒，也就是千分之一秒。

这一时间间隔设置的为滚动两步之间的时间间隔，如果设置的时间比较长会产生走走停停的效果。

如果与滚动速度scrollamount参数结合使用，效果更明显，下面以实例说明。

实例代码：

看看我走得速度怎么样？

看看我走得速度怎么样？

看看我走得速度怎么样？

运行这段代码的效果如下所示，其中第一行文字设置的延迟小，因此走起来比较平滑；而最后一行设置的延迟比较大，看上去就像是走一步歇一会儿的感觉。

设置滚动延迟

bgcolor：

滚动文字的背景设置

在网页中，为了突出某部分内容，常常使用不同背景色来显示。

而滚动文字也可以单独设置背景色。

语法：

滚动文字

说明：

文字背景颜色设置为16位颜色码。

实例代码：

这里是梦幻小屋，欢迎光临

你好，欢迎您的光临

这里是梦想小屋

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码，看到在滚动文字后面设置了淡蓝色的背景，如下所示。

设置滚动文字背景

width、height：

滚动背景面积

如果不设置滚动背景的面积，那么默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用width和height参数可以调整其水平和垂直的范围。

语法：

滚动文字

说明：

此处设置宽度和高度的单位均为像素。

实例代码：

这里是梦幻小屋，欢迎光临

这里是梦幻小屋，欢迎光临

运行这段代码，可以看到两段滚动文字的背景高度、宽度的变化，如下所示。

设置滚动文字背景的面积

hspace、vspace：

设置空白空间

默认情况下，滚动文字周围的文字或图像是与滚动背景紧密连接的，使用参数hspace和vspace可以设置他们之间的空白空间。

语法：

滚动文字

说明：

该语法中水平和垂直范围的单位均为像素。

实例代码：

不设置空白空间的效果：

这里是梦幻小屋，欢迎光临

到这里，留下你的忧伤，带走我的快乐！

设置水平为70像素、垂直为50像素的空白空间：

这里是梦幻小屋，欢迎光临

我的梦想与你同在！

运行这段代码可以看到设置空白空间的效果如下所示。

设置滚动文字周围的空白空间