站点工具

用户工具


====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

上一修订版 两侧同时换到之后的修订记录
前端基础_html_video.md [2021/09/15 14:30]
admin 创建
前端基础_html_video.md [2021/09/15 14:44]
admin
行 2: 行 2:
  
 [\<\< 返回HTML教程](:document/html) [\<\< 返回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> </markdown>
admin · 2021/09/15 15:31 · 前端基础_html_video.md.txt