Now if you want to use the video tag in the page, you need to consider three situations: those that support Ogg Theora or VP8 (if nothing happens to this thing) (Opera, Mozilla, Chrome), and those that support H.264 (Safari, IE 9, Chrome), are not supported (IE6, 7, 8). Okay, now let's understand HTML 5 video from a technical level, including the use of video tags, media properties and methods that can be used by video objects, and media events.
Use of Video tag
The Video tag contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, etc., as well as an internally used tag
(1) src attribute and poster attribute
You can imagine what the src attribute is used for. Like the tag, this attribute is used to specify the address of the video. The poster attribute is used to specify a picture to be displayed (preview picture) when the current video data is invalid. Invalid video data may mean that the video is loading, the video address may be incorrect, etc.
<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>
(2) preload attribute
The use of this attribute can also be understood by its name. This attribute is used to define whether the video is preloaded. The attribute has three optional values: none, metadata, and auto. If this attribute is not used, the default is auto.
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
None: No preloading. Using this attribute value, it is possible that the page author believes that the user does not expect this video, or to reduce the HTTP request.
Metadata: Partially preloaded. Using this attribute value means that the page author believes that the user does not expect this video, but provides the user with some metadata (including dimensions, first frame, track list, duration, etc.).
Auto: All preloaded.
(3) autoplay attribute
is another attribute whose use can be known by looking at its name. The Autoplay attribute is used to set whether the video plays automatically. It is a Boolean attribute. When it appears, it means automatic playback. If it is removed, it means not automatic playback.
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
Note that the values of Boolean attributes in HTML are not true and false. The correct usage is to use this attribute in a tag to indicate true. At this time, the attribute either has no value or its value is equal to its name (here, autoplay is or ); and not using this attribute in the tag means false (not autoplaying here is ).
(4) loop attribute
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>
It is clear at a glance that the loop attribute is used to specify whether the video is played in a loop. It is also a Boolean attribute.
(5) controls attribute
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>
The Controls attribute is used to indicate to the browser that the page author did not use a script to generate a playback controller and requires the browser to enable its own playback control bar.
The control bar must include playback pause control, playback progress control, volume control, etc.
The default playback control bar of each browser is different in the interface. Due to a weird problem with my browser, the Video tags of Firefox and Safari are not working properly, so I can only find screenshots of these two online.
(6) The width attribute and height attribute
are common attributes of tags. Needless to say more about this.
(7) source tag
<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>
The Source tag is used to specify multiple selectable (because the audio tag can also contain this tag, so media is used here instead of video) The browser can ultimately only select one) file address, and it can only be used when the media tag does not use the src attribute.
The browser checks whether the video specified by the tag can be played in the order of the source tag (the video format may not be supported, the video does not exist, etc.). If it cannot be played, change to the next one. This method is mostly used to be compatible with different browsers. The Source tag itself does not mean anything and cannot appear alone.
This tag contains three attributes: src, type, and media.
src attribute: used to specify the address of the media, the same as the video tag.
Type attribute: Used to describe the type of media specified by the src attribute, helping the browser determine whether it supports this category of media formats before obtaining the media.
Media attribute: Used to describe the medium in which the media is used. If not set, the default value is all, indicating that all media are supported. Have you thought about the media attribute of the
(8) A complete example
<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>
This code defines a video on the page. The preview image of this video is the attribute value of the poster and displays the browser's default media control bar. , preload the metadata of the video, play it in a loop, with a width of 900 pixels and a height of 240 pixels.
The first selected video address is the src attribute value of the first source tag, the video category is Ogg video, the video codec is Theora, the audio codec is Vorbis, and the playback medium is the monitor; No. 2. Select the video address which will not be described again. If you still want to be compatible with IE, you can add the Flash player tag set after the last source tag, or use a little JavaScript code.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related Reading:
How to solve the gap in the picture in H5
How to implement gesture sliding screen switching in HTML5 single page
How to create calendar verification function in H5
The above is the detailed content of How to insert video into HTML web page. For more information, please follow other related articles on the PHP Chinese website!

HTMLtagsareessentialforstructuringwebpages,enhancingaccessibility,SEO,andperformance.1)Theyareenclosedinanglebracketsandusedinpairstocreateahierarchicalstructure.2)SemantictagslikeandimproveuserexperienceandSEO.3)Creativetagslikeenabledynamicgraphics

Self-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Chinese version
Chinese version, very easy to use

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
