How to embed video in html5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to embed video in html5

王林

Nov 17, 2020 pm 03:48 PM

html5 video

How to embed video in html5

First of all, we need to know that HTML5 supports playing audio and video files directly in the browser, without using the Adobe flash plug-in.

Disadvantages of plug-ins: Plug-ins are one of the main reasons for browser crashes, especially flash, which has many problems.

(Video learning recommendation: html5 video tutorial)

To embed videos in web pages, use the video element.

Definition and usage

Tips

You can place text content between the start tag and the end tag, so that old browsers can display information that the tag is not supported

Attributes:

How to embed video in html5

Example:

<!DOCTYPE HTML>
<html>
<body>
 
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
 
</body>
</html>

Copy after login

How to embed video in html5

Video formats supported by the browser

How to embed video in html5

Ogg = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG 4 = MPEG 4 file with H.264 video encoding and ACC audio file

WebM = with WebM files with VP8 video encoding and Vorbis audio encoding

Summary: No single format can support all browsers

The simplest method is to use both Mp4 and Ogv audio and video formats

2. tag

Insert the element source

in the middle of The source element is used to set the video format and contains the attributes src and type

Example:

<video src=&#39;视频1.mp4&#39; heigth=&#39;500px&#39; controls>
  <source src=&#39;视频2.mp4&#39; type=&#39;video/mp4&#39;>   <!-- 当‘视频1.mp4’无法播放时，会跳转到src=&#39;视频2.mp4&#39; -->
  <source src=&#39;视频2.ogv&#39; type=&#39;video/ogg&#39;>   <!-- 当浏览器不支持MP4格式的视频时，会自动找此处ogv格式的视频 -->
  <source src=&#39;视频2.webm&#39; type=&#39;video/webm&#39;>
</video>

Copy after login

Two optional video formats Mp4 and Ogv are provided here. Video links are now no longer given through the src attribute of the video element, but are pointed out separately through the source element. The source element allows us to specify video files in multiple optional formats, so that when the browser does not support the format written in the front, the video file in the later format can be selected.

Related recommendations: h5

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

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