How to insert video into HTML and make it compatible with all browsers

There are two most commonly used methods to insert videos into HTML, one is the old <object></object> tag, and the other is the <video></video> tag in HTML5.

The compatibility of the former is impeccable, but it is not very convenient to use. The latter is very convenient to use, but the compatibility is a headache.

Although the latter has many compatibility issues, it is very convenient to use and in line with the future development trend of web design. Therefore, we use the latter as the main method to insert videos. Because of its compatibility issues, the former is used as an auxiliary method.

Here is an example:

Copy code

The code is as follows:

<video width="602px" height="345px" controls="controls">
<source src="public/video/test.mp4" type="video/mp4"></source>
<source src="public/video/test.ogg" type="video/ogg"></source>
your browser does not support the video tag
</video>

Currently, the video element supports three video formats:
Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

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

MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio encoding

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

Note: The format must meet the three detailed requirements above, such as MPEG 4, must be H.264 video and AAC audio.

In this case, if the video format is correct, we are satisfied with the compatibility results of most browsers, but IE678 does not support it, and their users are still a very large group in China, so we must think of another solution to support them:

Copy code

The code is as follows:

Some files are introduced here. In addition to the flv format video, there are also several swf or js files, all of which are generated by DW software. Friends who don’t want to study the <object></object> tags can use DW software to generate them. If you can cleverly integrate

These two pieces of code can get the ultimate code that is compatible with all major browsers.

So we can do this:

Use jQuery to determine whether the browser is IE (no need to determine the specific IE version, because the server may not pass the higher version of IE, temporarily all IE uses <object></object> tags), load different tags according to the version, the code is as follows:

Copy code

The code is as follows:

Don't forget to import the jquery file before writing this code

At this point, you can write HTML video code that is compatible with all browsers.

<<: Detailed process of installing logstash in Docker

>>: Reference SVG images in CSS to support dynamic color switching implementation code

How to insert video into HTML and make it compatible with all browsers

Docker creates MySQL explanation

Creating a Secondary Menu Using JavaScript

XHTML tags that are easily confused by the location of the use

Vite2.0 Pitfalls

WeChat applet scroll-view implements a solution to duplicate data loading when pulling up

MySQL 8.0 download and installation configuration graphic tutorial under Windows 10

Completely uninstall mysql. Personal test!

Example code for building an admin dashboard layout using CSS and JavaScript

JavaScript prototype and prototype chain details

How to center images horizontally and vertically in DIV or DIV

Recommend

Example of how rem is adapted for mobile devices

JavaScript basics for loop and array

Tips for importing csv, excel or sql files into MySQL

Detailed examples of Docker-compose networks

WeChat applet implements a simple calculator

Version numbers in css and js links in HTML (refresh cache)

Remote development with VSCode and SSH

A brief talk about the diff algorithm in Vue

js implements single click to modify the table

Detailed explanation of virtual DOM and diff algorithm in react

Detailed explanation of Getter usage in vuex

Linux CentOS 6.5 Uninstall, tar and install MySQL tutorial

Sample code for implementing PC resolution adaptation in Vue

Theory: The two years of user experience

How to use Dockerfile to create a mirror of the Java runtime environment