怎么在HTML5中使用DOM進(jìn)行自定義控制

發(fā)布時(shí)間：2021-04-14 15:48:35 來源：億速云閱讀：113 作者：Leah 欄目：web開發(fā)

怎么在HTML5中使用DOM進(jìn)行自定義控制？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

代碼如下:

<div id="video_div" > 
<button onclick="playPause()">播放/暫停</button> 
<button onclick="toBig()">大</button> 
<button onclick="toNormal()">中</button> 
<button onclick="toSmall()">小</button> 
 
<video id="myVideo" width="500" height="250" > 
<source src="demo.mp4" type="video/mp4" /> 
<source src="demo.ogg" type="video/ogg" /> 
您的瀏覽器不支持此HTML5 視頻標(biāo)簽。 
</video> 
</div>

代碼如下:

<script type="text/javascript"> 
var myVideo=document.getElementById("myVideo"); 
function playPause() 
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
myVideo.pause(); 
} 
function toBig() 
{ 
myVideo.width=560; 
} 
function toNormal() 
{ 
myVideo.width=420; 
} 
function toSmall() 
{ 
myVideo.width=320; 
} 
</script>

需要注意的是在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。
在視頻的元數(shù)據(jù)已加載后，其他屬性才可用。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

怎么在HTML5中使用DOM進(jìn)行自定義控制

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽