HTML5 Video Although controls can be used to display the control, and control playback pause, and so on, but different browsers may not display the same effect, so many times we need to use the DOM to customize some of the operation and control. Here is a small example.
Of course the effect is not very beautiful, if you want to look good can set their own CSS style and so on.
Copy CodeThe code is as follows:
<div id= "Video_div" style= "Text-align:center;" >
<button onclick= "Playpause ()" > Play/Pause </button>
<button onclick= "Tobig ()" > Big </button>
<button onclick= "Tonormal ()" > in </button>
<button onclick= "Tosmall ()" > Small </button>
<video id= "Myvideo" width= "height=" style= "margin-top:15px" >
<source src= "Demo.mp4" type= "Video/mp4"/>
<source src= "Demo.ogg" type= "Video/ogg"/>
This HTML5 video tag is not supported by your browser.
</video>
</div>
Copy CodeThe code is as follows:
<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 is important to note that only the Videowidth and Videoheight properties are available immediately in all properties.
Other properties are available after the video's metadata has been loaded.
HTML5 Video Although controls can be used to display the control