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:<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1"> <param name="movie" value="FLVPlayer_Progressive.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" /> <param name="swfversion" value="8,0,0,0" /> <!-- This param tag prompts users of Flash Player 6.0 r65 and later to download the latest version of Flash Player. If you don't want users to see this prompt, remove it. --> <param name="expressinstall" value="expressInstall.swf" /> </object> 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:<script> if($.browser.msie){ document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">'+ '<param name="movie" value="FLVPlayer_Progressive.swf" />'+ '<param name="quality" value="high" />'+ '<param name="wmode" value="opaque" />'+ '<param name="scale" value="noscale" />'+ '<param name="salign" value="lt" />'+ '<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />'+ '<param name="swfversion" value="8,0,0,0" />'+ '<!-- This param tag prompts users of Flash Player 6.0 r65 and later to download the latest version of Flash Player. If you don't want users to see this prompt, remove it. -->'+ '<param name="expressinstall" value="expressInstall.swf" />'+ '</object>'); }else{ document.write('<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>'); } </script> 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
Recommend
Detailed example of MySQL data storage process parameters
There are three types of MySQL stored procedure p...
MySQL 8.0.17 decompression version installation and configuration method graphic tutorial
I'll record the problems I encountered during...
Front-end state management (Part 1)
Table of contents 1. What is front-end state mana...
Vue+ssh framework to realize online chat
This article shares the specific code of Vue+ssh ...
How to query a record in Mysql in which page of paging
Preface In practice, we may encounter such a prob...
Complete steps for deploying jar package projects using Shell scripts in Linux
1. Install JDK Check the computer's operating...
How to use the jquery editor plugin tinyMCE
Modify the simplified file size and download the ...
How to configure ssh to log in to Linux using git bash
1. First, generate the public key and private key...
How to implement Docker Registry to build a private image warehouse
The image of the microservice will be uploaded to...
How to hide the text in the a tag and display the image? Compatible with 360 mode rendering
Often you will encounter a style of <a> tag ...
Vue practice of preventing multiple clicks
Generally, click events will be divided into diff...
Detailed explanation of COLLATION examples in MySQL that you may have overlooked
Preface The string types of MySQL database are CH...
JavaScript+html implements random QR code verification on front-end pages
Share the cool front-end page random QR code veri...
How to display and format json data on html page
JSON data is displayed and formatted on the HTML ...
Summary of ways to implement single sign-on in Vue
The project has been suspended recently, and the ...