Design HTML5 images and multimedia

The text information in the webpage is intuitive and clear, while the multimedia information is richer in connotation and visual impact. Appropriate use of different types of multimedia can show personality, focus and attract users. Before HTML5, you need to use plug-ins to add multimedia to web pages, such as Adobe Flash Player, Apple's QuickTime, etc. HTML5 introduces native multimedia technology, making multimedia design easier and user experience better.

1. Understand HTML5 images

Images, like text, are important webpage objects. Properly inserting images can enrich webpage information and enhance the appreciability of the page. The image itself has a strong visual impact, which can attract the viewer's attention, and the well-made and well-designed image can stimulate the interest of the viewer to browse the web.

There are three types of images used in web pages: GIF, JPEG, and PNG.

1.1. GIF images

1. Lossless compression, does not reduce the quality of the image, but reduces the display color, up to 256 colors can be displayed.
2. Support transparent background.
3. GIF animation can be designed.

1.2. JPEG images

1. Lossy compression, during the compression process, some details of the image will be ignored, but ordinary viewers cannot see it.
2. Supporting 16.7 million colors, it can reproduce colorful photographic images well.
3. Transparent backgrounds and interlaced displays are not supported.

1.3. PNG images

PNG has the dual advantages of GIF images and JPEG images. On the one hand, it can compress files losslessly, and the compression technology is better than GIF; on the other hand, it supports 16.7 million colors, and supports functions such as indexed color, grayscale, true color, and alpha channel transparency.

In web design, if the image has less than 256 colors, it is recommended to use GIF format, such as logo, etc.; if the color is rich, it is recommended to use JPEG or PNG format, such as news photos.

2. Design image

HTML 5.1 adds the srcset and sizes attributes of the picture element and the img element, making the implementation of responsive images easier and more convenient. The new versions of many mainstream browsers also support these newly added content well.

2.1. Using the img element

In HTML5, images can be inserted into web pages using tags, the specific usage is as follows.

    <img src="URL" alt="替代文本" />

The img element embeds an image into a web page. From a technical analysis, <img>the tag does not insert an image into the web page, but links the image from the web page. <img>What the tag creates is the space occupied by the referenced image.

Tip : Tags have two required attributes: the alt attribute and the src attribute. The specific instructions are as follows:

• alt attribute: Sets the alternate text for the image.
• src attribute: defines the URL to display the image.

[Example] Insert a photo in the page, the preview effect in the browser is as follows:

    <img src="images/1.jpg" width="400"  alt="HTML5"/>

HTML5 defines multiple optional attributes for tags, and the brief description is as follows:

• height: Defines the height of the image. The value unit can be pixel or percentage.
• width: defines the width of the image. The value unit can be pixel or percentage.
• ismap: Defines an image as a server-side image map.
• usemap: Defines the image as a client-side image map.
• longdesc: Points to a URL containing a long image description document.

It is no longer recommended to use some attributes in HTML4, such as align (horizontal alignment), border (border thickness), hspace (left and right space), vspace (top and bottom space), for these attributes, HTML5 recommends using CSS attributes instead.

2.2. Define stream content

Flow content is quoted from the text on the page. Before HTML5, there was no element specifically for this purpose, so some developers represented it with a div element that has no semantics. HTML5 changed this by introducing the figure and figcaption elements.

Flow content can be charts, photos, graphs, illustrations, code snippets, and other similar self-contained content. Figures can be derived from other content on the page. figcaption is the title of the figure, optional, it appears at the beginning or end of the figure content. For example:

    <figure>
        <p>思索</p>
        <img src="images/1.jpg" width="350" />
    </figure>

Here the figure has only one photo, and placing multiple images or other types of content (such as data tables, videos, etc.) is also allowed. The figcaption element is not required, but if included, it must be the first or last element nested within the figure element.

[Example] The figure below contains news pictures and their titles, which are displayed in the middle of the article text. Figures are displayed indented, which is the browser's default style:

    <article>
        <h1>我国首次实现月球轨道交会对接 嫦娥五号完成在轨样品转移</h1>
        <p>12月6日，航天科技人员在北京航天飞行控制中心指挥大厅监测嫦娥五号上升器与轨道器返回器组合体交会对接
情况。</p>
        <p>记者从国家航天局获悉，12月6日5时42分，嫦娥五号上升器成功与轨道器返回器组合体交会对接，并于6时
12分将月球样品容器安全转移至返回器中。这是我国航天器首次实现月球轨道交会对接。</p>
        <figure>
            <figcaption>新华社记者<b>金立旺</b>摄</figcaption>
            <img src="images/news.jpg" alt="嫦娥五号完成在轨样品转移" /> </figure>
        <p>来源：<a href="http://www.xinhuanet.com/">新华网</a></p>
    </article>

The figure element can contain multiple content blocks. However, only one figcaption is allowed, no matter how much content the figure contains.

Note : Do not use figures simply as a way to embed standalone instances of content within text. In this case, the aside element is usually more appropriate. To learn how to combine blockquote and figure elements.

The optional figcaption must be included in the figure together with other content, and cannot appear in other places alone. The text in figcaption is just a short description of the content, just like the description text of a photo.

By default, modern browsers add a left and right margin of 40px to the figure. This style can be modified using the CSS margin-left and margin-right properties. For example, use margin-left:0; to make the image touch the left edge of the page directly. You can also wrap the text containing the figure around it using figure { float: left; } so that the text wraps around the right side of the image. It may also be necessary to set the width for the figure so that it does not take up too much horizontal space.

2.3. Insert icon

Favicons typically appear in browser tabs, history, bookmarks, favorites, or the address bar. The icon size is generally 16px×16px, with a transparent background. For mobile devices, the iPhone icon size is 57px×57px or 114px×114px (Retina screen), and the iPad icon size is 72px×72px or 144px×144px (Retina screen). The Android system supports icons of this size.

[Example] The following multi-step operation demonstrates how to insert an icon in a website.

Step 1, create an image with a size of 16px×16px, save it as favicon.ico, and note that the extension is .ico. Create a 32px by 32px image for Retina screens.

Tip: The ico file allows multiple files with the same name and different sizes to be included in the same file.

Step 2, create at least one image for touchscreen devices and save it in PNG format. If you created only one image, name it apple-touchicon.png. Additional touchscreen icons can also be created if desired.

Step 3, place the icon image at the root of the website.

Step 4, create a new HTML5 document, and enter the following code at the head of the web page:

    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Step 5, browse the webpage, the browser will automatically search for a specific file name in the root directory, and display the icon after finding it.

If the browser cannot display it, it may be that the browser cache is too large and the icon generation is too slow. Try to clear the cache, or visit the icon link (http://localhost/favicon.ico) first, and then visit the website, and it can be displayed normally.

2.4. Define alternative text

Use the alt attribute to add a descriptive text to the image, which will be displayed when the image is not displayed for some reason. Screen readers can read this text aloud to help visually impaired visitors understand the content of the image.

The HTML5 specification recommends that alt text be understood as an alternative description of an image. For example:

    <img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />

In Internet Explorer, the alternate text appears next to a small square with a cross surrounded by a box. In other browsers like Firefox and Opera, the alt text appears by itself. Instead of showing the alt text, Chrome and Safari show the icon for the missing image.

Tip : If the image has less value to the content and is less important to visually impaired users, you can provide empty alt text, alt="" . The alt attribute can also be left blank if the image conveys similar information to the adjacent text.

Note, do not use alt text instead of image captions. In this case, consider putting the img into a figure element, and adding a figcaption element.

If the image is part of the page design and not the content, consider using the CSS backgroundimage property to bring in that image instead of using the img tag.

2.5. Define Retina display

Retina is a display standard, which is to compress more pixels into one screen, so as to achieve higher resolution and improve the fineness of the screen display, also known as the retina display.

In web design, by changing the size of the image display, users using Retina displays can see higher-definition images while keeping the image size on all displays the same.

[Implementation method]: Adjust the height and width attributes of img to be 1/2 of the original image. Since the height and width ratio of the image remain unchanged, the image will not be distorted. Note that since the image source is the same file, there is no change in load time.

[Example] Assume that a 40px×30px image is inserted into a web page, that is, the image is displayed as 40px×30px on all display screens, including normal screens and Retina screens. So, first create an image of size 80px by 60px. Then, design the following code.

    <img src="photo.jpg" width="40" height="30" alt="" />

The browser scales down the 80px by 60px image to display it at a size of 40px by 30px. For an image of 80px×60px, the total is 4800px, which will be displayed as 1200px on a normal screen, and 4800px on a Retina screen to make the image look clearer.

If you design an image of 40px×30px, the Retina screen will stretch the image and use 1200px to fill the space of 4800px, which will result in a decrease in image clarity.

Tip : Icon fonts and SVG image file formats scale without distortion. For monochrome icons, it is recommended to use icon fonts instead of images whenever possible. For logos and other non-photographic images, consider using the SVG format.

2.6. Using the picture element

<picture>Tags are containers only, and can contain one or more <source>sub -tags. <source>A multimedia source can be loaded, which contains the following properties:

• srcset: Required, set the image file path, such as srcset="img/minpic.png". Or comma-separated image paths described by pixel density, such as srcset="img/minpic.png,img/maxpic.png 2x".
• media: set media query, such as media=" (min-width: 320px)".
• sizes: Set the width, such as sizes="100vw". Or media query width, such as sizes="(min-width: 320px) 100vw". It can also be a comma-separated list of media query widths, such as sizes="(min-width: 320px)100vw, (min-width:640px) 50vw, calc(33vw – 100px) ".
• type: Set the MIME type, such as type= "image/webp" or type= "image/vnd.ms-photo ".

The browser will use the first appropriate source element according to the source list order, and load the specific image source according to the set attributes, while ignoring the following tags <source>.

[Example] Use the picture element design to load different pictures in different views, and the demonstration effect is shown in the following figure:

    <picture>
        <source media="(min-width: 650px)" srcset="images/kitten-large.png">
        <source media="(min-width: 465px)" srcset="images/kitten-medium.png">
        <!-- img标签用于不支持picture元素的浏览器 -->
        <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
    </picture>

2.7. Design horizontal screen and vertical screen display

In this example, the orientation of the screen is used as the condition. When the screen orientation is landscape, load the kitten-large.png image, and when the screen orientation is portrait, load the kitten-medium.png image.

    <picture>
        <source media="(orientation: portrait)" srcset="images/kitten-medium.png">
        <source media="(orientation: landscape)" srcset="images/kitten-large.png">
        <!-- img标签用于不支持picture元素的浏览器 -->
        <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">

Tip: You can combine multiple conditions, such as screen orientation and view size, to load different images separately. The code is as follows:

    <picture>
        <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset=" images/minpic_
landscape.png">
        <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset=" images/minpic_
portrait.png">
        <source media="(min-width: 640px) and (orientation: landscape)" srcset=" images/middlepic_landscape.png">
        <source media="(min-width: 640px) and (orientation: portrait)" srcset="images/middlepic_portrait.png">
        <img src="images/picture.png" alt=" this is a picture ">
    </picture>

2.8. Display different images according to the resolution

In this example, the screen pixel density is used as the condition. When the pixel density is 2x, the design loads the image with the suffix _retina.png, and when the pixel density is 1x, the image without the retina suffix is ​​loaded.

    <picture>
        <source media="(min-width: 320px) and (max-width: 640px)" srcset="images/minpic_retina.png 2x">
        <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
        <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
    </picture>

Tip : Please refer to the introduction below for detailed description of the srcset attribute.

2.9. Display different images according to the format

In this example, the file format of the image is used as the condition. When webp format images are supported, webp format images are loaded; when webp format images are not supported, png format images are loaded.

    <picture>
        <source type="image/webp" srcset="images/picture.webp">
        <img src="images/picture.png" alt=" this is a picture ">
    </picture>

2.10, adaptive pixel ratio

In addition to the source element, HTML5 adds a srcset attribute to the img element. The srcset attribute is a collection containing one or more source maps, different source maps are separated by commas, and each source map consists of the following two parts:

1. image URL.
2. Descriptor for x (image pixel ratio description) or w (image pixel width description). The descriptor needs to be separated from the image URL by a space, and the loading strategy of the w descriptor is calculated and selected through the declaration in the sizes attribute.

If the second part is not set, it defaults to 1x. In the same srcset, x descriptors and w descriptors cannot be mixed, nor can both x descriptors and w descriptors be used in the same image.

The writing method of the sizes attribute is the same as that of srcset, and it is also one or more strings separated by commas. Each string consists of the following two parts:
(1) Media query. The last string cannot be set as a media query, as a fallback option after a matching failure.

(2) Image size (size) information. Note that you cannot use % to describe the image size. If you want to express it in percentage, you should use a unit description similar to vm (100 vm = 100% device width), and others (such as px, em, etc.) can be used normally.

Suggestions for choosing image sizes for different media queries given by sizes, only for w descriptors. That is, if srcset uses the x descriptor, or if srcset is not defined at all, sizes are meaningless.

Note: Except for IE browser which is not compatible, all other browsers support this technology. For more information, please visit http://caniuse.com/#search=srcset .

[Example] A device with a screen ratio of 5 pixels (such as a high-definition 2k screen) uses a picture of 2500px×2500px, a device with a ratio of 3 pixels uses a picture of 1500px×1500px, a device with a ratio of 2 pixels uses a picture of 1000px×1000px, and a device with a ratio of 1 pixels uses a picture of 1000px×1000px. (such as a normal laptop display) use a 500px×500px image. For browsers that do not support srcset, display the image of src.

Step 1, before designing, prepare 5 pictures.

• 500.png: The size is equal to 500px×500px.
• 1000.png: The size is equal to 1000px×1000px.
• 1500.png: The size is equal to 1500px×1500px.
• 2000.png: The size is equal to 2000px×2000px.
• 2500.png: The size is equal to 2500px×2500px.

Step 2: Create a new HTML5 document, enter the following code, and test it on devices with different screen ratios.

    <img width="500" srcset="
            images/2500.png 5x,
            images/1500.png 3x,
            images/1000.png 2x,
            images/500.png 1x "
        src="images/500.png"
    />

For devices whose pixel ratio is not given by srcset, different browsers have different selection strategies. For example, a device with a 1.5 pixel ratio is not given which image to use, and the browser can choose a 2 pixel ratio image, or a 1 pixel ratio image.

2.11. Adaptive image width

The w descriptor can be simply understood as describing the pixel size of the source image, regardless of width or height, and can be understood as width in most cases. If the sizes are not set, the image is generally loaded according to 100 vm.

**[Example 1]** If the viewport is 500px or below, use a 500w image; if the viewport is 1000px or below, use a 1000w image, and so on. If all media queries are satisfied, use 2000 w pictures. The implementation code is shown below.

    <img width="500" srcset="
            images/2000.png 2000w,
            images/1500.png 1500w,
            images/1000.png 1000w,
            images/500.png 500w
            "
        sizes="
            (max-width: 500px) 500px,
            (max-width: 1000px) 1000px,
            (max-width: 1500px) 1500px,
            2000px "
        src="images/500.png"
    />

If there is no corresponding w descriptor, the first one larger than it is generally selected. If there is a media query of 700px, the source image corresponding to 1000w is generally loaded.

[Example 2] Set the viewport width using a percentage.

    <img width="500" srcset="
            images/2000.png 2000w,
            images/1500.png 1500w,
            images/1000.png 1000w,
            images/500.png 500w
            "
        sizes="
            (max-width: 500px) 100vm,
            (max-width: 1000px) 80vm,
            (max-width: 1500px) 50vm,
            2000px "
        src="images/500.png"
    />

The choice of designing the picture here: multiply the viewport width by 1, 0.8 or 0.5, and select different w descriptors according to the obtained pixels. For example, if the viewport is 800px, corresponding to 80 vm, that is 800px×0.8=640px, a 640w source image should be loaded, but there is no 640w in srcset, then the first source image larger than 640w will be selected, that is 1000w source map. If it is not set, it is generally selected to load pictures according to 100vm.

3. Design multimedia

Before HTML5, it was possible to add audio and video to web pages through third-party plug-ins, but there were some problems in doing so: the code to embed Flash video in one browser might not work in another browser, and there was no elegant Compatible way. At the same time, plug-ins such as Flash will occupy a large amount of computing resources, which will slow down the response of the browser, thus affecting the user experience.

3.1. Using the embed element

<embed>Tags can define embedded plug-ins in order to play multimedia information. Its usage is as follows.

    <embed src="helloworld.swf" />

The src attribute must be set to specify the media source. The attributes contained in the tag are described in the following table:

[Example 1] Design background music. Alternate exercise document test1.html, saved as test2.html. Enter the code below inside the tag.

    <embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop="infinite"></embed>

Specify the background music as "images/bg.mp3", hide the plug-in through the hidden="true" attribute, use the autostart="true" attribute to set the background music to play automatically, and use the loop="infinite" attribute to set the background music to loop. After setting the properties, browse in the browser, and then you can listen to the background music while browsing the webpage.

Tip : To use tags correctly, the browser needs to support the corresponding plug-in.

【Example 2】The video can be played. Create a new test3.html and enter the following code in the tag.

    <embed src="images/vid2.avi" width="413" height="292"></embed>

Use the width and height attributes to set the size of the video playback window, and the effect in the browser is as shown in the figure below:

3.2. Using the object element

Use <object>tags to define an embedded object, which is mainly used to insert multimedia information in web pages, such as images, audio, video, Java applets, ActiveX, PDF and Flash.

<object>The tag contains a large number of attributes, as shown in the following table:

[Example 1] The following code uses <object>tags to embed an image in the page, and the effect is shown in the following figure:

    <object width="100%" type="image/jpg" data="images/1.jpg"></object>

[Example 2] The following code uses <object>tags to embed web pages in the page, and the effect is shown in the figure below:

    <object type="text/html" height="100%" width="100%" data="https://www.baidu.com/"></object>

[Example 3] The following code uses <object>tags to embed audio in the page.

    <object width="100%"  classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
        <param name="AutoStart" value="1" />
        <param name="FileName" value="images/bg.mp3" />
    </object>

Tip: <param>The tag must be included in <object>the tag, which is used to define the configuration parameters of the embedded object, set the attribute through the name/value, the name attribute sets the configuration item, and the value attribute sets the item value.

The function of object is very powerful, and the original intention is to replace the img and applet elements. However, due to bugs and lack of browser support, it is not fully implemented, and all major browsers use different codes to load the same object. If the browser cannot display the object element, it will execute <object>和</object>the code located in between. In this way, we can nest multiple object elements for different browsers, or nest elements such as embed and img.

4. Use HTML5 multimedia

HTML5 adds native multimedia. This has many advantages: faster speed (any browser-native function is bound to be faster than plug-ins); media playback buttons and other controls are built into the browser, which greatly reduces the dependence on plug-ins.

Modern browsers support HTML5 audio and video elements, such as IE 9.0+, Firefox 3.5+, Opera 10.5+, Chrome 3.0+, Safari 3.2+, etc.

4.1. Using the audio element

<audio>The tag can play sound files or audio streams, and supports Ogg Vorbis, MP3, Wav and other audio formats. Its usage is as follows:

    <audio src="samplesong.mp3" controls="controls"></audio>

Among them, the src attribute is used to specify the sound file to be played, and the controls attribute is used to set whether to display the toolbar. The available attributes of the tag are shown in the following table:

Tip: If the browser does not support the tag, you can embed a replacement HTML string between the tag and the identifier, so that the old browser can display the information. For example:

    <audio src=" test.mp3" controls="controls">
    您的浏览器不支持audio标签。
    </audio>

The replacement content can be a simple prompt message, some alternative audio plug-ins, or a link to an audio file, etc.

[Example 1] A tag can wrap multiple tags to import different audio files, and the browser will automatically select the first recognizable format to play.

    <audio controls>
        <source src="medias/test.ogg" type="audio/ogg">
        <source src="medias/test.mp3" type="audio/mpeg">
        <p>你的浏览器不支持HTML5 audio，你可以 <a href="piano.mp3">下载音频文件</a> (MP3, 1.3 MB)</p>
    </audio>

The result of running the above code in the Chrome browser is shown in Figure 4.8. The audio element (with the default set of controls) defines two audio source files, one encoded as Ogg and the other encoded as MP3. The complete process is the same as that of specifying multiple video source files. The browser ignores files it cannot play and only plays files it can.

Browsers that support Ogg (such as Firefox) will load piano.ogg. Chrome understands both Ogg and MP3, but will load the Ogg file because the Ogg file comes before the MP3 file in the audio element's code. Ogg format is not supported, but browsers that support MP3 format (IE10) will load test.mp3, and older browsers (such as IE8) will display alternate information.

[Supplement] :
<source>Tags can <video>和<audio>define multimedia resources for tags, which must be wrapped in <video>or <audio>identifiers. <source>A tag contains the following 3 available attributes.

• media: Defines the type of media resource.
• src: Defines the URL of the media file.
• type: Defines the MIME type of the media resource. If the media type does not match the source file, the browser may refuse to play it. You can omit the type attribute and let the browser automatically detect the encoding method.

In order to be compatible with different browsers, generally multiple <source>tags are used to contain multiple media resources. For data sources, the browser will select them according to the declaration order. If more than one type is supported, the browser will give priority to playing the media resource with the higher position. The list of data sources should be sorted by user experience from high to low, or by server consumption from low to high.

[Example 2] Demonstrates inserting background music into the page, <audio>setting autoplay and loop attributes in the tag, and the detailed code is as follows.

    <audio autoplay loop>
        <source src="medias/test.ogg" type="audio/ogg">
        <source src="medias/test.mp3" type="audio/mpeg">
    您的浏览器不支持audio标签。
    </audio>

4.2. Using the video element

<video>The tag can play video files or video streams, and supports Ogg, MPEG 4, WebM and other video formats. Its usage is as follows:

    <video src="samplemovie.mp4" controls="controls"></video>

Among them, the src attribute is used to specify the video file to be played, and the controls attribute is used to provide play, pause and volume controls. <video>The available attributes of tags are shown in the following table:

[Supplement]: HTML5 tags support the following three commonly used video formats, and a brief description is as follows:

• Ogg: Ogg files with Theora video encoding and Vorbis audio encoding.
• MPEG4: MPEG 4 file with H.264 video encoding and AAC audio encoding.
• WebM: WebM files with VP8 video encoding and Vorbis audio encoding.

Tip: If the browser doesn't support <video>tags, you can <video>与</video>embed replacement HTML strings between the identifiers, so older browsers can display the information. For example:

    <video src=" test.mp4" controls="controls">
    您的浏览器不支持video标签。
    </video>

[Example 1] Use <video>tags to embed a video in the page, and then use <source>tags to link different video files, and the browser will select the first recognizable format by itself.

    <video controls>
        <source src="medias/trailer.ogg" type="video/ogg">
        <source src="medias/trailer.mp4" type="video/mp4">
    您的浏览器不支持video标签。
    </video >

A video element can contain any number of source elements, so it is fairly easy to define two different formats for the video. The browser loads the first file format it supports that is referenced by a source element and ignores other sources.

Run the above code in the Chrome browser, when the mouse passes over the playback screen, you can see a relatively simple video playback control bar, including play, pause, position, time display, volume control and other controls, as shown in the following figure: Playback controls can be made default on the page when the controls attribute is set for the tag

. <video>If the controls attribute is not set, the control bar interface will not be displayed during playback.

[Example 2] By setting the autoplay attribute, the audio or video file will be played automatically after loading without the playback control bar.

    <video autoplay>
        <source src="medias/trailer.ogg" type="video/ogg">
        <source src="medias/trailer.mp4" type="video/mp4">
    您的浏览器不支持video标签。
    </video >

You can also use JavaScript scripts to control media playback, a brief description is as follows:

• load(): can load audio or video files.
• play(): It can load and play audio or video files, unless it has been paused, it will play from the beginning by default.
• pause(): Pause the audio or video file that is playing.
• canPlayType(type): Checks whether the video element supports files of the given MIME type.

[Example 3] Demonstrate the play and pause functions of the video triggered by moving the mouse. Design to play the video when the user moves the mouse over the video interface, and pause the video playback if the user moves the mouse out.

    <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
        width="400px" height="300px">
        <source src="medias/trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="medias/trailer.mp4" type='video/mp4'>
    </video>

The above code is previewed in the browser, and the display effect is as shown in the figure below:

Tip : To achieve loop playback, you only need to use the autoplay and loop attributes. If you don't set the autoplay attribute, usually the browser will display the first frame of the video when the video loads. Users may want to modify this and specify their own image. This can be achieved with a poster image.

For example, the code below sets up a single WebM video to autoplay and loop. Without setting the controls, the visitor cannot stop the video. Therefore, it is a good idea to include controls if specifying the video as looping.

    <video src="paddle-steamer.webm" width="369" height="208" autoplay loop></video>

The code below specifies a single WebM video (with controls) for a poster image that is displayed when the page loads and the video is displayed.

    <video src="paddle-steamer.webm" width="369" height="208" poster="paddle-steamer-poster.jpg" controls></video>

where paddle-steamer.webm points to your video file and paddle-steamer-poster.jpg is the image you want to use as your poster image.

If the user is less likely to watch the video (for example, the video is not the main content of the page), then you can tell the browser not to preload the video. For videos with preload="none", the way the browser displays the video is different before the video is initialized.

    <video src="paddle-steamer.webm" preload="none" controls></video>

The above code shows that a single WebM video will not be loaded when the page is fully loaded, it will only be loaded when the user tries to play the video. Note that the width and height attributes are omitted here.

A video with preload set to none will display nothing in Firefox, because the browser doesn't get any information about the video (not even the dimensions), and it doesn't specify a poster image. If the user plays the video, the browser takes the dimensions of the video and resizes the video.

Chrome displays a blank rectangle above the control. In this case, the size of the control component is narrower than the component displayed when the visitor plays the video.

The default value of preload is auto, which will let the browser have the expectation that the user will play the video, so as to prepare for the video to enter the playback state soon. Since the browser will preload most of the video or even the entire video, it will be more difficult to start and pause the video multiple times during the playback process, because the browser will always try to download more data to allow Visitors watch.

A nice middle ground between none and auto is preload="metadata". This setting will let the browser only get the basic information of the video, such as size, duration, and even some key frames. The browser won't display the white rectangle until it starts playing, and the video will be sized exactly as it should be.

Using metadata will tell the browser that the user's connection speed is not fast, so bandwidth resources need to be reserved as much as possible without hindering playback.

Note : To be supported by all HTML5-compatible browsers, videos need to be served in at least two formats: MP4 and WebM. At this time, the source element of HTML5 must be used. Typically, the source element is used to define the source of more than one media element. For example, the code below defines two sources for video: an MP4 file and a WebM file.

    <video width="369" height="208" controls>
        <source src="paddle-steamer.mp4" type="video/mp4">
        <source src="paddle-steamer.webm" type="video/webm">
        <p><a href="paddle-steamer.mp4">下载视频</a></p>
    </video>

[Supplement] : With the native accessibility support provided by modern browsers, native multimedia can be better controlled using the keyboard, which is another benefit of native multimedia. Keyboard accessibility support for HTML5 video and audio works well in Firefox, IE, and Opera browsers. However, for Chrome and Safari, the only way to achieve keyboard accessibility is to make homemade playback controls. For this, the JavaScript Media API (which is also part of HTML5) needs to be used.

HTML5 specifies a new file format, WebVTT (Web Video Text Track, Web Video Text Track), which is used to contain video content such as text subtitles, titles, descriptions, and chapters. See www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles for more information, including updates made in 2012 to align with the specification.