HTML5 uses DOM for custom control

This article mainly introduces the use of DOM for custom control in HTML5. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Although the video of HTML5 can be displayed with controls Controls, and control playback, pause, etc., but different browsers may display different effects. Let’s share with you some customized operations and controls using Dom. Although HTML5 videos can use controls to display controls and control playback, pause, etc., different browsers may display different effects, so many times we need to use Dom to perform some customized operations and controls. Below is a small example.
Of course the effect is not very beautiful. If you want it to look good, you can set the css style yourself.

<p id="video_p" style="text-align:center;"> 
<button onclick="playPause()">播放/暂停</button> 
<button onclick="toBig()">大</button> 
<button onclick="toNormal()">中</button> 
<button onclick="toSmall()">小</button> 
<video id="myVideo" width="500" height="250" style="margin-top:15px;"> 
<source src="demo.mp4" type="video/mp4" /> 
<source src="demo.ogg" type="video/ogg" /> 
您的浏览器不支持此HTML5 视频标签。 
</video> 
</p>

<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>

It should be noted that among all properties, only the videoWidth and videoHeight properties are immediately available.
The other properties are not available until the video's metadata has been loaded.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement a simple progress bar on the mobile terminal through HTML5 touch events

Html5 mobile terminal is award-winning and seamless Scroll animation implementation

The above is the detailed content of HTML5 uses DOM for custom control. For more information, please follow other related articles on the PHP Chinese website!