Отключить полноэкранное видео iphone

Борьба с этой проблемой в течение нескольких дней подряд...

Есть ли способ или "взломать", чтобы отключить полноэкранный просмотр видео в Safari на iPhone. Конечно, я уже пробовал атрибут "webkit-playinginline", но это будет работать только в вашем собственном приложении.

См:

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

Также я попытался поместить видео на холст, но поскольку он выглядит как источник для canvas, метод drawImage() в настоящее время не поддерживается в iOS.

Есть ли другой способ или альтернативный метод, который я могу использовать? Или я действительно трачу свое время на последние несколько дней?

Ответ 1

    <div id="video-player">
        <video src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"></video>
        <p><a href="javascript:playPause();">Play/Pause</a></p>
   </div>

   <script type="text/javascript">
        // intercept and cancel requests for the context menu
        var myVideo = document.querySelector('video');
        myVideo.addEventListener("contextmenu", function (e) { e.preventDefault(); e.stopPropagation(); }, false);

        // hide the controls if they're visible
        if (myVideo.hasAttribute("controls")) {
            myVideo.removeAttribute("controls")   
        }

        // play/pause functionality
        function playPause() {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
         }

         // essentially you'll have to build your own controls ui
         // for position, audio, etc.

    </script>

Идея состоит в следующем:

Предотвратите доступ пользователя к контекстному меню (чтобы показать элементы управления)
Скрыть любые элементы управления, которые могут быть видны

Недостатком является то, что вы должны реализовать свой собственный интерфейс пользователя, но это не слишком сложно.

* Этот код предназначен только для того, чтобы показать вам, как решить проблему, а не для использования в реальном приложении

Немного больше исследований по теме:

webkit-playinginline Указывает, что элемент видео должен воспроизводиться в режиме онлайн вместо полноэкранного.

Связанные теги "video" Доступность Доступна в iOS 4.0 и более поздних версиях. (Включено только в UIWebView с разрешениемInlineMediaPlayback свойство установлено в YES. источник

Я боюсь, что это не будет возможно с помощью видеоплеера в Safari

У них есть руководство для видео на холсте, но, как вы, вероятно, знаете, оно еще не поддерживается в IOS: видео на холсте

В этом документе кратко изложены текущие ограничения на мобильный контент в IOS: статус мобильного видео

Ответ 2

В iOS 10 +

Наконец, Apple включила атрибут playsinline во всех браузерах на iOS 10, поэтому это будет работать без проблем:

<video src="file.mp4" playsinline>

В iOS 8 и iOS 9

Вы можете обойти эту проблему, моделируя воспроизведение, уменьшая видео, а не на самом деле .play().

Короче говоря, используйте iphone-inline-video, он заботится о синхронизации воспроизведения и звука (если есть), и сохраняет <video> работает как следует.

Ответ 3

Я понимаю, что iOS всегда воспроизводит видео в полноэкранном режиме. На собственном веб-сайте Apple они использовали данные кодированного изображения и рисунок Javascript для воспроизведения видеопотока. Вот разбивка того, как они это сделали:

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI