Тег HTML5 Video не працює в Safari, iPhone та iPad

Я намагаюся створити веб-сторінку html5, на якій є невелике відео на зразок 13-х років, я перетворив флеш-версію цього відео у формат 3: .ogv за допомогою fireFogg, .webm за допомогою firefogg також та .mp4 за допомогою програми HandBrake HTML-сценарій Я використовував на своїй сторінці:

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

Відео працює нормально в Chrome і FireFox, але взагалі не працює ні в Safari на робочому столі, ні на iPhone чи iPad, вихід - це просто порожня сторінка, на якій показано елементи керування тегом відео, але нічого не завантажено

Зверніть увагу, що версія Safari, яка у мене є, підтримує відео HTML5

У мене була така сама проблема з пристроями Apple, як iPhone та iPad, я вимкнув режим низького енергоспоживання, і він спрацював, і ви також повинні включити playsinlineатрибут у відео тег, як це:

<video class="video-background" autoplay loop muted playsinline>

Це спрацювало лише в тому числі playsinline.

Ще одне можливе рішення для майбутніх шукачів: (Якщо ваша проблема не є проблемою mimeype.)

З якихось причин відео не відтворюватимуться на iPad, якщо я не встановлю прапорець control = "true".

Приклад: Це працювало у мене на iPhone, але не iPad.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

І це зараз працює як на iPad, так і на iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Ваш веб-сервер може не підтримувати запити про байтовий діапазон HTTP. Це стосується веб-сервера, яким я користуюся, і в результаті завантажується віджет відео і з’являється кнопка відтворення, але натискання кнопки не має ефекту. - Відео працює у FF та Chrome, але не iPhone або iPad.

Детальніше читайте тут на mobiforge.com про запити на діапазон байтів у Додатку А: Потокове передавання для Apple iPhone :

По-перше, веб-переглядач Safari запитує вміст, а якщо це аудіо- чи відеофайл, він відкриває медіаплеєр. Потім медіаплеєр запитує перші 2 байти вмісту, щоб веб-сервер підтримував запити діапазону байтів. Потім, якщо він їх підтримує, медіаплеєр iPhone запитує решту вмісту байтовими діапазонами та відтворює його.

Можливо, ви захочете пошукати в Інтернеті "iphone mp4 byte-range".

Якщо ваші відео захищені системою входу на основі сеансу, Safari не зможе завантажити їх. Це тому, що Safari робить початковий запит на відео, а потім передає завдання QuickTime, який робить ще один запит. Оскільки Safari зберігає інформацію про сеанс, він пройде автентифікацію, а QuickTime - ні.

Ви можете побачити це, якщо переглянути журнал доступу до сервера ... спочатку запит від Safari, потім запит від QuickTime. Інші браузери просто роблять один запит від самого браузера.

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

Для пошуку в майбутньому, а я мав mp4 файл , який я отмастшабірованний з Handbrake , використовуючи handbrake-gtkз apt-get, наприклад sudo apt-get install handbrake-gtk. В Ubuntu 14.04 handbrakeсховище не включає підтримку MP4 нестандартно. Я залишив налаштування за замовчуванням, видалив звукову доріжку, і вона генерує файл * .M4V. Для тих, хто цікавиться, це той самий контейнер, але M4V в основному використовується на iOS для відкриття в iTunes.

Це працювало у всіх браузерах, окрім Safari:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Я міняв MIME-тип між video/mp4і video/m4vбез ефекту. Я також протестував додавання controlатрибута і знову, ніякого ефекту.

Це працювало у всіх тестованих браузерах, включаючи Safari 7 на Mavericks та Safari 8 на Yosemite. Я просто перейменував той самий файл m4v (фактичний файл, а не лише HTML) у mp4 і перезавантажив у наш CDN:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Я думаю, що Safari повністю очікує фактично названого MP4. Жодні інші комбінації файлів та mime-типів для мене не працювали. Я думаю, що інші браузери спочатку вибирають файл WEBM, особливо Chrome, хоча я майже впевнений, що в списку джерел слід вибрати перше джерело, яке технічно підтримується.

Однак це не вирішило проблеми з відео у пристроях iOS (iPad 3 - "новий iPad" та iPhone 6).

Просто додайте mutedатрибут, і все буде працювати нормально.

Джерело цієї відповіді тут: https://webkit.org/blog/6784/new-video-policies-for-ios/

За замовчуванням WebKit матиме такі правила:

<video autoplay> Елементи тепер матимуть атрибут автовідтворення для елементів, які відповідають наступним умовам:

• <video> елементам буде дозволено автоматичне відтворення без жесту користувача, якщо їх вихідний носій не містить звукових доріжок.
• <video muted> елементам також буде дозволено автовідтворення без жесту користувача.
• Якщо <video>елемент отримує звукову доріжку або стає без звуку без жесту користувача, відтворення зупиниться.
• <video autoplay> елементи почнуть відтворюватися лише тоді, коли їх буде показано на екрані, наприклад, коли вони прокручуються до області перегляду, робляться видимими через CSS та вставляються в DOM.
• <video autoplay> елементи призупиняться, якщо вони стають невидимими, наприклад, якщо їх прокрутити з області перегляду.

<video> Тепер елементи будуть дотримуватися методу play () для елементів, які відповідають наступним умовам:

• <video> елементам буде дозволено відтворювати () без жесту користувача, якщо їх вихідний носій не містить звукових доріжок або якщо для їх приглушеної властивості встановлено значення true.
• Якщо <video>елемент отримує звукову доріжку або стає без звуку без жесту користувача, відтворення зупиниться.
• <video> елементам буде дозволено відтворювати (), коли їх не видно на екрані або коли вони не входять до області перегляду.
• video.play () поверне обіцянку, яка буде відхилена, якщо будь-яка з цих умов не буде виконана.

На iPhone <video playsinline>тепер елементам буде дозволено грати вбудовано, і вони не будуть автоматично переходити в повноекранний режим, коли розпочнеться відтворення. <video>елементи без атрибутів playinline і надалі вимагатимуть повноекранного режиму для відтворення на iPhone. Під час виходу з повноекранного <video>режиму затисканням, елементи без playinline продовжуватимуть грати вбудовано.

Я виявив, що хоча Safari і підтримує відео HTML5, для цього потрібно встановити програвач Quicktime. На створеному мною сайті, який використовує HTML5 Video, користувач отримує попередження під час використання Safari, повідомляючи, що вони повинні встановити Quicktime, інакше вони зможуть переглядати лише стенограми відео. Сподіваюся, це допомагає.

Я бачив дивні проблеми з ненадійними SSL-сертифікатами «розробки», де мобільне Safari цілком із задоволенням обслуговуватиме вашу сторінку, але відмовляється показувати відео на «підроблений» SSL-сертифікат, навіть якщо ви прийняли сертифікат.

Для тестування ви можете розгорнути відео деінде - або перейти на http (для всієї сторінки), і воно повинно відтворюватися.

Додавання "playsinline" працює для мене на Iphone та Ipa, якщо ви не проти, щоб ваше відео було відключено.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Якщо ви не хочете, щоб ваше відео було відключено, але все ж хочете автоматичне відтворення, можливо, спробуйте видалити приглушений атрибут за допомогою js: Як увімкнути відео html5 за допомогою приглушеного інтерфейсу

Починаючи з iOS 6.1, більше не можна автоматично відтворювати відео на iPad. Згідно з документацією Apple, функція автозапуску не працює на Safari на всіх пристроях iOS, включаючи iPad:

"Apple прийняла рішення відключити автоматичне відтворення відео на пристроях iOS за допомогою реалізації сценаріїв та атрибутів.

У Safari на iOS (для всіх пристроїв, включаючи iPad), де користувач може знаходитись у стільниковій мережі та платити за одиницю даних, попереднє завантаження та автоматичне відтворення вимкнено. Дані не завантажуються, поки користувач їх не ініціює. "

Ви можете прочитати більше про це в цій документації Apple

Для .mp4 це працює (сафарі для мобільних і настільних ПК):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

controls=”true”Згадано в пості вище Не має сенсу для мене , як Apple , каже , що тільки контроль використання на своїх власних.

Посилання: “Щоб використовувати аудіо чи відео HTML5, почніть із створення елемента або елемента, зазначення вихідної URL-адреси для медіа та включення атрибута control. <video src="http://example.com/path/mymovie.mp4" controls></video>"

Джерело: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

У моїх стосунках (невеликий відступ) : я виявив, що завантаження відео з iPhone надсилає його на сервер як .quicktime. Як не дивно, це проблема при спробі відтворити відео з сервера в сафарі. (мобільні та настільні).

Отже, якщо у вас (як і у мене) виникає проблема із .quicktime (або щось інше, ніж .mp4) в сафарі , ось тут є робота, яку надає apple. Зауважте, я ще не випробував це сам, і я не настільки задоволений цим з одного погляду, просто надавши більше інформації.

Довідково: “Повернення до плагіна QuickTime Існує простий спосіб повернутися до плагіна QuickTime, який працює майже для всіх браузерів - завантажте готовий файл JavaScript, наданий Apple, ac_quicktime.js, із HTML Video Example та включіть його на свою веб-сторінку, вставивши наступний рядок коду у свою HTML-головку: <script src="ac_quicktime.js" type="text/javascript"></script>"

Джерело: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-6CH2-TP20009523-6

Оновлення: Для перейменування .quicktime до .movпопереднього завантаження на сервер (у типі файлу base64 "data: video / mov;") пропустіть ac_quicktime.js. . . потім буде працювати у HTML відео тегу; Hackerdy ​​Hack.

За допомогою цього коду відео буде відтворюватися у всьому браузері в сафарі, а також на пристроях ios ... Будьте готові всі (я використовував це і працюю чудово)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

`

У мене була подібна проблема, коли відео з <video>тегом відтворювалося лише в Chrome і Firefox, але не в Safari. Ось що я зробив, щоб це виправити ...

Дивний трюк, який я знайшов, полягав у тому, щоб мати два різних посилання на ваше відео, одне в <video>тегу для Chrome і Firefox, а інше в <img>тегу для Safari. Цікаво, що відео насправді відтворюються в <img>тезі на Safari. Після цього напишіть простий скрипт, щоб приховати той чи інший, коли використовується певний браузер. Так наприклад:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Це також допомагає вирішити проблему з тонкою чорною рамкою / рамкою на деяких відео в певних браузерах, де вони відображаються неправильно.

У мене була така проблема, коли відтворення .mp4 у Safari не працювало, але в інших браузерах це було нормально. Помилка, яку я бачив у консолі, була: media media src не підтримується. У моєму випадку це виявилося проблемою типу MIME, але не тому, що вона не була оголошена як тип MIME у IIS, а те, що вона була оголошена двічі (один раз у IIS, а також у файлі web.config). Я виявив це, спробувавши завантажити файл .mp4 локально на сервер. Я видалив файл конфігурації з місця вмісту, який я намагався відтворити, і це вирішило проблему. Я міг просто видалити тип MIME з файлу web.config, але в цьому випадку файл web.config не потрібен.

Для IOS використовуйте лише вихідний файл mp4. Я спостерігав одну проблему в останньому браузері сафарі, який браузер сафарі не може правильно виявити вихідний файл, і через це автовідтворення відео не працює.

Давайте перевіримо наведений нижче приклад -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Оскільки я використовував mp4, webm у вихідних файлах. Safari deosnt підтримує webm, але як і раніше в останній версії сафарі він вибирає webm і не вдається автоматично відтворити відео.

Тож для роботи автовідтворення у підтримуваному браузері я б запропонував спочатку перевірити браузер і виходячи з цього ви повинні створити свій html.

Тож для сафарі використовуйте нижче html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Крім сафарі,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

У мене була та ж проблема - переконайтесь, що URL-адреса відеоактиву надходить із захищеного домену. Наше середовище розробників - http, а виробництво безпечне. Через те, що на відео посилається відносний шлях, воно не працює над розробкою. Здається, проблема полягає в тому, що Apple вимагає, щоб відео було безпечним ...

працює, але нещодавно MacOs має політику автоматичного відтворення для користувача: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , я вирішив ту ж проблему за допомогою кнопки, щоб увімкнути звук:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

Я стикався з такою ж проблемою. Тому що мій розмір кадру відео був занадто великий. тобто. 2248 пікселів Apple, підтримка відео H.264 Base Level Profile 3.0, до 640 x 480 при 30 кадрів в секунду. Зверніть увагу, що кадри B не підтримуються у базовому профілі. перевірте це для отримання додаткової інформації

У моєму випадку допомогло скидання звукової доріжки. Раніше воно мовчало, але його треба було повністю зникнути.

На ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

І сафарі / робочий стіл починають відтворювати відео

У моєму випадку використання було дві речі :

1. Я не використовував політику нового атрибута / webkit playsinline ;
2. Моє відео / mime-тип або whathathell були неправильно закодовані, тому я використав цей сайт, щоб перетворити його у всі потрібні формати: https://pt.converterpoint.com/

o /

У мене була точно така ж проблема, мій HTML-тег відео добре відтворювався в Chrome & Mozilla, в Safari - елементи управління з'явилися, але відео було порожнім. Я намагався грати з усіма вищезазначеними атрибутами, видаляти / додавати приглушені, playInline тощо і нічого не працювало. Проблема була і в серверах, як описано тут. У мене було це - НЕ РОБОТАЛ:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

і я щойно переніс своє відео у зовнішню бібліотеку, і зараз у мене все добре в Safari, це ДОБРО працює:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

У мене нічого не працювало, за винятком стиснення відео до 30 Мб. Це зробило фокус, але з дуже поганим стисненням.

Якщо хтось має таку ж проблему, я вирішив це, увімкнувши підтримку Byte-Range на моєму сервері. Здається, Safari вимагає запити на діапазон байтів. У моєму випадку я використовую NGINX, і мені довелося додати proxy_force_ranges on;до мого конфігураційного файлу. Завдяки цій відповіді !