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

Summary of JavaScript JSON.stringify() usage

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

Summary of JavaScript JSON.stringify() usage

The Linux operating system uses Python to implement the visualization function of the task manager

Determine whether MySQL update will lock the table through examples

MySQL 5.7 zip version (zip version) installation and configuration steps detailed

MySQL 8.0.12 winx64 detailed installation tutorial

A brief discussion on two current limiting methods in Nginx

Detailed explanation based on event bubbling, event capture and event delegation

Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)

Using streaming queries in MySQL to avoid data OOM

Vue+Openlayer uses modify to modify the complete code of the element

Recommend

Introduction to the use of html base tag target=_parent

Linux loading vmlinux debugging

Briefly describe how to install Tomcat image and deploy web project in Docker

Understanding and application analysis of mysql pessimistic locking and optimistic locking

HTML blockquote tag usage and beautification

MySQL partitioning practice through Navicat

Introduction to the use of HTML element noscript

Review of the best web design works in 2012 [Part 1]

Introduction and analysis of three Binlog formats in MySQL

How to view the running time of MySQL statements through Query Profiler

Play mp3 or flash player code on the web page

Implementation code of html floating prompt box function

CSS layout tutorial: How to achieve vertical centering

New usage of watch and watchEffect in Vue 3

MySQL 8.0.12 installation configuration method and password change