首页 > 编程学习 > html5 音频/视频标签

html5 音频/视频标签

发布时间:2022/10/1 9:22:01

标签概述

<audio>标签定义音频,目前, <audio>标签支持三种音频格式文件: MP3, Wav, 和 Ogg。

<video> 标签定义视频,比如电影片段或其他视频流。目前,<video> 标签支持三种视频格式:MP4、WebM、Ogg。

<source> 标签为媒体标签(比如 <video> 和 <audio>)定义媒体资源。<source> 标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。比如,<audio> 标签允许使用多个 <source> 标签。<source> 标签可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。

<track> 标签为媒体标签(比如 <audio> 和<video>)规定外部文本轨道,也就是字幕,字幕格式有 WebVTT 格式(.vtt 格式文件)。这个标签用于规定字幕文件或其他包含文本的文件,当媒体播放时,这些文件是可见的。

标签使用

<audio>标签有很多常用的属性。autoplay属性用于音频在就绪后马上播放。controls属性用于向用户显示音频控件(比如播放/暂停按钮)。loop属性用于当音频结束时重新开始播放。muted属性用于静音。preload属性规定当网页加载时,音频是否默认被加载以及如何被加载。
如果值为auto,则表示页面加载完时,自动加载音频;如果值为metadata,则表示页面加载完时,加载音频的元数据;如果值为none,则表示不加载音频。

src属性用于指定音频的url。如果没有指定该属性,可以通过<source>标签来指定音频的url播放源。

可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

<audio src="horse.ogg" controls>您的浏览器不支持 audio 元素。</audio>
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<video>标签在<audio>标签的基础上,增加了三个属性:width、height、poster。width和height属性规定了视频播放器的宽度和高度。poster属性规定视频正在下载时显示的图像,直到用户点击播放按钮。

<video src="movie.ogg" controls>
  您的浏览器不支持 video 标签。
</video>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>
<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

<track> 标签使用src属性指定字幕文件,一般是.vtt格式。srclang属性用于指定字幕文件的语言。kind属性用于指定文本轨道的文本类型。可选值为captions(该轨道定义将在播放器中显示的简短说明)、chapters(该轨道定义章节,用于导航媒介资源)、descriptions(该轨道定义描述,用于通过音频描述媒介的内容,假如内容不可播放或不可见)、metadata(该轨道定义脚本使用的内容)、subtitles(该轨道定义字幕,用于在视频中显示字幕)。label属性用于规定文本轨道的标签和标题。default属性用于规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。

<video controls width="320" height="240"
       src="/video/php/friday.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/video/php/friday.vtt" />
    抱歉,您的浏览器不支持嵌入视频!
</video>
Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号