iScroll with HTML5 Video and Pause/Resume
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-
Related articles
- New, More Flexible ScrollView Widget (anscamobile.com)
- Does anyone know of a plugin/tool to scroll infinitely through a list of words? (stackoverflow.com)
- The Developers’ Wish List for HTML5 In 2012 (readwriteweb.com)
- How to implement paging & sorting in MVC 3 , Part 3 – How to use it for scroll loading like twitter (kevww.wordpress.com)
- Thinking Like a Web Designer (android-developers.blogspot.com)
- Parallax scrolling (opensourcewebbdesign.wordpress.com)
- Webkit-overflow-scrolling (yewknee.com)
Something has happened recently on the World Wide Web that really impresses me. The we...Leave a Reply
No trackbacks yet.
No post with similar tags yet.
Posts in similar categories
- Unboxing the MintChip
The Royal Canadian Mint (RCM) has sponsored the MintChip Challenge 2012 in an effort to attract developers to the idea of developing software for the MintChip and giving away their best financial application ideas, basically, for free (on the long-shot that you are one of the few who win).
Starting April 1st, 2012, they began mailing... - Popcorn.js + Embedded Video = Semantically Enhanced Video Content
Popcorn.js is an incredibly useful framework for adding timing-based events and/to Semantic metadata to rich content.
According to Mozilla: "Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online."
With... - Cross-Platform Social Media Sharing Tool
Social media has taken over the web (for now) and the name of the game is sharing, something legislation like SOPA and PIPA just didn't seem to understand. Rather than figuring out a new economic model based on the reality of sharing on the web, that rewards this type of activity (which is essentially just... - Parser for XMLTV format and SchedulesDirect data
For a long time now, I've been a paying customer of SchedulesDirect, and by that token their parent company Zap2it (now a Tribune Media Services company).
Recently, I've started publishing my own personal Electronic Programming Guide (EPG) here on BCmoney MobileTV in an accessible format:
BC$ EPG
One of the secondary goals of my MobileTV project has... - WordReference API – AJAX SDK & Widget
Yesterday I wrote about the Google API shutdown. It seems that I was wrong in that post about Wordreference not having an API, just a few days earlier founder Michael Kellogg announced the introduction of the brand-spanking new Wordreference API.
Like a dunce I contacted Michael by email to learn about this new revelation without double-checking... - HTML5 features template and HTML5 skeleton
With all the buzz about HTML5 its high time to release an official post on the subject and cement our intention to support the standard fully. It is impossible to ignore the possibilities of a single thin-client based development environment and common sets of tools for working with them. Add to that the fact that... - Is Google Making It Harder To Run A Successful Business Online?
Ok, despite similar accusations of monopoly attempts and/or info theft from the likes of Washington Post, NY Times, Reuters, TechCrunch, ZDnet and others; Google-bashing seems like the thing to do. I'm certainly guilty of writing yet another sensationalist and wildly accusing title pitting Google's ever-encroaching yet seemingly undefined business model, against their supposedly well-defined "don't... - JS Transformer
Image via Wikipedia
The official release of one of the most useful (yet hackish, and randomly pieced together from the interweb) code snippets I've ever made. I'm calling this useful little piece of code "JS Transformer", since Transformers are cool again thanks to Shia LaBeouf.
NOTE:
KEEP IN MIND THE SAME-ORIGIN POLICY OF MOST BROWSERS...... - Remotely exchange data between iFrame and parent (jQuery .vs. HTML5)
One of the many nagging web development problems that the HTML5 working group is addressing with the new HTML specification, is the difficulty in working with content or exchanging data in between an iFrame and the main (origin) page which embeds it, as well as across separate windows (tabs) and domains.
jQuery
In order to accomplish the... - 5 Steps to Creating Slick Transparent Overlays
One of the best Web Design guides out there is still CSS Zen Garden. Not only does it provide a beautiful looking layout and offer up a base template, but its presentation code also validates to the latest CSS and xHTML standards. However, if you've ever tried to work with the main template, you'll notice...
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.
