• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 405
  • Last Modified:

Single javascript function rather than multiple???

I have created a simple ipad single webage with 7 videos to play.
On the click of each video the button it needs to open full screen automatically and close on finish. I have managed to sort this ok.

I would like to know if there is a good say of having 1 JavaScript EventListener for all 7 videos?? Or do I need to do what I have done and repeat it 7 times?

Also on the Event Listener how can I have on mouse click and well as touch??

Lastly is there any simple improvements you cay suggest as im not the best js programmer.




<!DOCTYPE html> 
<html> 
<head>
<title></title>
    
<!-- Mobile Viewport -->
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

<!-- iOS Full Screen -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- iOS Status Bar Style (default, black, black-translucent) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<style>

/* top elements */
* { 
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	/*-webkit-user-select: none;                             /* Disable copy & paste */
	/*-webkit-tap-highlight-color: rgba(0,0,0,0); */       /* Remove link highlight color*/
	-webkit-tap-highlight-color: rgba(0,174,230,0.5);
	margin:0;
	padding: 0;
	text-shadow:none;
}

html, body {
	background: url(background.png) no-repeat;
	background-size: 1024px 768px;
}


#wrapper {
	width:1024px;
	height:768px;
}

A:link {text-decoration: none; color:#2799C7}
A:visited {text-decoration: none; color:#2799C7}
A:hover {text-decoration: none; color: #9029CC;}
A:active {text-decoration: none}


#topset {
	position:absolute;
	left:38px;
	top:5px;
}

#bottomset {
	position:absolute;
	left:154px;
	top:630px;
}


.video { height: 1px; opacity: 0; position: absolute; width: 1px; }
.play {
	position:relative;  

	width: 215px;
	height: 115px;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
	float:left;
	text-align:center;
	margin: 10px;

	background-size: 215px 111px !important;
	border:3px solid #FFF;
	-webkit-box-shadow: 0px 0px 10px #404040 ;
	-moz-box-shadow: 0px 0px 10px #404040 ;
	box-shadow: 0px 0px 10px #404040 ; 
}

.loading {
	font-family:Arial, Helvetica, sans-serif;
	color: #505050;
	font-size:12px;
	padding-left:9px;
	padding-top:48px;
	text-decoration:none;
}
</style>
</head>
<body>

<div id="wrapper">
 

    <div id="topset">
        <video src="video1.mp4" class="video" id="video1" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play1" style="background:url(video1.png) no-repeat; "></a>
        
        
        <video src="video2.mp4" class="video" id="video2" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play2" style="background:url(video2.png) no-repeat; "></a>
        
        
        <video src="video3.mp4" class="video" id="video3" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play3" style="background:url(video3.png) no-repeat; "></a>
        
        
        <video src="video4.mp4" class="video" id="video4" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play4" style="background:url(video4.png) no-repeat; "></a>
    </div>
    
    <div id="bottomset">
        <video src="video5.mp4" class="video" id="video5" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play5" style="background:url(video5.png) no-repeat; "></a>
         
         
        <video src="video6.mp4" class="video" id="video6" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play6" style="background:url(video6.png) no-repeat; "></a>
         
         
        <video src="video7.mp4" class="video" id="video7" type="video/mp4" controls onended="CloseVideo(this.id)"></video>
        <a href="#" class="play" id="play7" style="background:url(video7.png) no-repeat; "></a>
    </div>



<!--END OF WRAPPER-->
</div>
 
 
 
 
 
 
<script type="text/javascript"> 
var video1 = document.getElementById('video1'),
video2 = document.getElementById('video2'),
video3 = document.getElementById('video3'),
video4 = document.getElementById('video4'),
video5 = document.getElementById('video5'),
video6 = document.getElementById('video6'),
video7 = document.getElementById('video7'),
//play = document.getElementById('play'),
time;
window.clearInterval(time);








video1.addEventListener('webkitbeginfullscreen', function() {
	//play1.innerText = 'play fullscreen video';
	window.clearInterval(time);
});
play1.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video1.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play1.innerHTML = '<div class="loading">Loading</div>';
	video1.play();	
});
video1.addEventListener('webkitendfullscreen', function() {
	play1.innerHTML = '';
	video1.load();
});




video2.addEventListener('webkitbeginfullscreen', function() {
	window.clearInterval(time);
});
play2.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video2.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play2.innerHTML = '<div class="loading">Loading</div>';
	video2.play();	
});
video2.addEventListener('webkitendfullscreen', function() {
	play2.innerHTML = '';
	video2.load();
});



 
video3.addEventListener('webkitbeginfullscreen', function() {
	window.clearInterval(time);
});
play3.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video3.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play3.innerHTML = '<div class="loading">Loading</div>';
	video3.play();	
});
video3.addEventListener('webkitendfullscreen', function() {
	play3.innerHTML = '';
	video3.load();
});



 
video4.addEventListener('webkitbeginfullscreen', function() {
	window.clearInterval(time);
});
play4.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video4.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play4.innerHTML = '<div class="loading">Loading</div>';
	video4.play();	
});
video4.addEventListener('webkitendfullscreen', function() {
	play4.innerHTML = '';
	video4.load();
});



 
video5.addEventListener('webkitbeginfullscreen', function() {
	window.clearInterval(time);
});
play5.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video5.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play5.innerHTML = '<div class="loading">Loading</div>';
	video5.play();	
});
video5.addEventListener('webkitendfullscreen', function() {
	play5.innerHTML = '';
	video5.load();
});



 
video6.addEventListener('webkitbeginfullscreen', function() {
	window.clearInterval(time);
});
play6.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video6.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play6.innerHTML = '<div class="loading">Loading</div>';
	video6.play();	
});
video6.addEventListener('webkitendfullscreen', function() {
	play6.innerHTML = '';
	video6.load();
});



 
video7.addEventListener('webkitbeginfullscreen', function() {
	window.clearInterval(time);
});
play7.addEventListener('touchstart', function() {
	time = window.setInterval(function() {
		try {
			video7.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play7.innerHTML = '<div class="loading">Loading</div>';
	video7.play();	
});
video7.addEventListener('webkitendfullscreen', function() {
	play7.innerHTML = '';
	video7.load();
});








video0.addEventListener('webkitendfullscreen', function() {
	video0.load();
});


function CloseVideo(video_id) {
	//alert (video_id);
	document.getElementById(video_id).webkitExitFullScreen();
	window.clearInterval(time);
	//document.getElementsByTagName('video')[0].webkitExitFullScreen();  // CLOSES FULLSCREEN
	//$('#video')[0].webkitExitFullScreen(); // CLOSES FULLSCREEN
	//document.getElementsByTagName(video_id)[0].webkitExitFullScreen();
	video_id.pause();
	video_id.load();
}
</script>
 
</body>
</html>

Open in new window



Many Thanks

Steve
0
Steve Tinsley
Asked:
Steve Tinsley
  • 3
1 Solution
 
oheilCommented:
var id;
var video = document.getElementById('video1')
var time;
window.clearInterval(time);
for(i=1;i<=7;i++) {
	id="video"+i;
	video=document.getElementById(id);
	
	video.addEventListener('webkitbeginfullscreen', function() {
		window.clearInterval(time);
	});
	play.addEventListener('touchstart', function() {
		time = window.setInterval(function() {
			try {
				video.webkitEnterFullscreen();
			}
			catch(e) {}
		}, 800);
		play.innerHTML = '<div class="loading">Loading</div>';
		video.play();	
	});
	video.addEventListener('webkitendfullscreen', function() {
		play.innerHTML = '';
		video.load();
	});
}

video0.addEventListener('webkitendfullscreen', function() {
	video0.load();
});
function CloseVideo(video_id) {
	//alert (video_id);
	document.getElementById(video_id).webkitExitFullScreen();
	window.clearInterval(time);
	//document.getElementsByTagName('video')[0].webkitExitFullScreen();  // CLOSES FULLSCREEN
	//$('#video')[0].webkitExitFullScreen(); // CLOSES FULLSCREEN
	//document.getElementsByTagName(video_id)[0].webkitExitFullScreen();
	video_id.pause();
	video_id.load();
}

Open in new window


Oli
0
 
oheilCommented:
I just realized, that this is not the answert.. give me a few minutes...

:-)

Oli
0
 
oheilCommented:
function play() {
	re=/^play(\d+)$/;
	playid=this.id;
	match=re.exec(playid);
	index=match[1];
	videoid="video"+index;
	
	play=document.getElementById(playid);
	video=document.getElementById(videoid);
	
	time = window.setInterval(function() {
		try {
			video.webkitEnterFullscreen();
		}
		catch(e) {}
	}, 800);
	play.innerHTML = '<div class="loading">Loading</div>';
	video.play();	
}
function load() {
	re=/^video(\d+)$/;
	videoid=this.id;
	match=re.exec(videoid);
	index=match[1];
	playid="play"+index;
	
	play=document.getElementById(playid);
	video=document.getElementById(videoid);

	play.innerHTML = '';
	video.load();
}

var idv;
var idp;
var video;
var time;
window.clearInterval(time);
for(i=1;i<=7;i++) {
	idv="video"+i;
	idp="play"+i;

	video=document.getElementById(idv);
	play=document.getElementById(idp);

	video.addEventListener('webkitbeginfullscreen', function() {
		window.clearInterval(time);
	});
	play.addEventListener('touchstart',play);
	video.addEventListener('webkitendfullscreen',load);
}

video0.addEventListener('webkitendfullscreen', function() {
	video0.load();
});
function CloseVideo(video_id) {
	//alert (video_id);
	document.getElementById(video_id).webkitExitFullScreen();
	window.clearInterval(time);
	//document.getElementsByTagName('video')[0].webkitExitFullScreen();  // CLOSES FULLSCREEN
	//$('#video')[0].webkitExitFullScreen(); // CLOSES FULLSCREEN
	//document.getElementsByTagName(video_id)[0].webkitExitFullScreen();
	video_id.pause();
	video_id.load();
}

Open in new window


Now there a two generic handlers: play() and load().
I tested it with my little test code, but there may be errors regarding your specific code during copy&paste and changing it.
But I think the idea is clear.

Oli
0
 
Steve TinsleyAuthor Commented:
Thank you for helping me on this one!!
I haven't had a chance to fully test it but it definitely looks like it should be along the lines to what I want if not perfect!

Thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now