Jump to content

play/pause button help

Bojak

By Bojak
in Javascript Help

 Share

Recommended Posts

Bojak Member

Bojak

Posted
Posted (edited) 
	<!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 ?

Edited by Bojak
Link to comment
https://forums.phpfreaks.com/topic/282879-playpause-button-help/
Share on other sites
Bojak Member

Bojak

Posted
  • Author
Posted 
	<!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(); 
	 } 
	 
	 } 
	 
	 
function HideContent(e) {
if(e.length > 1) { return; }
document.getElementById(video_controls_bar).style.display = "none";
}
function ShowContent(e) {
if(e.length > 1) { return; }
document.getElementById(video_controls_bar).style.display = "block";
}


	 </script>
	 </head> 
	 <body> 
	 <div id="video_player_box">
		<video id="my_video" width="550" height="310" autoplay> 
		<source src=""> </video>
	<div id="video_controls_bar" onHover="HideContent(); ShowContent();"> 
		<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

this is my attempt to hide the videos control div on hover. well it failed. im trying to do this while in full screen. also how do i make the volume slider like youtubes?

Bojak Member

Bojak

Posted
  • Author
Posted 
	<!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(); 
	 } 
	else 
	 { 
		vid.pause(); 
		playbtn.style.background = "url(play.png)"; 
		vid.play(); 
	aaac
	} 
	 } 
	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(); 
	 } 
	 
	 } 
	 
	 
 function show(id) {
    document.getElementById('video_controls_bar').style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById('video_controls_bar').style.visibility = "hidden";
  }


	 </script>
	 </head> 
	 <body> 
	 <div id="video_player_box">
		<video id="my_video" width="550" height="310" autoplay> 
		<source src="wildlife.wmv"> </video>
		<div onMouseOver="show('video_controls_bar')" onMouseOut="hide(video_controls_bar)">
	<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>
	 </div> 
	 </body> 
	 </html>

this sort of works. i want it to do the fullscreen controls only. when full screen is loaded i want the controls hidden as soon as full screen is toggled.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.