?
Solved

Single javascript function rather than multiple???

Posted on 2013-10-27
4
Medium Priority
?
398 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

766 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