모바일 사파리의 <video> 요소에서 touchmove 이벤트 방지

모바일 사파리에 비디오 요소가 포함 된 홈 스크린 웹 앱을 쓰고 있습니다. 유용성을 이유로 화면에서 스 와이프하여 페이지 스크롤을하지 않는 것이 좋습니다. 성공적으로 다음 코드를 사용하여 스크롤에서 스크롤을 방지 할 수 있습니다. 그러나 사용자가 동영상 요소를 스 와이프하면 페이지가 스크롤됩니다.모바일 사파리의 <video> 요소에서 touchmove 이벤트 방지

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<title>no scroll</title> 
<script type="text/javascript"> 
window.onload = function(){ 
    document.addEventListener('touchmove',function(event){ 
     event.preventDefault(); 
    },false); 
}; 
</script> 
</head> 
<body> 
<p>anything but the video will be stationary when swiped.</p> 
<video preload="auto" webkit-playsinline id="video" controls height="100" width="100"> 
    <source src="video.mp4" type="video/mp4" /> 
</video> 
</body> 
</html>

I합니다 (창로드 기능에 삽입) 해당 이벤트 삼키는에서 비디오 요소를 방지하기 위해 코드를 추가하는 시도 :

var videoEl = document.getElementById('video'); 
videoEl.addEventListener('touchmove',function(event){ 
    event.preventDefault(); 
},false); 
videoEl.addEventListener('touchstart',function(event){ 
    event.preventDefault(); 
},false);

이것에 대한 해결 방법이 있습니까? 나는 그 문제를 잘못된 방향으로 말하고 있는가?

출처

2011-05-11 whlteXbread

shim을 위에 두는 것이 좋습니다. 즉, 더 높은 z- 인덱스를 가진 빈 div는 터치 이벤트를 잡는 것이 좋습니다. 지금은 시험 할 기회가 없지만 시험하기가 쉽습니다.

출처

2011-05-12 05:42:41

아 맞습니다. 그래서이 질문은 전에도 백만 번 대답했다고 생각합니다. 나는 한 발을 내줄 것이다. – whlteXbread

나는 당신의 제안을 쓸데없이 시도했다. 나는 내가하려는 일이 불가능하다고 생각하기 시작했다. 여기에 관련 질문이 있습니다 : http://stackoverflow.com/questions/2874353/touch-events-are-not-triggered-on-video-tags-on-safari-for-iphone – whlteXbread

나는 overlimed shim capture를 할 수있었습니다. 동영상 요소에 'controls'속성이 사용 설정되어 있지 않으면 이벤트가 발생합니다. 희망이 도움이됩니다. – Maciek

모바일 사파리의 <video> 요소에서 touchmove 이벤트 방지

답변

관련 문제