What is the label for the HTML5 playback video? How do I play a video on a Web page? (enclosing instance)

Source: Internet
Author: User
This article mainly introduces the use and introduction of video tags in html, HTML5 videos, and some video formats that support video playback in the web, so let's take a look at this article.

First we introduce the following tags for playing the video:

Html5<video> label:<video> tags define videos, such as movie clips or other video streams.

Video on the web until now, there is still no standard for displaying video on a Web page.

Today, most videos are displayed via plugins (such as Flash). However, not all browsers have the same plugin.

HTML5 provides a standard way to include video through the visual element.

A simple example of HTML5 video:

<video src= "Movie.ogg" controls= "Controls" > your browser does not support video tags. </video>

This text will appear on the page when the video is not found.

HTML5 Video format:

Currently, the video element supports three types of videos:

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

Now talk about how the HTML5 video tag plays videos on a Web page:

1. Basic usage:

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

2. Set the video window size by width and height:

<video src= "Hangge.mp4" Controls Width= "height=" ></video>

3. Pre-load media files:

Setting preload different property values tells the browser how to load a media file:

    • Value Auto: Let the browser download the entire file automatically

    • The value is none: The browser does not have to download the file beforehand

    • The value is metadata: Let the browser first get the data block at the beginning of the video file, enough to determine some basic information (such as the total length of the video, the first frame image, etc.)

<!--users click Play to start downloading--><video src= "Hangge.mp4" Controls preload= "None" ></video>

4. Auto Play:

(1) Using the AutoPlay property allows the browser to play the video file as soon as it is finished loading.

<video src= "Hangge.mp4" Controls autoplay></video>

(2) If AutoPlay is enabled, the player can be set to the muted state. This will mute the AutoPlay and prevent users from getting bored. You can click the Player speaker icon to turn the sound back on if you want.

<video src= "Hangge.mp4" Controls AutoPlay muted></video>

5. Loop Playback:

Use the Loop property to let the video play at the end, and then play back from the beginning.

<video src= "Hangge.mp4" Controls loop></video>

The above is this article about the HTML5 video tag usage and interpretation, there are questions can be in the message below the question.

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.