Compatibility issues when inserting audio files in HTML and playing them in browsers
|
Let's talk about some problems I have encountered after inserting audio files in HTML (playing mp3 files): 1. <embed type="audio/mp3" src="" autostart=true loop=false></embed> Problem: It works fine on IE8 (via media player plugin) but not on IE6 and IE7 You need to install the QuickTime plug-in to play it on Firefox Chrome converts it into the <vidio> tag on HTML5, which can play but will cause the entire screen to blue screen Opera won't autoplay 2. <embed type="audio/midi" src="" autostart=true loop=false></embed> Problem: The video will not play properly on IE6 and IE7, but it works fine on IE8 Normal on Firefox Chrome requires a dirty QuickTime plugin to play properly Opera won't autoplay 3. <object data="" /> Problem: The video cannot be played on IE6 and 7. IE8 will pop up a message saying "Articx is not used normally" Normal on Firefox Normal on Chrome Opera does not support 4. <audio src="" type="audio/mp3" /> Problem: HTML5 tags are only supported by Chrome 5. Copy code The code is as follows:<audio autoplay> <source src="" type="audio/mp3" /> <embed src="" type="audio/mp3"/> </audio> Problem: IE6 and IE7 do not support it, but other browsers do. Opera cannot play it automatically. 6. <embed src=""><noembed><bgsound src=""></noembed> Problem: IE6 and IE7 are not supported, other browsers are supported, Opera cannot play automatically Based on the above, I adopted the following method (executed under jQuery): Copy code The code is as follows:if (navigator.userAgent.indexOf("Chrome") > -1) { If it is Chrome: <audio src="" type="audio/mp3" autoplay="autoplay" hidden="true"></audio> }else if (navigator.userAgent.indexOf("Firefox")!=-1) { If it is Firefox: <embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed> }else if (navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all) { If it is IE(6,7,8): <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="" /></object> }else if (navigator.appName.indexOf("Opera")!=-1) { If it is Oprea: <embed src="" type="audio/mpeg" loop="false"></embed> }else{ <embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed> } or Copy code The code is as follows:var ua = navigator.userAgent.toLowerCase(); if(ua.match(/msie ([\d.]+)/)){ jQuery('#__alert_sound').html('<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="/sounds/alert/1.mp3" /></object>'); } else if(ua.match(/firefox\/([\d.]+)/)){ jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>'); } else if(ua.match(/chrome\/([\d.]+)/)){ jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>'); } else if(ua.match(/opera.([\d.]+)/)){ jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" hidden="true" loop="false"><noembed><bgsounds src="/sounds/alert/1.mp3"></noembed>'); } else if(ua.match(/version\/([\d.]+).*safari/)){ jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>'); } else { jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>'); } |
<<: A few experiences in self-cultivation of artists
>>: Teach you how to build the vue3.0 project architecture step by step
Recommend
MySQL 8.0.17 installation and simple configuration tutorial under macOS
If you don’t understand what I wrote, there may b...
Detailed description of ffmpeg Chinese parameters
FFMPEG 3.4.1 version parameter details Usage: ffm...
Vue computed properties
Table of contents 1. Basic Examples 2. Computed p...
An example of how to quickly deploy web applications using Tomcat in Docker
After learning the basic operations of Docker, we...
The whole process of Vue page first load optimization
Table of contents Preface 1. Image Optimization 2...
Steps to use autoconf to generate Makefile and compile the project
Preface Under Linux, compilation and linking requ...
Hadoop 3.1.1 Fully Distributed Installation Guide under CentOS 6.8 (Recommended)
Foregoing: This document is based on the assumpti...
How to set npm to load packages from multiple package sources at the same time
Table of contents 1. Build local storage 2. Creat...
How to check and organize website files using Dreamweaver8
What is the purpose of creating your own website u...
Install Docker on Linux (very simple installation method)
I have been quite free recently. I have been doin...
Detailed explanation of the example of exporting data from a specified table in MySQL
Detailed explanation of MySQL exporting data from...
Detailed explanation of how to pass password to ssh/scp command in bash script
Install SSHPASS For most recent operating systems...
Vue basic instructions example graphic explanation
Table of contents 1. v-on directive 1. Basic usag...
Linux system (Centos6.5 and above) installation jdk tutorial analysis
Article Structure 1. Preparation 2. Install Java ...
The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands
What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...