Запретить прокрутку на элементе HTML5 <video>на iOS - PullRequest
Новая
       21

Запретить прокрутку на элементе HTML5 <video>на iOS

6 голосов
/ 05 апреля 2011

Я пытаюсь предотвратить прокрутку по умолчанию в веб-приложении, которое содержит элемент HTML5-видео в Mobile Safari.Обработка document.ontouchmove и вызов e.preventDefault() были стандартным способом, который я нашел для достижения этой цели.

Кажется, это работает везде, кроме тех случаев, когда вы касаетесь верхней части элемента видео, где вы можете начать тянутьстраница вокруг, как будто она собирается прокрутить.Кажется, что это происходит только тогда, когда встроенные элементы управления видео включены.Если вы не включите атрибут элементов управления и загрузите видео таким образом, чтобы его можно было воспроизвести в режиме реального времени (например, на iPad или в UIWebView с установленным параметром allowInlineMediaPlayback), прокрутка будет предотвращена надлежащим образом.Таким образом, похоже, что это как-то связано с нативными элементами управления видео (большая кнопка воспроизведения), фиксирующими событие.

Вот надуманный пример того, что я делаю: 

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Video Example</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
</head>
<body style="background: blue;">
    <video src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" controls></video>
    <script>
        window.onload = function() {
            document.ontouchmove = function(e) {
                e.preventDefault();
            }
        }
    </script>
</body>
</html>

Любые идеи обходных путей, чтобы полностью запретить прокрутку, даже на видео?Я уже пытался обработать ontouchmove непосредственно на элементе видео, и он не работает.

Спасибо!

Ответы [ 4 ]

2 голосов
/ 19 августа 2011

Как и вы, я не мог предотвратить прокрутку, так как в качестве обходного пути добавлена ​​функция JS для запуска window.scrollTo(0, 1); каждую секунду, что означает, что пользователь может только прокрутить в течение определенного времени, прежде чем страница будет возвращена назад.

1 голос
/ 02 сентября 2011

В моем тесте, пропуская атрибут «controls» видео, вы можете заставить события работать. Используйте пользовательский div сверху, чтобы предоставить пользовательские элементы управления

К примеру .... 

<video src="http://192.168.1.53/videoTester/Cuatro.mp4" id="player" width="100%" height="100%" x-webkit-airplay="allow" ></video>
0 голосов
/ 23 января 2014

Я нашел хорошее решение для этой проблемы после того, как столкнулся с той же проблемой. Я получил его на работу, выполнив следующее: 

//Function to trigger when every half second to check if user scrolled
$(function () {
    //select video player and the current time
    var myPlayer = document.getElementById('VideoID');
    var whereYouAt = myPlayer.currentTime;
    var current;

    setInterval(function () {
        current = myPlayer.currentTime;

        if (current > (whereYouAt + 1)) {
            myPlayer.currentTime = whereYouAt; //If current 1 whole second
                                               //Set time to before scroll.
        }
        else {
            whereYouAt = current; //otherwise set where to current.
        }
    }, 500); //500 = half a second.
});

Это будет работать только для видео HTML5, а не для мобильного проигрывателя видео. Я надеюсь, что это поможет, и дайте мне знать, если у вас есть какие-либо вопросы.

0 голосов
/ 25 мая 2011

Попробуйте: 

    element.addEventListener('touchmove', function(event) {                                                                                                                                                                                                               
        // Prevent scrolling on this element                                                                                                                                                                                                                              
        event.preventDefault();                                                                                                                                                                                                                                           
    }, false);

только для рассматриваемого элемента или: 

    window.addEventListener('touchmove', function(event) {                                                                                                                                                                                                               
        // Prevent scrolling on this element                                                                                                                                                                                                                              
        event.preventDefault();                                                                                                                                                                                                                                           
    }, false);

для всего окна.

...