Detailed introduction to the video tag in html5

This article brings you a detailed introduction to the video tag in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<video src="http://www.lorem.com/video/lorem.mp4" controls="controls" width="500" height="300"></video>

MP4 = MPEG 4 file using H264 video codec and AAC audio codec

WebM = WebM file uses VP8 video codec and Vorbis audio codec

Ogg = Ogg file uses Theora video codec and Vorbis audio codec

Through the above information we will find Only h264-encoded MP4 videos (MPEG-LA company), VP8-encoded webm format videos (Google company) and Theora-encoded ogg format videos (iTouch development) can support the HTML5

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:

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频！</video>

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:

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>

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

controls: The occurrence of this attribute means Display controls to the user, such as play buttons, etc. Usage: controls="controls"

height: set height

width: set width

loop: automatic replay , Usage: loop="loop"

preload: The video is loaded and prepared to play when the page is loaded. Usage: preload="auto" - Load the entire video when the page is loaded; preload="meta" - Only load metadata when the page loads; preload="none" - do not load the video when the page loads. Note: If autoplay is used, ignore preload

src: URL to play the video

I will introduce the

The above is the detailed content of Detailed introduction to the video tag in html5. For more information, please follow other related articles on the PHP Chinese website!