Ticket #1312 (closed enhancement: invalid)

Opened 2 years ago

Last modified 13 months ago

Investigate using gestures or hiding videotag for iPad clicks

Reported by: zach Owned by:
Priority: Normal Milestone: Backlog
Component: embedding Keywords:
Cc: pablo, jeroen Forum thread:

Description

It might be possible to listen for gestures over the video tag, even if clicks get eaten

 http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Change History

comment:1 Changed 2 years ago by zach

jQuery version: 

var cfg = {clickEvent: /(iPad|iPhone)/i.test(navigator.userAgent) ? 'touchend' : 'click'}

$('.star-inset', this).delegate('.star', cfg.clickEvent, function(evt) {
 // do stuff on the click
 });

comment:2 Changed 2 years ago by zach

This doesn't help: 

<html>
<head>
</head>
<body>

<div id="player" style="position:absolute">
<video 
 width="460" 
 height="320"
 poster="http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg" 
 src="http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
 style="position:absolute;left:0px;top:0px"
 controls="controls"
 >
</video>
<div id="clicker" style="height:320px;width:460px;position:absolute;left:50px;top:0px;background:green;opacity:0.5"
</div>
<script type="text/javascript">
  var clicker = document.getElementById("clicker");
  clicker.ontouchstart = function(){alert("Don't touch me")};
</script>
</body>
</html>

However, removing the controls does: 

<html>
<head>
</head>
<body>

<div><a href="#" onclick="video.play();return false;">Play</a>
</div>
<div id="player" style="position:relative">
<video 
 id="vid"
 width="460" 
 height="320"
 poster="http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg" 
 src="http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
 style="position:absolute;left:0px;top:0px"
 >
</video>
<div id="clicker" style="height:320px;width:460px;position:absolute;left:50px;top:0px;background:green;opacity:0.5"
</div>

<script type="text/javascript">
  var clicker = document.getElementById("clicker");
  clicker.onclick = function(){alert("Don't touch me")};
  var video = document.getElementById("vid");
</script>
</body>
</html>

We'll probably need to implement our own touch screen controls…

comment:3 Changed 2 years ago by zach

Jeroen suggests using the built in controls, but hiding them when the player is IDLE. This seems to work, and the show / hide can be done like so: 

<html>
<head>
</head>
<body>

<div><a href="#" onclick="video.play();return false;">Play</a>
<div><a href="#" onclick="video.controls = '';return false;">Remove Controls</a>
<div><a href="#" onclick="video.controls='controls';return false;">Add Controls</a>
</div>
<div id="player" style="position:relative">
<video 
 id="vid"
 width="460" 
 height="320"
 poster="http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg" 
 src="http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4"
 style="position:absolute;left:0px;top:0px"
 >
</video>
<div id="clicker" style="height:320px;width:460px;position:absolute;left:50px;top:0px;background:green;opacity:0.5"
</div>

<script type="text/javascript">
  var clicker = document.getElementById("clicker");
  clicker.onclick = function(){alert("Don't touch me")};
  var video = document.getElementById("vid");
</script>
</body>
</html>

comment:4 Changed 2 years ago by jeroen

  • Summary changed from Investigate using gestures on the iPad for clicks over the video tag to Investigate using gestures or hiding videotag for iPad clicks

comment:5 Changed 13 months ago by jeroen

  • Priority set to Normal
  • Status changed from new to closed
  • Resolution set to invalid

So far, working with this limitation has not proven to be an issue. Since clicks are not caught when the built-in controls are hidden, we will likely follow that route at a later stage. See #1154.

Note: See TracTickets for help on using tickets.