HTML5-video標籤 – 原意筆記本

HTML5 通過HTML標籤「audio」和「video」來支持嵌入式的媒體，使開發者能夠方便地將媒體嵌入到HTML文檔中。

<video controls autoplay width="640" height="592" poster="xxx/xxx.jpg">
    <source src="media/xxx.mp4" type=video/mp4>
    <source src="media/xxx.ogv" type=video/ogg>
</video>

</video>

項次	屬性	值	意義	描述
1	autoplay	autoplay	<是否要自動播放影片	沒寫此屬性代表不要自動撥放。若要顯示則寫：autoplay 或 autoplay=”autoplay”
2	controls	controls	是否顯示影片控制列	沒寫此屬性代表不顯示。若要顯示則寫： controls 或 controls=”controls” ps.如果不顯示的話不代表控制列完全不會出現，只是戴入後不會馬上出現，但滑鼠移入後還是會出氣，若要完差關閉需使用js才可以使得直接關閉。
3	width	pixels	影片寬度	設置視頻播放器的寬度。例：width=”640″(像素可省略)
4	height	pixels	影片高度	設置視頻播放器的高度。例：height=”480″(像素可省略)
5	loop	loop	影片自動重播	如果出現該屬性，則當媒體完成播放後再次開始播放。
6	preload	preload	預載播放	如果出現該屬性，則影片在頁面加載時進行加載，並預備播放。如果使用”autoplay”，則忽略該屬性。
7	poster	url	當影片無法顯示(瀏覽器不支援時)，是否要顯示圖片	沒寫表示不要顯示。若要顯示則用 poster 屬性指定連結，例如： poster=”xxx/xxx.jpg”
8	src	url	要播放的影片的URL。	同時提供兩種格式，可在大多瀏覽器播放 ( IE9以後支援) <source src=”media/xxx.mp4″ type=video/mp4> <source src=”media/xxx.ogv” type=video/ogg>

資料來源：
網頁設計筆記-video
[教學]在網頁上加入HTML5 的Video Tag，直接播放MP4、OGG…等影片
 HTML DOM Video 對象

Video controls 屬性實做

控件包含：播放、暫停、進度條、音量、全屏切換（供視頻）、字幕（當可用時）、軌道（當可用時）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body> 

<video id="myVideo" width="320" height="240">
	<source src="movie.mp4" type="video/mp4">
  	<source src="movie.ogg" type="video/ogg">
  	您的浏览器不支持 video 标签。
</video><br>
<button onclick="enableControls()" type="button">启用控件</button>
<button onclick="disableControls()" type="button">禁用控件</button>
<button onclick="checkControls()" type="button">查看控件状态</button>
<script>
var x = document.getElementById("myVideo");
function enableControls(){ 
	x.controls = true;
	x.load();
} 
function disableControls(){ 
	x.controls = false;
	x.load();
} 
function checkControls(){ 
	alert(x.controls);
} 
</script> 

</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

您的浏览器不支持 video 标签。

</video><br>

<button onclick="checkControls()" type="button">查看控件状态</button>

var x = document.getElementById("myVideo");

function enableControls(){

x.controls = true;

x.load();

}

function disableControls(){

x.controls = false;

x.load();

}

function checkControls(){

alert(x.controls);

}

</script>

</body>

</html>

$(document).ready(function(){
	$(#'index-video').controls = false;
	$(#'index-video').load();
});

$(document).ready(function(){

$(#'index-video').controls = false;

$(#'index-video').load();

});

See the Pen HTML5-video標籤 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

附記：如果要使用關閉影片控制器的 js 的話，在 html 標簽內不能有 controls

資料來源：
Video controls 屬性

標籤雲

Video controls 屬性實做