Solved

Single javascript function rather than multiple???

Posted on 2013-10-27
4
392 Views
Last Modified: 2013-11-01
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
Comment
Question by:Steve Tinsley
  • 3
4 Comments
 
LVL 9

Expert Comment

by:oheil
ID: 39605156
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
 
LVL 9

Expert Comment

by:oheil
ID: 39605159
I just realized, that this is not the answert.. give me a few minutes...

:-)

Oli
0
 
LVL 9

Accepted Solution

by:
oheil earned 500 total points
ID: 39605216
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
 

Author Closing Comment

by:Steve Tinsley
ID: 39617697
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

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question