<video> 标签

2023-09-25 15:18:36 浏览数 (1)

<video> 标签

<video> 允许你轻松地嵌入一段视频。一个简单的例子如下:

代码语言:javascript复制
    <video id="video" controls autoplay>
      <source src="http://localhost:8080/img/hmbb.mp4"/>
       您的浏览器不支持 video 标签。
    </video>

在标签中 的 source 可以指定多种类型的媒体内容。

媒体文件的内容

像 MP3、MP4、WebM 这些 视频格式,定义了构成媒体文件的音频轨道和视频轨道的储存结构,其中还包含描述这个媒体文件的元数据,以及用于编码的编码译码器等等。

比如:一个格式为 WebM 的电影包含了

  • 视频轨道
  • 音频轨道
  • 和文本轨道

其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道; 音频轨道包含英语和西班牙语的音频轨道,还有一个英语评论的音频轨道; 文字轨道包含英语和西班牙语的字幕轨道,如下图所示:

image.png

编解码器

音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。

  • 音频轨道都使用音频编解码器进行编码
  • 视频轨道则使用视频编解码器进行编码

不同的浏览器支持不同的视频和音频格式, 例如:

  • WebM 容器通常包括了 Opus 或 Vorbis 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持,除了他们的老版本。
  • MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持,还有 Internet Explorer。
  • 老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持,不过这个容器已经被更强大的 WebM 容器所取代

如何使用

一般来说,在页面里签入 <video>标签,结合一些播放器来使用。比如 https://github.com/bilibili/flv.js 等。

END

参考资料

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

0 人点赞