文章目录

video标签
- 1.什么是video标签？
- 2.video标签的属性
- - 2.1 src属性
  - 2.2 autoplay属性
  - 2.3 controls属性
  - 2.4 poster属性
  - 2.5 loop属性
  - 2.6 preload属性
  - 2.7 muted属性
  - 2.8 width和height属性
- 3.video标签的第二种格式
audio标签
- 1.什么是audio标签？
- 2.audio标签的格式
- 3.注意点

video标签

1.什么是video标签？

作用：播放视频
格式：

<video src="">
</video>

2.video标签的属性

2.1 src属性

用于告诉video标签需要播放视频的地址。

2.2 autoplay属性

用于告诉video标签是否需要自动播放视频。

2.3 controls属性

用于告诉video标签是否显示控制条。

2.4 poster属性

用于告诉video标签视频没有播放之前现实的占位图片。

2.5 loop属性

一般用于做广告视频，不能控制暂停还是播放，只能一直循环播放。

2.6 preload属性

预加载视频，但是需要注意preload属性和autoplay属性相冲，如果设置了autoplay属性，那么preload属性就会失效。

2.7 muted属性

静音。

2.8 width和height属性

设置视频的高度、宽度。

3.video标签的第二种格式

由于视频数据非常重要，所以五大浏览器厂商都不愿意支持别人的视频格式，所以导致了没有一种视频格式是所有浏览器都支持的。w3c为了解决这个问题，推出了第二种video标签的格式。

<video><source src="" type=""><source src="" type="">
</video>

video标签的第二种格式存在的意义就是为了解决浏览器的适配问题。
video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么以后当浏览器播放视频时它就会从三种中选择一种自己支持的格式来播放。

<video><source src="data:images/sb1.webm" type="video/webm"><source src="data:images/sb1.mp4" type="video/mp4"><source src="data:images/sb1.ogg" type="video/ogg">
</video>

注意点：
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，那就是浏览器必须支持html5标签，否则同样无法播放，在过去的一些浏览器是不支持HTML5标签的，所以为了让过去的一些浏览器也能通过video标签来播放视频，那么我们以后可以通过一个JS的框架——HTML5media来实现。

audio标签

1.什么是audio标签？

作用：播放音频

2.audio标签的格式

第一种格式：
<audio src="">
</audio>
第二种格式：
<audio><source src="" type=""></source>
</audio>

3.注意点

audio标签的使用和video标签的使用基本一样，vedio中能够使用的属性audio标签中大部分都能使用，并且功能一样。
height/width/poster属性不能用。

12.HTML基础——video标签和audio标签相关推荐

html video标签 mp3,html5中的video标签和audio标签详解
一.基础 src 音乐资源的路径 autoplay 播放 controls 控制面板 loop 循环播放 muted 初始静音 audio支持的音乐格式有mp3 ogg wav 你的浏览器太辣鸡了,不 ...
HTML浅析——audio标签以及audio标签
基础 audio 标签用来向页面引入一个外部音频文件音视频文件引入时,默认情况下不允许用户自己控制播放停止属性: src:指定要引入的音视频的路径,这个是必须写 controls:是否允许用户控制 ...
零基础HTML入门教程(12)——插入音频audio标签
本章目录 1.任务目标 2.audio标签 3.任务实操 4.小结 1.任务目标我们前几个小结学习了,插入图片,或者插入超链接,那我们这一小结学习一下插入音频audio标签 2.audio标签直到 ...
关于HTML5的audio标签和video标签删除下载图标
video标签和audio标签在谷歌浏览器上自带下载按钮,当我们不想要下载按钮的时候,可以试一下以下操作第一种方案: 在video或者audio标签上添加controlsList="nod ...
Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
【HTML】音视频标签（audio、video、embed）
音视频标签(audio.video.embed) 音频 audio标签属性 controls autoplay loop 使用方式提示用户升级浏览器浏览器不支持MP3格式兼容低版本浏览器(em ...
video/audio标签倍速播放
video/audio标签倍速播放在现在浏览器中,各种播放器都支持倍速播放,1.5倍,2.0倍等. playbackRate 属性 html元素"audio"和"vi ...
html5前端Video视频标签和audio音频标签的使用
html5前端Video视频标签和audio音频标签的使用 h5新特性中关于Video视频标签和audio音频标签的使用和浅谈一.Video视频标签 video标签是h5新特性中用来播放视频的控件, ...
video和audio标签
一.video标签作用:播放视频 webm 网页中专用的视频格式 video第一种格式 video标签的属性 src:告诉video标签需要播放的视频地址 autoplay:用于告诉video标签是 ...

12.HTML基础——video标签和audio标签