Analyze the reason why the MP4 video in the video tag in the H5 web page cannot be played

Today a friend asked me: Why can the MP4 video I recorded can be played locally but cannot be played normally using the video multimedia playback tag of html5, with only a progress bar and no image displayed? At that time, I was also curious about whether MP4 videos could be played using the video tag. I used it often. After all, we are good friends, so I went to check the problem myself. I came to the conclusion that it was actually a video encoding problem. Although the format They are all MP4, but HTML only supports H.264 encoding format, so I have no choice but to re-convert the encoding.

In order to avoid everyone encountering the same problem, I will give you some knowledge about html5 about the <video></video> tag:

When using the html4 protocol When we want to play a video on the website, we need to use flash to play it, or use an embedded page to achieve it. For html5, these two methods are very inconvenient because of an awesome appears. The function of this tag is to allow multimedia files to be played easily on web pages. Playing a video in

html only requires one tag:

##Although there is a lot less code, the functions are very sound. This is one of the highlights of html5 Bar!

About the video formats and encodings supported by the

• MP4 = MPEG 4 file using H264 video codec and AACAudioCodes

• WebM = WebM files use the VP8 video codec and Vorbis audio codec

• Ogg = Ogg files use Theora video codec and Vorbis audio codec

Through the above information, we will find that there are only h264-encoded MP4 videos (MPEG-LA company) and VP8-encoded webm format videos (Google company) and Theora-encoded ogg format video (iTouch development) can support the html5

What if the browser does not support the video tag?

For exampleIE browserThere are also old versions of browsers that do not support html5 very well. What should we do when users use these browsers to open our web pages with videos? ?

We can write the code like this:

In this way, in a browser that does not support html5, it will prompt "Your browser does not support playing this video!"!

About the extended parameter description of the video tag:

The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognized format, so we only need to prepare a few more videos in different formats.

Usage:

1. ##
##"movie.ogg"

type="video/ ogg">

##"movie.mp4"
2. type=

   "video/mp4">

   Your browser does not support this video format.

1. autoplay: The presence of this attribute means that the video will automatically play after it is ready. Usage: autoplay="autoplay"

2. controls : The appearance of this attribute means that controls are displayed to the user, such as the playback button, etc. Usage: controls="controls"

3. height: setting Height width: Set the width

4. loop: Automatic replay, usage: loop="loop"

5. preload: The video is loaded when the page loads And prepare to play, usage: preload="auto" - load the entire video when the page is loaded; preload="meta" - only load metadata after the page is loaded; preload="none" - do not load when the page is loaded video. Note: If autoplay is used, preload is ignored

6. #src: URL to play the video

About tag here. I believe everyone already has a deep understanding of this tag!

【Related recommendations】

1.html/css free video tutorial

2. Teach you how to use HTML5 audio and Video

3. Teach you how to enhance the compatibility of video tags in H5 in browsers

4. Detailed explanation of HTML5 video display standards

5. Brief description of the parameters and attributes of the

The above is the detailed content of Analyze the reason why the MP4 video in the video tag in the H5 web page cannot be played. For more information, please follow other related articles on the PHP Chinese website!