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

2021/8/23 6:28:27

本文主要是介绍HTML_14——网页中嵌入视频、音频和网页,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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>



image-20210820154431362

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>



image-20210820154333086

3. track元素

3.1 定义

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

3.2 kind属性

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

4. iframe元素

4.1 定义

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

4.2 sandbox属性

sandbox属性:遵循Secure By Default原则

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

4.3 补充

一个范围内的值:meter

显示进度条:progress

参考

<video>

<audio>

<track>

<iframe>



这篇关于HTML_14——网页中嵌入视频、音频和网页的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程