HTML5 Player with Flash fallback for non supporting browsers.
How do I make an html5 player with flash fallback for non supporting browsers.?
Implementing the HTML5 Audio Tag and the MP3 Player will fallback to the Flash player in those browsers that don't support the audio tag nor can play mp3 in it.. What is a html5 player with flash fallback for non supporting browsers.? How do you make a html5 player with flash fallback for non supporting browsers.? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.
HTML5 Player with Flash fallback for non supporting browsers. - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Player with Flash fallback for non supporting browsers.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3 id="toc-player-default">Player with default controls</h3> <audio id="audio_with_controls" controls> <source src="https://soundcloud.com/stanwmusic/lasttrail-mp3" type="audio/mpeg" /> <source src="https://ia601903.us.archive.org/29/items/StanWilliamsLastTrail/StanWilliamsLastTrail.ogg" type="audio/ogg" /> <object class="playerpreview" type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /> <param name="bgcolor" value="#222222" /> <param name="FlashVars" value="mp3=https://soundcloud.com/stanwmusic/lasttrail-mp3" /> <embed href="http://flash-mp3-player.net/medias/player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=https://soundcloud.com/stanwmusic/lasttrail-mp3" /> </object>
</audio><p> </p>
<div id="default_player_fallback"></div> <h3 id="toc-player-custom">Player with customized controls</h3> <audio id="audio"> <source src="https://soundcloud.com/stanwmusic/lasttrail-mp3" type="audio/mpeg" /> <source src="https://ia601903.us.archive.org/29/items/StanWilliamsLastTrail/StanWilliamsLastTrail.ogg" type="audio/ogg" /> <object id="flash_obj" class="playerpreview" type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#222222" /> <param name="FlashVars" value="mp3=https://soundcloud.com/stanwmusic/lasttrail-mp3" /> <embed href="http://flash-mp3-player.net/medias/player_mp3_mini.swf" bgcolor="#222222" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="https://soundcloud.com/stanwmusic/lasttrail-mp3" /> </object> </audio> <div id="custom_player_fallback"></div> <div id="player" style="display: none"> <button onClick="document.getElementById('audio').play()">Play</button> <button onClick="document.getElementById('audio').pause()">Pause</button> </div>
</script> <script src="js/index.js"></script>
</body>
</html>
HTML5 Player with Flash fallback for non supporting browsers. - Script Codes CSS Codes
h3 { font-family: 'Droid Sans', Arial, sans-serif; font-size: 14px;
}
body {background-color:#b0c4de;}
HTML5 Player with Flash fallback for non supporting browsers. - Script Codes JS Codes
if (document.createElement('audio').canPlayType) { if (!document.createElement('audio').canPlayType('audio/mpeg') && !document.createElement('audio').canPlayType('audio/ogg')) { swfobject.embedSWF("http://flash-mp3-player.net/medias/player_mp3_mini.swf", "default_player_fallback", "200", "20", "9.0.0", "", {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"}, {"bgcolor":"#222222"} ); swfobject.embedSWF("http://flash-mp3-player.net/medias/player_mp3_mini.swf", "custom_player_fallback", "200", "20", "9.0.0", "", {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"}, {"bgcolor":"#222222"} ); document.getElementById('audio_with_controls').style.display = 'none'; } else { // HTML5 audio + mp3 support document.getElementById('player').style.display = 'block'; }
} if (document.createElement('audio').canPlayType) { if (!document.createElement('audio').canPlayType('audio/mpeg') && !document.createElement('audio').canPlayType('audio/ogg')) { swfobject.embedSWF("http://flash-mp3-player.net/medias/player_mp3_mini.swf", "default_player_fallback", "200", "20", "9.0.0", "", {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"}, {"bgcolor":"#222222"} ); swfobject.embedSWF(http://flash-mp3-player.net/medias/player_mp3_mini.swf", "custom_player_fallback", "200", "20", "9.0.0", "", {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"}, {"bgcolor":"#222222"} ); document.getElementById('audio_with_controls').style.display = 'none'; } else { // HTML5 audio + mp3 support document.getElementById('player').style.display = 'block'; } }
/*
Modified by: Stan Williams http://stans-songs.com and http://stanwilliamsmusic.com
MP3 sample is Last Trail by: Stan Williams: http://www.stanwilliamsmusic.com and is licensed under http://creativecommons.org/licenses/by-nc-nd/3.0/
Attribution - NonCommercial - NoDerivatives
Download Last Trail.MP3 free here:
https://soundcloud.com/stanwmusic/lasttrail-mp3
Download the .ogg file free here:
https://archive.org/details/StanWilliamsLastTrail
------------------------------------------
Code samples are licensed under the Apache 2.0 License. http://www.apache.org/licenses/LICENSE-2.0
Flash MP3 player is from neolao production
http://flash-mp3-player.net/
Download the MP3 player free here: http://flash-mp3-player.net/players/mini/download/
MP3 player license:
The player is under the Creative Commons BY SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr
and MPL 1.1 license: https://www.mozilla.org/MPL/
You can use the player without citing the author.
originalcode author:
https://www.html5rocks.com/en/tutorials/audio/quick/
*/
Developer | Stan Williams |
Username | Stanssongs |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 3,484 Kb |
Views | 34,408 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
3D Hover Effect for Images | 4,341 Kb |
CSS social buttons and icons | 43,459 Kb |
Mouse Position Background Focus Effect | 4,213 Kb |
Responsive Company Page | 9,666 Kb |
Animated button effects using jquery, css, javascript and effeckts.js | 2,862 Kb |
Blog Page | 4,805 Kb |
Horizontal Menu Demo | 4,780 Kb |
Record Player with CSS3 Anims and HTML5 Audio | 3,404 Kb |
Pure CSS3 breadcrumb navigation, pixel perfect | 3,958 Kb |
Circular rotating music player with menu on back with html5 javascript and css3 | 5,572 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Easing | GreenSock | 2,043 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
React TODO | Enieste | 3,320 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!