HTML5 development tour

The new HTML5 standard has just been introduced recently and I want to learn it soon.

 

I will not talk about the concept and features of this standard here. Please take a closer look.Http://www.w3school.com.cn/html5/

 

Let's start with the video tag.

 

First, why is there this label:

Most users have installed flash plug-ins (in fact, about 95% of online users are installed with a certain version of Flash), but HTML 5 supporters are promoting an open, no video standards are required for any plug-ins. This is the concept brought about by the new HTML 5 tag <video>. It provides an embedded video (and its interaction) method without the need for private plug-ins similar to flash.

Unfortunately, videos are not that simple. Not only does the browser need to understand the <video> tag, but also a necessary encoding decoder to play the video. The obvious solution is that the creators of the HTML 5 specification can only select a video encoding decoder and let each browser manufacturer execute the code.

In short, this is the recommended plan. At the same time, this is also a fuse for chaos. The debate over various encoding and decoding algorithms has become annoying, but the even more tragic thing is that browser manufacturers cannot reach a unified conclusion. Apple does not want to use the proposed Ogg theora encoding decoder, but opera and Mozilla do not want to pay license fees due to their browser loading H.264 encoding decoder. Google supports both of them at the same time. In the face of the debate, Microsoft is far away from anything, because he has no plans to support HTML 5 video elements.

The following table lists the formats of videos supported by various browsers:

 

Use of video tags

 

This attribute is easy to use, just like other labels.

  
  


   
   
<Video SRC="Movie.ogg"></Video>

  
  
 

This is the most basic method.

But I want to know what the silly browser like IE does not support. We can place text content between the start tag and the end tag, in this way, browsers that do not support this tag can display information that does not support this tag.

  
  


   
   
<Video SRC="Somevideo. wmv">Your browser does not support video tags.</Video>

  
  
 

Sometimes we don't know if the browser supports this format. Don't worry. Video supports multiple source elements. We can write multiple unused link files, the browser identifies the first identifiable link.

  
 
 

  
  
 
  
<Video Width="320" Height="240">
    
  
  

  
     source   SRC  =  "movie.ogg"     mce_src  =  "movie.ogg"    type  =  "Video/Ogg"    
   
  
  

  
<Source SRC="Movie.mp4" Mce_src="Movie.mp4" Type="Video/MP4">
    
  
  
 
  
Your browser does not support video tags.
    
  
  
 
  
</Video>
   
 
 

Next let's take a look at various video attributes.:

  
 
 

  
  

  
     video     width  =  "320"   height  =   controls  =  "controls"   autoplay  =   "autoplay"   loop  =  "loop"  >   
   
  
  

  
     source    SRC  =  "movie.ogg"     mce_src  =  "movie.ogg"   type  = " Video/Ogg " />  
   
  
  

  
<Source SRC="Movie.mp4" Mce_src="Movie.mp4" Type="Video/MP4" />
    
  
  
 
  
Your browser does not support video tags.
    
  
  
 
  
</Video>
   
 
 

Let's take a look at the controls attributes:

The CONTROLS attribute specifies that the browser should provide a playback control for the video.

If this attribute is set, the script control set by the author does not exist.

Browser controls should include:

• Play
• Pause
• Positioning
• Volume
• Full Screen Switch
• Subtitle (if available)
• Audio Track (if available)

The preload attribute is not used in the above example. Let's take a look at why it is useless.

First, the preload attribute specifies whether to load the video after the page is loaded. It has three values to control its functions: auto, Meta, and none.

• Auto-load the entire video after the page is loaded
• Meta-only metadata is loaded after the page is loaded.
• None-videos are not loaded after the page is loaded.

 

Video tags also contain Dom methods, attributes, and events.

 

HTML5 <video>-methods, attributes, and events

The following lists the video methods, attributes, and events supported by most browsers.:

The following is an example.

 
    
  
  
 
    play/pause  
    large  
    medium  
    small  
   
   
 
    
     
     your browser does not support HTML5 video.