饥人谷Wiki

<markdown>
 
[\<\< 返回HTML教程](:document/html)
 
# 视频音频
 
## 视频 `<video>`
```html
<video src="nba-finals2017-game-1.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。</p> 
</video>
```
 
### 支持多种格式
* WebM - Chrome 和 Firefox
* MP4 - IE 和 Safari
* Ogg - 现在不怎么用了
```html
<video controls>
  <source src="nba-finals2017-game-1.mp4" type="video/mp4">
  <source src="nba-finals2017-game-1.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。</p> 
</video>
```
 
### 更多 video 特性
```html
<video controls width="400" height="400"
       autoplay loop muted
       poster="nab-finals.png">
  <source src="nba-finals2017-game-1.webm.mp4" type="video/mp4">
  <source src="nba-finals2017-game-1.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。</p> 
</video>
```
 
## 音频 `<audio>`
```html
<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频。</p>
</audio>
```
 
## 封面视频
* http://coverr.co
 
## 参考链接
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
* https://webkit.org/blog/6784/new-video-policies-for-ios/
 
</markdown>