HTML5 <video>-Control using the DOM

Source: Internet
Author: User

HTML5 <video> elements also have methods, properties, and events.

The methods are used for playing, pausing, loading, and so on. The properties (such as length, volume, etc.) can be read or set. DOM events can inform you, for example, that the,<video> element starts playing, paused, stopped, and so on.

The simple method in the following example shows us how to use the <video> element, read and set properties, and how to invoke a method.

Instance

Create a simple play/pause and resize control for your video:

<!DOCTYPE HTML> <HTML> <Body> <Divstyle= "Text-align:center;"> <!--Add button, input button can be -<inputtype= "button"value= "Play/pause"onclick= "Playstop ()"></input>  <Buttononclick= "Makebig ()">Big</Button>  <Buttononclick= "Makenormal ()">In</Button>  <Buttononclick= "Makesmall ()">Small</Button>  <BR/> <!--Introducing Video -  <VideoID= "Video1"width= "420"style= "margin-top:15px;"><!--the format of the first row of the browser default -    <Sourcesrc= "/example/html5/mov_bbb.mp4"type= "Video/mp4" />    <Sourcesrc= "/example/html5/mov_bbb.ogg"type= "Video/ogg" />Your Browser does not support HTML5 video. </Video></Div> <Scripttype= "Text/javascript">varMyvideo=document.getElementById ("Video1"); /*Play Stop*/functionPlaystop () {if(myvideo.paused) Myvideo.play ();Elsemyvideo.pause ();}/*zoom in, set your own size, take care not to add PX*/functionMakebig () {myvideo.width= the; } functionMakesmall () {myvideo.width= the; } functionMakenormal () {myvideo.width=420; } </Script> </Body> </HTML>
View CodeControls property to add a play, pause, volume control. The content inserted under the video tag is displayed for browsers that do not support video .
<src= "/i/movie.ogg"  width= "" " height="  controls= "Controls">

The example uses an Ogg file for Firefox, Opera, and Chrome.

To ensure that the video file must be of type MPEG4 for Safari browser.

The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognizable format.

Video format

Currently, the video element supports three types of videos:

format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

OGG = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG4 = MPEG 4 file with H + video encoding and AAC audio encoding

WebM = WebM file with VP8 video encoding and Vorbis audio encoding

HTML5 <video>-Control using the DOM

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.