HTML 5 video, html video

Source: Internet
Author: User

HTML 5 video, html video

The video element supports three video formats.

IE Firefox Opera Chrome Safari
With Theora video encoding and Vorbis Audio EncodingOggFile No 3.5 + 10.5 + 5.0 + No
With H.264 video encoding and AAC audio encodingMPEG 4File 9.0 + No No 5.0 + 3.0 +
With VP8 video encoding and Vorbis Audio EncodingWebMFile No 4.0 + 10.6 + 6.0 + No

 

 

 

 

 

1. Set an ogg File

<Video src = "movie.ogg" controls = "controls" height = "200px" width = "300px">
Your browser does not support video tags.
</Video>

Run the following command:

If the browser does not support the ogg format, "your browser does not support video tags ."

2. Set multiple formats
<Video width = "320" height = "240" poster = "Suk.png" controls>
<Source src = "movie.mp4" type = "video/mp4">
<Source src = "movie.ogg" type = "video/ogg">
Your browser does not support video tags.
</Video>

Run the following command:

 

For example, set a default image for a video. You can also add other attributes.

<Video> the tag attributes are as follows:

Controls/controls = "controls" display play button
Autoplay/autoplay = "autoplay" play now
Loop/loop = "loop" loop playback
Muted/muted = "muted" mute
Preload/preload = "preload" load video d
Poster = "path" show default image

3. Custom pause and size (Video + DOM)

<Button onclick = "playPause ()"> play/pause </button>
<Button onclick = "makeNormal ()"> change the size </button>

<Video id = "video1" width = "200">
<Source src = "movie.mp4" type = "video/mp4">
<Source src = "movie.ogg" type = "video/ogg">
Your browser does not support video tags.
</Video>

Write javascript below html

<Script type = "text/javascript">
Var myVideo = document. getElementById ("video1 ");

Function playPause ()
{
I f (myVideo. paused)
MyVideo. play (); // play
Else
MyVideo. pause (); // pause
}

Function makeNormal ()
{
MyVideo. width = 420; // custom width, self-adaptive height
}
</Script>

Run the following command:

Video methods, attributes, and events supported by most browsers (to be understood later)

Method Attribute Event
Play () CurrentSrc Play
Pause () CurrentTime Pause
Load () VideoWidth: run immediately -- run before the video Element SS
CanPlayType () VideoHeight: run immediately -- run before video Element Error
  Duration Timeupdate
  Ended Ended
  Error Abort
  Paused Empty
  Muted Emptied
  Seeking Waiting
  Volume Loadedmetadata
  Height  
  Width  

 

 

 

 

 

 

 

 

 

 

 

 

 

The following is a reference for html5 video and audio method attributes and events.

Http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

 

Related Article

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.