HTML5實戰與剖析之媒體元素(6、影片實例)

　　HTML5中的影片標籤和及其模仿影片播放器的效果在某些手機端應用比較多。因為手機端基本上廢除了flash的獨斷，讓HTML5當家做主人，所以對影片支援的比較好。所以今天專門為大家奉上HTML5影片標籤模擬影片播放器的小例子，讓大家更好的理解HTML5和有效的應用在專案中。

　　HTML代碼

<!-- src中放上本地的ogv的音频 -->
<video id="v1" src="Intermission-Walk-in.ogv"></video>
<p id="p1">
	<input type="button" value="播放" />
	<input type="button" value="00:00:00" />
	<input type="button" value="00:00:00" />
	<input type="button" value="静音" />
	<input type="button" value="全屏" />
</p>
<p id="p2">
	<p id="p3"></p>
</p>

<p id="p4">
	<p id="p5"></p>
</p>

　〜 　　

JavaScript代碼

#p2{ width:300px; height:30px; background:#666666; position:relative;}
#p3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;}
#p4{ width:300px; height:20px; background:#666666; position:relative; top:10px;}
#p5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}

以上就是HTML5實戰與剖析之媒體元素(6、影片實例)的內容，更多相關內容請關注PHP中文網（www.php.cn）！