滚动
HTML 初学者指南 - 第 7 课 - object 标签。插入来自 YouTube 的视频。
我们经常需要在自己的博客中嵌入 YouTube 视频,本课我们将学习如何使用相应的标签及其属性。首先,让我们访问 YouTube 并复制视频的嵌入代码。
得到的代码如下:
<object style="height: 390px; width: 640px"> <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"> </object>
你可能已经注意到,用于插入视频的是 <object> 标签。该标签还包含 style 属性。style 是所有 HTML 标签的通用属性,用于编写该元素的 CSS 样式。关于 CSS 我们会在后续课程中详细讲解,现在只需知道一点即可。CSS 样式在属性中以分号分隔。在这里我们看到 height 和 width,也就是高度和宽度,这些参数是可以修改的。例如:
<object style="height: 195px; width: 320px"> <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"> </object>
这样,YouTube 播放器的大小将变为原来的一半。同时,还需要修改 embed 标签中的宽度和高度属性:
<object style="height: 195px; width: 320px"> <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="320" height="180"> </object>
此外,object 标签中包含若干 <param> 标签,用于定义嵌入对象的属性。以下是几个常见参数的说明:
- movie — 指定这是一个视频文件,属性 value 中包含视频的 URL。
- allowFullScreen — 允许进入全屏模式。如果设置为 value="false",则无法切换至全屏。
- allowScriptAccess — 用于启用与播放器 API 的交互。