Search the Community
Showing results for tags 'controls'.
Found 2 results
-
I have php code that uses mp3 audio files stored in a database for the user to listen to. The page loads and the audio controls work and the files play on a desktop and laptop just fine. When trying to play a file on an android or IPhone, when you press the play (or any other control) nothing happens. It acts like the page is static. There is a home button on the webpage and it works so I know the page is interactive. Below is the code. I would appreciate any help. Thank you. <?php $sermons = $database->select("sermon","*");; foreach( $sermons as $sermon ) { $audio_file = 'http://xxxxxxx.com/sermons/'.$sermon['file_name']; $player = "<audio id='sermon_'$sermon[id] controls> <source src='$audio_file' type='audio/mpeg'> <source src='$audio_file' type='audio/mp3'> Your browser does not support the audio element. </audio>"; echo "<tr> <td>$sermon[sermon_date]</td> <td>$sermon[title]</td> <td>$sermon[speaker]</td> <td>$player</td> </tr>"; } ?>
-
<!DOCTYPE html> <html> <head> <style type="text/css"> div#video_player_box{ width:550px; background:#000; margin:0px auto;} div#video_controls_bar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } button#playpausebtn{ background:url(pause.png); border:none; width:16px; height:18px; cursor:pointer; opacity:0.5; } button#playpausebtn:hover{ opacity:1; } input#seekslider{ width:180px; } input#volumeslider{ width: 80px;} input[type='range'] { -webkit-appearance: none !important; background: #000; border:#666 1px solid; height:4px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background: #FFF; height:15px; width:15px; border-radius:100%; cursor:pointer; } </style> <script> var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn; function intializePlayer(){ // Set object references vid = document.getElementById("my_video"); playbtn = document.getElementById("playpausebtn"); seekslider = document.getElementById("seekslider"); curtimetext = document.getElementById("curtimetext"); durtimetext = document.getElementById("durtimetext"); mutebtn = document.getElementById("mutebtn"); volumeslider = document.getElementById("volumeslider"); fullscreenbtn = document.getElementById("fullscreenbtn"); // Add event listeners playbtn.addEventListener("click",playPause,false); seekslider.addEventListener("change",vidSeek,false); vid.addEventListener("timeupdate",seektimeupdate,false); mutebtn.addEventListener("click",vidmute,false); volumeslider.addEventListener("change",setvolume,false); fullscreenbtn.addEventListener("click",toggleFullScreen,false); } window.onload = intializePlayer; function playPause(){ if(vid.paused){ vid.play(); playbtn.style.background = "url(pause.png)"; vid.play(); playbtn.innerHTML = "pause"; } else { vid.pause(); playbtn.style.background = "url(play.png)"; vid.play(); playbtn.innerHTML = "play"; } } function vidSeek(){ var seekto = vid.duration * (seekslider.value / 100); vid.currentTime = seekto; } function seektimeupdate(){ var nt = vid.currentTime * (100 / vid.duration); seekslider.value = nt; var curmins = Math.floor(vid.currentTime / 60); var cursecs = Math.floor(vid.currentTime - curmins * 60); var durmins = Math.floor(vid.duration / 60); var dursecs = Math.floor(vid.duration - durmins * 60); if(cursecs < 10){ cursecs = "0"+cursecs; } if(dursecs < 10){ dursecs = "0"+dursecs; } if(curmins < 10){ curmins = "0"+curmins; } if(durmins < 10){ durmins = "0"+durmins; } curtimetext.innerHTML = curmins+":"+cursecs; durtimetext.innerHTML = durmins+":"+dursecs; } function vidmute(){ if(vid.muted){ vid.muted = false; mutebtn.innerHTML = "Mute"; } else { vid.muted = true; mutebtn.innerHTML = "Unmute"; } } function setvolume() { vid.volume = volumeslider.value / 100; } function toggleFullScreen(){ if(vid.requestFullScreen){ vid.requestFullScreen(); } else if(vid.webkitRequestFullScreen){ vid.webkitRequestFullScreen(); } else if(vid.mozRequestFullScreen){ vid.mozRequestFullScreen(); } } </script> </head> <body> <div id="video_player_box"> <video id="my_video" width="550" height="310" autoplay> <source src="Tom_and_Jerry.mp4"> </video> <div id="video_controls_bar"> <button id="playpausebtn"></button> <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <span id="curtimetext">00:00</span> / <span id="drtimetext">00:00</span> <button id="mutebtn">Mute</button> <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> <button id="fullscreenbtn">[ ]</button> </div> </div> </body> </html> i cant seem to get the play/pause button to show when the play.png and pause.png buttons arent available. also do you know where i can get free icons of play and pause button ?
