Created
August 3, 2019 18:20
-
-
Save ishahak/d76d46ce1423f86982366ac325f5b59d to your computer and use it in GitHub Desktop.
A Responsive JPlayer implementation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="author" content="Script Tutorials" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> | |
| <link type="text/css" href="/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" /> | |
| <script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script> | |
| <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script> | |
| <script type="text/javascript" src="/js/jplayer.playlist.min.js"></script> | |
| <style> | |
| /* https://www.svnlabs.com/blogs/jplayer-playbackrate-audio-speed-control-for-podcast-player/ */ | |
| #jp-speed { | |
| font-size: 3vw; | |
| font-style: oblique; | |
| text-align: center; | |
| cursor: pointer; | |
| margin: 0 0 10px 0; | |
| } | |
| #jp-thumbnail { | |
| width: 50px; | |
| margin: 3px 0px 2px 0px; | |
| border: 2px solid skyblue; | |
| border-radius: 10px; | |
| } | |
| #jp_container_1 { | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .jp-interface { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row; | |
| } | |
| .jp-controls { | |
| padding: 3px !important; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 3% !important; | |
| width: auto !important; | |
| min-width: 34px; | |
| } | |
| .jp-controls button { | |
| margin: 0; | |
| } | |
| .jp-controls-wrp { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .jp-previous, | |
| .jp-next { | |
| display: none !important; | |
| } | |
| .jp-progress-wrp { | |
| display: flex; | |
| flex-direction: column; | |
| max-width: 70% !important; | |
| width: 70% !important; | |
| margin-right: 3px | |
| } | |
| .jp-progress { | |
| position: relative !important; | |
| top: auto !important; | |
| left: auto !important; | |
| width: 100% !important; | |
| } | |
| .jp-pushdown { | |
| height: 16px; | |
| } | |
| .jp-time-holder { | |
| position: relative !important; | |
| top: auto !important; | |
| left: auto !important; | |
| width: 100% !important; | |
| } | |
| .jp-controls-wrp2 { | |
| margin: 2%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center | |
| } | |
| .jp-pushdown2 { | |
| height: 20px; | |
| } | |
| .jp-volume-controls { | |
| margin: 2%; | |
| width: 70px !important; | |
| position: relative !important; | |
| top: auto !important; | |
| left: auto !important; | |
| display: flex !important; | |
| align-items: center; | |
| } | |
| .jp-volume-max, | |
| .jp-mute, | |
| .jp-volume-bar { | |
| position: relative !important; | |
| top: auto !important; | |
| left: auto !important; | |
| } | |
| .jp-volume-max { | |
| margin-left: 5px | |
| } | |
| .jp-toggles { | |
| position: relative !important; | |
| top: auto !important; | |
| left: auto !important; | |
| } | |
| @media only screen and (min-width: 460px) { | |
| #jp-speed { | |
| font-size: 14px; | |
| } | |
| } | |
| @media only screen and (min-width: 620px) { | |
| .jp-previous, | |
| .jp-next { | |
| display: block!important; | |
| } | |
| #jp_container_1 { | |
| width: 90vw; | |
| margin: 0 auto; | |
| } | |
| #jp-thumbnail { | |
| margin: 10px 0px -4px 0px; | |
| width: 80px; | |
| } | |
| .jp-interface { | |
| height: 120px !important; | |
| } | |
| .jp-controls { | |
| width: 160px !important; | |
| transform: scale(1.4); | |
| margin: 14px; | |
| } | |
| .jp-volume-controls { | |
| width: 80px !important; | |
| transform: scale(1.4); | |
| margin: 14px; | |
| } | |
| .jp-progress { | |
| transform: scaleY(1.2); | |
| } | |
| .jp-playlist { | |
| font-size: 2.3vw; | |
| } | |
| .jp-current-time, | |
| .jp-duration { | |
| font-size: 1.8vw; | |
| } | |
| } | |
| @media only screen and (min-width: 1120px) { | |
| #jp_container_1 { | |
| width: 1024px; | |
| } | |
| .jp-playlist { | |
| font-size: 22px; | |
| } | |
| .jp-interface { | |
| height: 140px !important; | |
| } | |
| #jp-thumbnail { | |
| margin: 10px 0px -4px 0px; | |
| width: 90px; | |
| } | |
| .jp-progress-wrp { | |
| max-width: 80% !important; | |
| width: 80% !important | |
| } | |
| .jp-controls { | |
| width: 180px !important; | |
| transform: scale(1.7); | |
| } | |
| .jp-volume-controls { | |
| width: 90px !important; | |
| transform: scale(1.7); | |
| padding: 0 12px; | |
| } | |
| .jp-current-time, | |
| .jp-duration { | |
| font-size: 16px; | |
| } | |
| #jp-speed { | |
| font-size: 1.6vw; | |
| } | |
| } | |
| @media only screen and (min-width: 1600px) { | |
| #jp_container_1 { | |
| width: 1480px; | |
| } | |
| .jp-current-time, | |
| .jp-duration { | |
| font-size: 22px; | |
| } | |
| .jp-playlist { | |
| font-size: 34px; | |
| } | |
| #jp-speed { | |
| font-size: 25px; | |
| } | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| var myPlaylist = new jPlayerPlaylist({ | |
| jPlayer: "#jquery_jplayer_1", | |
| cssSelectorAncestor: "#jp_container_1" | |
| }, [{ | |
| title: "Cro Magnon Man", | |
| artist: "The Stark Palace", | |
| mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", | |
| }, { | |
| title: "Dancing Queen", | |
| m4a: "./DancingQueen.m4a", | |
| }], { | |
| playlistOptions: { | |
| autoPlay: true, | |
| enableRemoveControls: false | |
| }, | |
| swfPath: "/js", | |
| supplied: "mp3, m4a", | |
| smoothPlayBar: true, | |
| keyEnabled: true, | |
| useStateClassSkin: true, | |
| //we cancel the recognition of mobiles by adding '1', | |
| // so that volume controls are always shown | |
| noVolume: { | |
| ipad: /1ipad/, | |
| iphone: /1iphone/, | |
| ipod: /1ipod/, | |
| android_pad: /1android(?!.*?mobile)/, | |
| android_phone: /1android.*?mobile/, | |
| blackberry: /1blackberry/, | |
| windows_ce: /1windows ce/, | |
| iemobile: /1iemobile/, | |
| webos: /1webos/, | |
| playbook: /1playbook/ | |
| }, | |
| solution: 'html', | |
| audioFullScreen: false | |
| }); | |
| $('#btnStart').on('click', function() { | |
| myPlaylist.setPlaylist([{ | |
| title: "Dancing Queen", | |
| artist: "ABBA", | |
| m4a: "./DancingQueen.m4a", | |
| }, { | |
| title: "Head Over Heels", | |
| artist: "ABBA", | |
| m4a: "./HeadOverHeels.m4a", | |
| }, { | |
| title: "Chiquitita", | |
| artist: "ABBA", | |
| m4a: "./Chiquitita.m4a", | |
| }, { | |
| title: "Super Trouper", | |
| artist: "ABBA", | |
| m4a: "./SuperTouper.m4a", | |
| }]); | |
| }); | |
| }); /*ready*/ | |
| var currentSpeedIdx = 0; | |
| var speeds = [1, 1.1, 1.2, 1.3, 1.4]; | |
| function jpSpeedControl() { | |
| currentSpeedIdx = currentSpeedIdx + 1 < speeds.length ? currentSpeedIdx + 1 : 0; | |
| jQuery("#jquery_jplayer_1").jPlayer("option", "playbackRate", speeds[currentSpeedIdx]); | |
| jQuery("#jp-speed").html('x' + speeds[currentSpeedIdx]); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <p> | |
| <button id="btnStart">Click me to set a new playlist</button> | |
| </p> | |
| <div id="jquery_jplayer_1" class="jp-jplayer"></div> | |
| <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"> | |
| <div class="jp-type-playlist"> | |
| <div class="jp-gui jp-interface"> | |
| <div class="jp-controls"> | |
| <div class="jp-controls-wrp"> | |
| <button class="jp-previous" role="button" tabindex="0">previous</button> | |
| <button class="jp-play" role="button" tabindex="0">play</button> | |
| <button class="jp-next" role="button" tabindex="0">next</button> | |
| </div> | |
| <button class="jp-stop" role="button" tabindex="0">stop</button> | |
| </div> | |
| <div class="jp-progress-wrp"> | |
| <div id="jp-speed" title="Speed" onclick="jpSpeedControl();">x1</div> | |
| <div class="jp-progress"> | |
| <div class="jp-seek-bar"> | |
| <div class="jp-play-bar"></div> | |
| </div> | |
| </div> | |
| <div class="jp-time-holder"> | |
| <div class="jp-current-time" role="timer" aria-label="time"> </div> | |
| <div class="jp-duration" role="timer" aria-label="duration"> </div> | |
| </div> | |
| </div> | |
| <div class="jp-controls-wrp2"> | |
| <img id="jp-thumbnail" src="default-icon.png"> | |
| <div class="jp-volume-controls"> | |
| <button class="jp-mute" role="button" tabindex="0">mute</button> | |
| <div class="jp-volume-bar"> | |
| <div class="jp-volume-bar-value"></div> | |
| </div> | |
| <button class="jp-volume-max" role="button" tabindex="0">max volume</button> | |
| </div> | |
| <div class="jp-toggles"> | |
| <!-- we hide shuffle and repeat buttons. | |
| enabling them requires some tweaking for responsiveness. | |
| <button class="jp-repeat" role="button" tabindex="0">repeat</button> | |
| <button class="jp-shuffle" role="button" tabindex="0">shuffle</button> | |
| --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="jp-playlist"> | |
| <ul> | |
| <li> </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here we demonstrate how to change jPlayer into responsiveness.
The other files were:
/skin/blue.monday/css/jplayer.blue.monday.min.css
/skin/blue.monday/image/jplayer.blue.monday.jpg
/skin/blue.monday/image/jplayer.blue.monday.seeking.gif
/js/jquery-2.2.4.min.js
/js/jquery.jplayer.min.js
/js/jplayer.playlist.min.js
/default-icon.png