站点工具

用户工具


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

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

到此差别页面的链接

后一修订版
前一修订版
前端基础_html_video.md [2021/09/15 14:30]
admin 创建
前端基础_html_video.md [2021/09/15 15:31] (当前版本)
admin
行 1: 行 1:
-<markdown>+
  
 [\<\< 返回HTML教程](:document/html) [\<\< 返回HTML教程](:document/html)
  
-</markdown>+# 视频音频 
 + 
 +## 视频 `<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/ 
 + 
admin · 2021/09/15 14:30 · 前端基础_html_video.md.1631687416.txt.gz