html - How do I prevent video playback when <video> was tapped during scrolling with overflow-scrolling:touch on? -

-

i use -webkit-overflow-scrolling:touch within overflowing div container. within container have <video> element.

on iphone, when scroll down, tap scrolling view in order stop it. no problem, if hit link. browser understands wanted stop scrolling , not open link.

the problem here if hit play button of video accidentally, playback starts not intended. how can fix this?

demo (open on iphone!): http://www.timo-ernst.net/misc/scrollvideo/

full source code:

<!doctype html>  <html>    <head>     <title>scroll video test</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">     <style>       *{         padding:0;         margin:0;       }       html, body{         height: 100%;         width: 100%;       }        .scrollarea{         height:100%;         -webkit-overflow-scrolling: touch;         overflow-y:scroll;       }        #video{         width: 100%;       }      </style>   </head>    <body>     <div class="scrollarea">       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       scroll down video<br>       <video id="video" src="http://video.golem.de/download/15799?q=medium&rd=rlmob_nojs" controls="1" poster="http://video.golem.de/teaser/1/1/15799/medium-480-regatta-snap.jpg" x-webkit-airplay="allow" preload="none"></video>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video<br>       scroll video     </div>   </body>  </html>


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more