Comment: Although HTML5 video can be used to display controls and control playback pauses, the display effects of different browsers may be different. Let’s share with you some custom operations and controls using Dom.
Although HTML5 video can use controls to display controls and control playback pauses, the display effects of different browsers may be different, so many times we need to use Dom for custom operations and controls. Here is a small example.Of course the effect is not very beautiful. If you want to look good, you can set your own css style, etc.
<div>
<button>Play/Pause</button>
<button>Big</button>
<button></button>
<button>Small</button>
<video>
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogg" type="video/ogg" />
Your browser does not support this HTML5 video tag.
</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.
Other properties are available after the video's metadata has been loaded.