• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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