Detailed explanation of HTML5 using DOM for custom control sample code

Although

HTML5 videos can use controls to display controls, and control playback, pause, etc., different browsers may display different effects. Let’s share with you how to use it. Dom is used to perform some customized operations and control

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

<div id="video_div" 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> 
</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>

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 detailed content of Detailed explanation of HTML5 using DOM for custom control sample code. For more information, please follow other related articles on the PHP Chinese website!