video標籤和 video物件的關係
阿新 • • 發佈：2020-12-22
video 標籤定義視訊，例如電影片段或其他視訊流。目前，<video> 元素支援三種視訊格式：MP4、WebM、Ogg。
Video 物件是 HTML5 中新增的。Video 物件表示 HTML <video> 元素。
例項:播放視訊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支援 HTML5 video 標籤。 </video> </body> </html>
Video 物件屬性
| 屬性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音訊軌道的 AudioTrackList 物件。 |
| autoplay | 設定或返回是否在就緒（載入完成）後隨即播放視訊。 |
| buffered | 返回表示視訊已緩衝部分的 TimeRanges 物件。 |
| controller | 返回表示視訊當前媒體控制器的 MediaController 物件。 |
| controls | 設定或返回視訊是否應該顯示控制元件（比如播放/暫停等）。 |
| crossOrigin | 設定或返回視訊的 CORS 設定。 |
| currentSrc | 返回當前視訊的 URL。 |
| currentTime | 設定或返回視訊中的當前播放位置（以秒計）。 |
| defaultMuted | 設定或返回視訊預設是否靜音。 |
| defaultPlaybackRate | 設定或返回視訊的預設播放速度。 |
| duration | 返回視訊的長度（以秒計）。 |
| ended | 返回視訊的播放是否已結束。 |
| error | 返回表示視訊錯誤狀態的 MediaError 物件。 |
| height | 設定或返回視訊的 height 屬性的值。 |
| loop | 設定或返回視訊是否應在結束時再次播放。 |
| mediaGroup | 設定或返回視訊所屬媒介組合的名稱。 |
| muted | 設定或返回是否關閉聲音。 |
| networkState | 返回視訊的當前網路狀態。 |
| paused | 設定或返回視訊是否暫停。 |
| playbackRate | 設定或返回視訊播放的速度。 |
| played | 返回表示視訊已播放部分的 TimeRanges 物件。 |
| poster | 設定或返回視訊的 poster 屬性的值。 |
| preload | 設定或返回視訊的 preload 屬性的值。 |
| readyState | 返回視訊當前的就緒狀態。 |
| seekable | 返回表示視訊可定址部分的 TimeRanges 物件。 |
| seeking | 返回使用者當前是否正在視訊中進行查詢。 |
| src | 設定或返回視訊的 src 屬性的值。 |
| startDate | 返回表示當前時間偏移的 Date 物件。 |
| textTracks | 返回表示可用文字軌道的 TextTrackList 物件。 |
| videoTracks | 返回表示可用視訊軌道的 VideoTrackList 物件。 |
| volume | 設定或返回視訊的音量。 |
| width | 設定或返回視訊的 width 屬性的值。 |
Video 物件方法
| Method | 描述 |
|---|---|
| addTextTrack() | 向視訊新增新的文字軌道。 |
| canPlayType() | 檢查瀏覽器是否能夠播放指定的視訊型別。 |
| load() | 重新載入視訊元素。 |
| play() | 開始播放視訊。 |
| pause() | 暫停當前播放的視訊。 |
例項：建立VIDEO物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video物件</title>
</head>
<body>
<p>點選按鈕建立 VIDEO 元素，將播放 .mp4 檔案格式的視訊。</p>
<p id="myp"></p>
<button onclick="myFunction1()">點我</button>
<p id="demo1"></p>
<script>
function myFunction1(){
var x = document.createElement("VIDEO");
x.setAttribute("width", "100%");
x.setAttribute("controls", "controls");
x.setAttribute("src", "movie.mp4");
let p = document.querySelector('#myp');
p.appendChild(x)
document.querySelector("demo1").innerHTML = "<strong>注意:</strong>IE 和 Safari 瀏覽器不支援 .ogg 檔案格式。這邊只是個簡單的示例。";
}
</script>
</body>
</html>