How to solve the problem that MP4 videos cannot be played using the video tag in H5 web pages

Why the recorded MP4 video 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? In fact, it is a video encoding problem. Although the formats are all MP4, HTML only supports the H.264 encoding format. 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> tag. ：When we use the html4 protocol to build a website, if we want to play a video on the web page, 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 a cool <video> appeared. The function of this tag is to allow multimedia files to be played easily on web pages. Playing a video in

html requires only one tag:

1. ##

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

About the video formats and encodings supported by the <video> tag:

• MP4 = MPEG 4 file uses H264 video codec and AAC audio codec Codecs

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

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

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

What if the browser does not support the video tag?

For example, IE browser and older versions of browsers 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:

2. ##"movie.ogg" type="video/ogg"> ;

##"movie.mp4"

type="video/mp4"> Your browser does not support this video format.

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

1. ##controls: The occurrence of this attribute means that controls are displayed to the user, such as play buttons, etc. Usage: controls="controls"

2. height: Set the height width: Set the width

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

4. preload :The video is loaded and prepared for playback when the page is loaded. Usage: preload="auto" - load the entire video when the page loads; preload="meta" - only load metadata after the page loads; preload="none" - Video is not loaded when the page loads.

   Note: If autoplay is used, preload is ignored

5. #src: URL to play the video

6. About< I will introduce the video> tag here. I believe everyone has a deep understanding of this tag!

[Recommended course:

Html5 video tutorial

]

The above is the detailed content of How to solve the problem that MP4 videos cannot be played using the video tag in H5 web pages. For more information, please follow other related articles on the PHP Chinese website!