Solved

Single javascript function rather than multiple???

Posted on 2013-10-27
4
394 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 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