从零开始学web开发之html5-9.多媒体&10.浮动框架iframe

1.多媒体embed

embed是H5新增的标签,它是一个自闭合标签。
H5中还有audio、video标签可用于网页的多媒体开发。
通过实践发现,embed不管如何设置,都会一打开网页就播放,视频与音频都是如此,非常不实用。

<1>.网页中插入音、视频

embed标签实现在线音频和视频的插入。
语法:

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

src可以是音频或者视频的地址

<2>.插入背景音乐

IE中使用bgsound标签,但不支持其它浏览器,故同样可以embed标签实现背景音乐的插入。
语法:

<embed src="" hidden="" autostart="" loop=""/>
  • hidden: 布尔值,true表示隐藏播放器,即是背景音乐。
  • autostart:布尔值,ture表示页面一载入则自行播放。
  • loop:布尔值,true表示无限次播放(循环播放)。

<3>.插入Flash

同样使用embed标签实现插入Flash


2.浮动框架

<1>.简介

浮动框架iframe是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,整个页面并不一定是框架页面,但要包含一个框架窗口。
iframe可以自定义宽高和指定放置位置。

语法:

<iframe src="源文件地址" width="浮动框架的宽" height="高"></iframe>

说明:
src属性是iframe的必需属性,定义框架的地址.宽与高是可选属性。

<2>.iframe滚动条

使用scrolling属性来控制,分为三种情况:根据需要显示、总是显示、不显示。
语法:

<iframe src="源文件地址" width="浮动框架的宽" height="高" scrolling="取值"></iframe>

说明:
scrolling属性取值如下。

属性值 说明
auto 默认值,自动显示滚动条
yes 总是显示滚动条
no 不显示滚动条

3.网页链接&效果演示

p9多媒体演示链接
p10浮动框架演示链接

发布了92 篇原创文章 · 获赞 68 · 访问量 25万+

猜你喜欢

转载自blog.csdn.net/pigdreams/article/details/79967085