Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

iScroll with HTML5 Video and Pause/Resume

Posted by bcmoney on January 11, 2012 in HTML, JavaScript with 1 Comment


No Gravatar
English: Featured List barnstar scroll

Image via Wikipedia

iScroll 4 is the latest version and release of an excellent content slider-type JavaScript component by Matteo Spinelli. While one may argue that content sliders are a dime a dozen, iScroll differs in the fact that it has full support for all the main WebKit for iOS gestures including pinch/zoom, pull-up/pull-down, smooth scrolling and screen orientation resizing; while also allowing customizable scrollbars, automatic carousels, and much more.

Out of the box though, the automatic scrolling takes some hacking to get working right with an interactive component (such as an HTML5 or Flash video player), as if you activate the scrolling on an interval, it will continue to scroll even when a user is trying to interact with some component inside the active list item. To get around this, you’ll have to temporarily deactivate the scrolling and then reactivate it when the user has finished interacting.

Here is an example, starting with the basic HTML structure:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: Carousel</title> 
<script type="text/javascript" src="iscroll.js"></script>
</head>
<body>
<h1>Laws of Robotics</h1>
<div id="wrapper">
	<div id="scroller">
		<ul id="thelist">
			<li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em><div id="player"></div></li>
			<li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
			<li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
			<li><strong>4. Lyuben Dilov's 4th law:</strong> <em>A robot must establish its identity as a robot in all cases.</em></li>
      <li><strong>5. Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
		</ul>
	</div>
</div>
<div class="clear">
</div>
<div id="nav">
	<div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">←</div>
	<ul id="indicator">
		<li class="active" onclick="myScroll.scrollToPage(0, 0);return false">1</li>
		<li onclick="myScroll.scrollToPage(1, 0);return false">2</li>
		<li onclick="myScroll.scrollToPage(2, 0);return false">3</li>
		<li onclick="myScroll.scrollToPage(3, 0);return false">4</li>
		<li onclick="myScroll.scrollToPage(4, 0);return false">5</li>
	</ul>
	<div id="next" onclick="if (myScroll.currPageX < document.getElementById('indicator').getElementsByTagName('li').length-1) { myScroll.scrollToPage('next', 0); } return false">→</div>
</div>
<br/><br/>
<button id="play" name="play" onclick="playVideo();">Play</button>
<button id="pause" name="pause" onclick="pauseVideo();">Pause</button>
<button id="resume" name="resume" onclick="resumeVideo();">Resume</button>
<button id="stop" name="stop" onclick="stopVideo();">Stop</button>
</body>
</html>

The following CSS can be used to style the carousel slider:

<style type="text/css" media="all">
body,ul,li { padding:10px; margin:0 }
body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica }

#wrapper {
	width:300px;
	height:160px;
	float:left;
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	overflow:hidden;
	background:#aaa;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	background:#e3e3e3;
}

#scroller {
	width:2100px;
	height:100%;
	float:left;
	padding:0;
}

#scroller ul {
	list-style:none;
	display:block;
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	text-align:left;
}

#scroller li {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	display:block; 
  float:left;
	width:300px; 
  height:160px;
	text-align:center;
	font-family:georgia;
	font-size:18px;
	line-height:140%;
}

#nav {
	width:300px;
	float:left;
  display:block;
}

#prev, #next {
	float:left;
	font-weight:bold;
	font-size:14px;
	padding:5px 0;
	width:80px;
}

#next {
	float:right;
	text-align:right;
}

#indicator, #indicator > li {
	display:block; float:left;
	list-style:none;
	padding:0; margin:0;
}

#indicator {
	width:110px;
	padding:12px 0 0 30px;
}

#indicator > li {
	text-indent:-9999em;
	width:16px; 
  height:16px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px;
	background:#ddd;
	overflow:hidden;
	margin-right:4px;
}

#indicator > li.active {
	background:#f96f10;
}

#indicator > li:last-child {
	margin:0;
}

#indicator > li:hover {
	cursor:pointer;
	background:#333;
}

.clear { clear:both }
</style>

The following JavaScript needs to be loaded in the head or as the first script element before other scripts at the bottom of the page, as it sets up the iScroll carousel scroller:

<script type="text/javascript">
var myScroll;

function loaded() {
	myScroll = new iScroll('wrapper', {
		snap: true,
		momentum: false,
		hScrollbar: false,
		onScrollEnd: function () {
			document.querySelector('#indicator > li.active').className = '';
      if (this.currPageX < document.getElementById('indicator').getElementsByTagName('li').length) {
        document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
      }
		}
	 });
}

document.addEventListener('DOMContentLoaded', loaded, false);
var autoscrolling = self.setInterval("doScroll()",5000);

function doScroll() {
  if (myScroll.currPageX < document.getElementById('indicator').getElementsByTagName('li').length-1) {
    myScroll.scrollToPage('next', 0);
  }
  else {
    myScroll.scrollToPage(0, 0);
  }
}
</script>

Lastly, the following JavaScript enables controlling the Video player and pausing/resuming the HTML5 video player (as well as the scroller while viewing the video):

<script type="text/javascript">
//plays video from the start (by destroying and recreating the player)
function playVideo() {
  window.clearInterval(autoscrolling);
  document.getElementById('player').innerHTML = '<video width="125" height="65" preload="auto" poster="http://d1p69vb2iuddhr.cloudfront.net/assets/www/demo/midnight_sun_800-4ae4131d9bcd01bbf933f6efa9066bde.jpg" id="single_video" tabindex="0"><source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"></source><source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"></source><source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"></source><source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"></source></video>';
  document.getElementById('single_video').play();  
}

function pauseVideo() {
  autoscrolling = window.setInterval('doScroll()',8000); 
  document.getElementById('single_video').pause();
}

function resumeVideo() {
  window.clearInterval(autoscrolling);
  document.getElementById('single_video').play();
}

function stopVideo() {  
  autoscrolling = window.setInterval('doScroll()',8000); 
  document.getElementById('single_video').pause();
  document.getElementById('single_video').src = '';
}
</script>

That’s it for this quick tutorial!

NOTE: when running this demo on a regular Desktop rather than a touch-enabled device such as a tablet or mobile phone, it can be tricky to activate the iScroll swipe. To do so, try clicking-and-holding down on the left and right mouse buttons, then dragging in the direction you want to scroll. This is the default way (for some operating system and browser combinations) to simulate a swipe action.


-or-

 

  1. SunshineNovember 16, 2016 - 3:22 am #1

    I really apperciate free, succinct, reliable data like this.

    Reply
Leave a Reply

No trackbacks yet.

Posts with similar tags
Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Archives