Video和Audio
使用video顯示視頻
以下是一個顯示視頻的實體：
<video width="320" height="240" controls>
<source src="https://www.d18c4217.cn/myVideo/Gary.webm" type="video/webm">
<source src="https://www.d18c4217.cn/myVideo/Gary.mp4" type="video/mp4">
您的瀏覽器不支持Video標簽，
</video>
效果：
video元素提供了 播放、暫停和音量控制元件來控制視頻
同時video元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設定的高度和寬度，所需的視頻空間會在頁面加載時保留，如果沒有設定這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變，
<video>與</video>標簽之間插入的文本內容是提供不支持video元素的瀏覽器顯示的，
視頻格式與瀏覽器的支持
因為瀏覽器兼容的問題，通常在<video>與</video>標簽之間插入<source>鏈接不同的視頻檔案，
當前，video元素支持的有三種視頻格式：MP4，WebM和Ogg
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | √ | × | × |
| Chrome | √ | √ | √ |
| Firefox | √ | √ | √ |
| Safari | √ | × | × |
| Opera | √ | √ | √ |
JS控制video元素
| 語法 | 作用 |
|---|---|
| myVideo.play() | 播放視頻 |
| myVideo.pause() | 停止播放視頻 |
| myVideo.width = videoWidth | 設定視頻的寬度 |
| myVideo.height = videoHeight | 設定視頻的高度 |
使用Audio播放音頻
以下是一個音頻播放的實體：
<audio controls>
<source src="https://www.d18c4217.cn/myVideo/Gary_audio.ogg" type="audio/ogg">
<source src="https://www.d18c4217.cn/myVideo/Gary_audio.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素，
</audio>
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253881.html
標籤：HTML5
上一篇：新增語意標簽
下一篇：Geolocation地理定位