Home > Web Front-end > H5 Tutorial > body text

Detailed introduction to the video tag in html5

不言
Release: 2018-10-26 14:50:08
forward
4682 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!