HTML5：新增多媒体

Posted 2021-07-04 QXXXD

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5：新增多媒体相关的知识，希望对你有一定的参考价值。

`<source>` 标签

<source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源

属性	值	描述
media	media_query	规定媒体资源的类型，供浏览器决定是否下载
src	url	规定媒体文件的url
type	MIME_type	规定媒体资源的 MIME 类型

例：

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

音频标签 `<audio>`

<audio> 标签定义声音，比如音乐或其他音频流。<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	播放控件
loop	loop	循环播放
src	url	要播放的音频的url

语法：

<audio src="文件地址" controls="controls"></audio> 

< audio controls="controls" > 
    <source src="happy.mp3" type="audio/mpeg" > 
    <source src="happy.ogg" type="audio/ogg" > 
    您的浏览器暂不支持 <audio> 标签。 
</ audio>

视频标签 `<video>`

<video> 标签定义视频，比如电影片段或其他视频流。<video> 元素支持三种视频格式：MP4、WebM、Ogg。

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	循环播放
preload	auto（预先加载） none（不加载）	预先加载
src	url	视频 url 地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

语法：

<video src="文件地址" controls="controls"> </video> 

// 播放录像
<video controls="controls" width="300"> 
    <source src="move.ogg" type="video/ogg" > 
    <source src="move.mp4" type="video/mp4" > 
</ video >

例：

<style>
    video {
        width: 100%;
    }
</style>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg"></video>
</body>

`<track>` 标签

<track> 标签为媒体元素（比如 <audio> ， <video>）规定外部文本轨道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式文件）。

属性	值	描述
default	default	规定该轨道是默认的
kind	captions，chapters，descriptions，metadata，subtitles	规定文本轨道的文本类型
label	text	规定文本轨道的标签和标题
src	url	必需的规定轨道文件的 url
srclang	language_code	规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”，则该属性是必需的

例：带有字幕轨道（friday.vtt）的视频

<video width="320" height="240" controls>
<video controls src="/video/php/friday.mp4">
    <track default kind="captions" srclang="en" src="/video/php/friday.vtt" />
    您的浏览器不支持嵌入视频！
</video>
</video>