video
調用方法
<video src=""> </video>
用途往網頁里面添加視頻
在里面添加
controls="controls"
結果是這樣的
<video src="movie.ogg" controls="controls"> </video>
最后的結果里面會出現進度條和播放暫停鍵
我們還可以增加width和height屬性定義播放框的大小
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
里面的文字是視頻沒有加載出來的或者加載失敗的時候顯示出來的
因為瀏覽器的多種多樣所以視頻的樣式有很多因此我們要制定很多播放源這時候就是這樣的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Document </title> </head> <body> <video id="video1" height="240" width="320" controls="controls"> <source src="/ext/video.mp4" type="video/mp4"> <source src="/ext/video.ogg" type="video/ogg"> </video> </body> </html>
里面的source標簽可以添加許多新的源
例如ogg文件適用於chrome，firefox，以及opera
而要是想要在safari瀏覽器上運行則需要MPEG4格式的文件，這樣的話我們就需要更改文件的格式並且加上source標簽
還剩下一部分屬性放在表格里面介紹
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
| height | pixels | 設置視頻播放器的高度。 |
| loop | loop | 如果出現該屬性，則當媒介文件完成播放后再次開始播放。 |
| preload | preload | 如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。 如果使用 "autoplay"，則忽略該屬性。 |
| src | url | 要播放的視頻的 URL。 |
| width | pixels | 設置視頻播放器的寬度。 |