Perfect realization of embedded media in web pages

The insertion and control of video and audio is often required in a project. But in use, it is not so simple to make the browser render video and audio perfectly. The different ways of parsing each browser make this behavior very difficult to implement. I touched a lot of stones and found that the following method is feasible. (The video format I tested was in swf format, and the audio was in mp3 format)

Flash video playback
1. The <video> tag defines video, such as movie clips or other video streams.
Does that solve the problem, no, it doesn't support IE8 and below.


Tip: Text content can be placed between the opening and closing tags so that the inner text will be displayed if older browsers do not support it.

1. The <embed> tag defines embedded content, such as plugins.
Does it work now? Or not. Because IE on windows platform uses Activex controls to play flash while other browsers use Netscape plug-in technology to play flash.
The <embed> tag is used for Netscape Navigator 2.0 and later browsers or other browsers that support Netscape plug-ins.


2. The <object> tag tag is used to contain objects such as images, audio, video, Java applets, ActiveX, PDF and Flash.
The browser's object support depends on the object type. Unfortunately, major browsers all use different code to load the same object type.
Fortunately, the object object provides a solution. If the object element is not displayed, the executions in <object> and </object> code between. In this way, we can nest multiple object elements (one for each browser).
Comments: Tags define run-time settings for objects.


Finally, put it together:
<object id="" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
        WIDTH="740" HEIGHT="420" id="myMovieName">
            <!-- src -->
            <param name=movie value="http://www.errenzhuan.cc/swf/videoPlayer.swf">
            <param name=quality value="high">
            <param name=bgcolor value="#000">
            <param name=allowfullscreen value="true">
            <param name=wmode value="transparent">
            <param name=allowscriptaccess value="always">
            <!-- important -->
            <param name=flashvars value="userid=06232AA4161AAAB6&videoid=E9A575F51098D4C19C33DC5901307461&mode=api&autostart=false&jscontrol=false">
            <embed src="http://www.errenzhuan.cc/swf/videoPlayer.swf" quality="high" bgcolor="#000" width="740" height="420"
                        name="myMovieName" align="" type="application/x-shockwave-flash"
                        pluginspage="http://www.macromedia.com/go/getflashplayer" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" flashvars="userid=06232AA4161AAAB6&videoid=E9A575F51098D4C19C33DC5901307461&mode=api&autostart=false&jscontrol=false">
            </embed>
</object>
• The "classid" and "codebase" attributes must be written exactly as shown in the example above, they tell the browser to automatically download the address of the flash player. If you have not installed flash player, then browsers after IE3.0 will pop up a prompt box to ask whether you want to install flash player automatically.
• The "pluginspage" attribute tells the browser the address to download the flash player. If the flash player has not been installed, the user needs to restart the browser after installation to use it normally.

Audio playback and control

1. <audio> tags define sounds, such as music or other audio streams.
Tip: Text content can be placed between the opening and closing tags so that the inner text will be displayed if older browsers do not support it.
It is similar to <video>, it also does not support IE8 and below browsers.


2. <audio>+<embed>
<audio autoplay="autoplay" id="audio">
  <source src={{audioSrc}} type="audio/mp3" />
  <embed id="embed" height=" 0" type="audio/mp3" src={{audioSrc}} name="sound" MASTERSOUND />
</audio>

After detection, Firefox cannot play, but other browsers can render it perfectly.


3. <object>


<object data={{audioSrc}} type="application/x-mplayer2" width="0" height="0" id="object">
<param name="src" value={{audioSrc}}>
< param name="autostart" value="1">
<param name="playcount" value="infinite">
</object>

Now, we can use different methods for different browsers through browser detection.

if(navigator.userAgent.indexOf("Firefox")!=-1){
//Firefox
}else{
//Other browsers
}

4. The js of <audio>, <embed> and <object> control play and pause
• <audio> : audio.pause() / audio.play();
•<embed> : embed.stop() / embed.play();
•<object> : obj.controls.stop() / obj.controls. play();

If you think this article is good, please help click the recommendation below, thank you!

If you think this article is good, please help click the recommendation below. The article is original without explanation. Please indicate the source for reprinting, thank you!