HTML_14——网页中嵌入视频、音频和网页

2023-12-19 20:23:09

1. vedio元素

1.1 定义

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 audio 元素可能在用户体验上更合适。

1.2 controls、autoplay属性

播放控件和自动播放：controls、autoplay

视频预加载

1.3 preload属性

视频在页面加载时进行加载，并预备播放

1.4 实例


<video controls="" width="250">

    <source src="/media/cc0-videos/flower.webm" type="video/webm">

    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

2. audio元素

2.1 定义

HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者source 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

2.2 实例


<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio controls="" src="/media/cc0-audio/t-rex-roar.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

3. track元素

3.1 定义

HTML <track> 元素 被当作媒体元素—audio 和 video的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 WebVTT 格式（.vtt格式文件）— Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。

3.2 kind属性

track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

4. iframe元素

4.1 定义

HTML内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

4.2 sandbox属性

sandbox属性：遵循Secure By Default原则

加上后浏览器会对其实施最严格的限制操作

4.3 补充

一个范围内的值：meter

显示进度条：progress

参考

码农公寓