Телефонная линия встроенного видео не работает, с правильными настройками

Question

Я хочу иметь встроенное видео моего видео, размещенного на ведре S3. Я использую HTML тег видео для достижения этой цели и изменили следующие параметры в defaults.xml

<!-- Preferences for iOS --> 
<preference name="AllowInlineMediaPlayback" value="true" /> 

Если я построю мой Iphone App дисплей config.xml файла этот параметр правильно:

<?xml version='1.0' encoding='utf-8'?> 
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> 
    <preference name="AllowInlineMediaPlayback" value="true" /> 

В моем приложении I имеют следующий код:

<div className="hub-videobox"> 
    <video webkit-playsinline > 
     <source src="https://s3-eu-west-1.amazonaws.com/mybucket/0rdrd88" type="video/mp4"/> 
    </video> 
</div> 

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

Спасибо!

Im использованием PhoneGap/Cordova 4.2.0

Answer 1

До сих пор я не нашел, независимо от того, сколько вещей вы стараетесь, все равно это будет происходить. См. this apple developer link, упоминается, что если экран небольшой, то собственное приложение поймает видео. Нет упоминания об этом.

Оптимизация для маленьких экранов

В настоящее время, Safari оптимизирует видео-презентацию для меньшего размера экрана на iPhone или IPod Touch, играя видео с помощью полного экрана видео управлений появляются при прикосновении к экрану, и видео масштабируется до подходит к экрану в портретном или альбомном режиме. Видео не представлено на домашней странице. Атрибуты высоты и ширины влияют только на пространство , выделенное на веб-странице, и атрибут элементов управления игнорируется. Это верно только для Safari на устройствах с маленькими экранами. В Mac OS X, Windows и iPad Safari воспроизводит видеоролик, встроенный в веб-страницу .

Теперь многие вещи, которые вы пробовали, предлагаются многими. Но они работают не так, как ожидалось. Поэтому я думаю, это невозможно. См. Upvote по комментариям в первом ответе Can I avoid the native fullscreen video player with HTML5 on iPhone or android?. Это показывает, что это встроенные функции не работают должным образом. iPhone продолжит захватывать видео, и если будет найден правильный большой экран, тогда будут работать встроенные свойства.

Answer 2

Лучший способ для этого я видел, чтобы показать видео в холсте HTML5.

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

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

Здесь github repo, который хорошо подходит для этой цели, хотя вы, безусловно, могли бы написать свое собственное решение.

Answer 3

У меня была такая же проблема с Cordova 6.3.1 и iPhone с iOS 10. Мне удалось остановить его с помощью грубой силы, но, по-видимому, эффективен:

 mediaElement.play() 
     mediaElement.webkitExitFullScreen() 
     mediaElement.controls = false