HTML5 Video Although controls can be used to display the control

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.