Tag Video HTML5 tidak berfungsi di Safari, iPhone dan iPad

Saya mencoba membuat halaman web html5 yang didalamnya terdapat video kecil seperti 13s, saya convert versi flash video ini menjadi 3 format: .ogv menggunakan fireFogg, .webm menggunakan firefogg juga dan .mp4 menggunakan aplikasi HandBrake script html Saya digunakan di halaman saya:

<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>

Video berfungsi dengan baik di Chrome dan FireFox tetapi tidak berfungsi sama sekali baik di Safari di Desktop maupun di iPhone atau iPad, hasilnya hanyalah halaman kosong yang menunjukkan kontrol dari tag video tetapi tidak ada yang dimuat

Perhatikan bahwa versi Safari yang saya miliki mendukung video HTML5

Saya memiliki masalah yang sama dengan perangkat apple seperti iPhone dan iPad, saya mematikan mode daya rendah dan berhasil dan Anda juga harus menyertakan playsinlineatribut dalam tag video seperti ini:

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

Ini hanya bekerja jika termasuk playsinline.

Solusi lain yang mungkin untuk Anda para pencari masa depan: (Jika masalah Anda bukanlah masalah mimetype.)

Untuk beberapa alasan, video tidak akan diputar di iPad kecuali saya mengatur flag control = "true".

Contoh: Ini berfungsi untuk saya di iPhone tetapi bukan iPad.

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

Dan sekarang ini berfungsi di iPad dan iPhone:

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

Server web Anda mungkin tidak mendukung permintaan rentang byte HTTP. Ini adalah kasus pada server web yang saya gunakan, dan hasilnya adalah widget video dimuat dan tombol putar muncul, tetapi mengklik tombol tersebut tidak berpengaruh. - Video berfungsi di FF dan Chrome, tetapi tidak di iPhone atau iPad.

Baca lebih lanjut di sini di mobiforge.com tentang permintaan rentang byte, di Lampiran A: Streaming untuk Apple iPhone :

Pertama, Browser Web Safari meminta konten, dan jika itu file audio atau video, pemutar medianya akan dibuka. Pemutar media kemudian meminta 2 byte pertama dari konten, untuk memastikan bahwa server Web mendukung permintaan rentang byte. Kemudian, jika mendukungnya, pemutar media iPhone akan meminta konten lainnya dengan rentang byte dan memutarnya.

Anda mungkin ingin menelusuri web untuk "iphone mp4 byte-range".

Jika video Anda dilindungi oleh sistem login berbasis sesi, Safari akan gagal memuatnya. Ini karena Safari membuat permintaan awal untuk video tersebut, lalu menyerahkan tugas tersebut ke QuickTime, yang membuat permintaan lain. Karena Safari menyimpan info sesi, itu akan meneruskan otentikasi, tetapi QuickTime tidak.

Anda dapat melihat ini jika Anda melihat log akses server ... pertama permintaan dari Safari, kemudian permintaan dari QuickTime. Browser lain hanya membuat satu permintaan dari browser itu sendiri.

Jika ini masalah Anda, Anda mungkin harus mengerjakan ulang akses video untuk menggunakan token sementara atau akses waktu terbatas dari permintaan asli. Saya akan memperbarui jawaban ini jika saya menemukan solusi yang lebih langsung.

Untuk pencarian masa depan juga, saya punya file mp4 yang saya downscaled dengan Handbrake menggunakan handbrake-gtkdari apt-get, misalnya sudo apt-get install handbrake-gtk. Di Ubuntu 14.04, handbrakerepositori tidak menyertakan dukungan untuk MP4 di luar kotak. Saya meninggalkan pengaturan default, menghapus trek audio, dan itu menghasilkan file * .M4V. Bagi mereka yang bertanya-tanya, mereka adalah wadah yang sama tetapi M4V terutama digunakan di iOS untuk dibuka di iTunes.

Ini berfungsi di semua browser kecuali 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>

Saya mengubah tipe pantomim antara video/mp4dan video/m4vtanpa efek. Saya juga menguji menambahkan controlatribut dan sekali lagi, tidak berpengaruh.

Ini berfungsi di semua browser yang diuji termasuk Safari 7 di Mavericks dan Safari 8 di Yosemite. Saya hanya mengganti nama file m4v yang sama (file sebenarnya, bukan hanya HTML) menjadi mp4 dan mengunggah ulang ke CDN kami:

<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 saya pikir sepenuhnya mengharapkan MP4 bernama sebenarnya. Tidak ada kombinasi file dan tipe pantomim lain yang berhasil untuk saya. Saya pikir browser lain memilih file WEBM terlebih dahulu, terutama Chrome, meskipun saya cukup yakin daftar sumber harus memilih sumber pertama yang didukung secara teknis.

Namun, hal ini belum memperbaiki masalah video di perangkat iOS (iPad 3 "the new iPad" dan iPhone 6 diuji).

Cukup tambahkan mutedatribut dan semuanya akan berfungsi dengan baik.

Sumber jawaban ini ada di sini: https://webkit.org/blog/6784/new-video-policies-for-ios/

Secara default, WebKit akan memiliki kebijakan berikut:

<video autoplay> elemen sekarang akan menghormati atribut putar otomatis, untuk elemen yang memenuhi ketentuan berikut:

• <video> elemen akan diizinkan untuk memutar otomatis tanpa isyarat pengguna jika media sumber mereka tidak berisi trek audio.
• <video muted> elemen juga akan diizinkan untuk memutar otomatis tanpa isyarat pengguna.
• Jika <video>elemen memperoleh trek audio atau menjadi tidak bersuara tanpa isyarat pengguna, pemutaran akan dijeda.
• <video autoplay> elemen hanya akan mulai diputar saat terlihat di layar seperti saat di-scroll ke viewport, dibuat terlihat melalui CSS, dan dimasukkan ke DOM.
• <video autoplay> elemen akan dijeda jika tidak terlihat, seperti dengan di-scroll keluar dari viewport.

<video> elemen sekarang akan menghormati metode play (), untuk elemen yang memenuhi kondisi berikut:

• <video> elemen akan diizinkan untuk diputar () tanpa isyarat pengguna jika media sumbernya tidak berisi trek audio, atau jika properti senyapnya disetel ke true.
• Jika <video>elemen memperoleh trek audio atau menjadi tidak bersuara tanpa isyarat pengguna, pemutaran akan dijeda.
• <video> elemen akan diizinkan untuk diputar () saat tidak terlihat di layar atau saat keluar dari viewport.
• video.play () akan mengembalikan Promise, yang akan ditolak jika salah satu kondisi ini tidak terpenuhi.

Di iPhone, <video playsinline>elemen sekarang akan diizinkan untuk diputar sebaris, dan tidak akan secara otomatis memasuki mode layar penuh saat pemutaran dimulai. <video>elemen tanpa atribut playsinline akan terus membutuhkan mode layar penuh untuk pemutaran di iPhone. Saat keluar dari layar penuh dengan gerakan mencubit, <video>elemen tanpa garis putar akan terus diputar sebaris.

Saya telah menemukan bahwa meskipun Safari mendukung Video HTML5, Quicktime Player harus diinstal agar ini berfungsi. Di situs yang saya buat yang menggunakan Video HTML5, pengguna diberi tahu saat menggunakan Safari, memberi tahu mereka bahwa mereka harus menginstal Quicktime, jika tidak, mereka hanya dapat melihat transkrip video. Semoga ini membantu.

Saya telah melihat masalah aneh dengan sertifikat SSL 'pengembangan' yang tidak tepercaya di mana Safari seluler akan dengan senang hati menyajikan halaman Anda tetapi menolak untuk menayangkan video ke sertifikat SSL 'palsu' bahkan jika Anda telah menerima sertifikat tersebut.

Untuk mengujinya, Anda dapat menerapkan video di tempat lain - atau beralih ke http (untuk seluruh halaman) dan video akan diputar.

Menambahkan 'playsinline' berfungsi untuk saya di Iphone dan Ipa jika Anda tidak keberatan video Anda dinonaktifkan.

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

Jika Anda tidak ingin video Anda dibisukan, tetapi masih ingin putar otomatis, mungkin coba hapus atribut mute dengan js: Cara menyuarakan video html5 dengan prop tanpa suara

Mulai iOS 6.1, video tidak lagi dapat diputar otomatis di iPad. Menurut dokumentasi Apple fitur Autoplay tidak berfungsi di Safari di semua perangkat ios termasuk iPad:

"Apple telah membuat keputusan untuk menonaktifkan pemutaran otomatis video di perangkat iOS, melalui implementasi skrip dan atribut.

Di Safari, di iOS (untuk semua perangkat, termasuk iPad), di mana pengguna mungkin berada di jaringan seluler dan dikenai biaya per unit data, preload dan putar otomatis dinonaktifkan. Tidak ada data yang dimuat sampai pengguna memulainya. "

Anda dapat membaca lebih lanjut tentangnya di dokumentasi Apple ini

Untuk .mp4 ini berfungsi (safari mobile & desktop):

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

Yang controls=”true”disebutkan dalam posting di atas tidak masuk akal bagi saya karena Apple mengatakan gunakan saja kontrolnya sendiri.

Referensi: “Untuk menggunakan audio atau video HTML5, mulailah dengan membuat elemen atau, tentukan URL sumber untuk media, dan sertakan atribut kontrol. <video src="http://example.com/path/mymovie.mp4" controls></video>”

Sumber: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

Dalam urusan saya (penyimpangan kecil) : Saya telah menemukan bahwa mengunggah video dari iPhone mengirimkannya ke server sebagai .quicktime. Ironisnya, ini adalah masalah saat mencoba memutar video dari server di safari. (seluler & desktop).

Jadi jika (seperti saya) Anda mengalami masalah .quicktime (atau apa pun selain .mp4) di safari , berikut adalah solusi yang disediakan oleh apple. Catatan, saya belum mengujinya sendiri dan saya tidak begitu senang dengan itu sekilas, hanya memberikan info lebih lanjut.

Referensi: “Kembali ke Pengaya QuickTime Ada cara sederhana untuk kembali ke pengaya QuickTime yang berfungsi untuk hampir semua browser — unduh file JavaScript bawaan yang disediakan oleh Apple, ac_quicktime.js, dari Contoh Video HTML dan sertakan di halaman web Anda dengan memasukkan baris kode berikut ke kepala HTML Anda: <script src="ac_quicktime.js" type="text/javascript"></script>"

Sumber: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Pembaruan: Untuk .quicktime, ubah nama menjadi .movunggahan sebelumnya ke server (dalam base64 filetype "data: video / mov;"), lewati ac_quicktime.js. . . kemudian akan berfungsi di tag video html; Hackerdy ​​Hack.

Dengan menggunakan kode ini, video akan diputar di semua browser di safari juga dengan perangkat ios ... Lakukan semuanya (Saya telah menggunakan ini dan berfungsi dengan baik)

`

<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>

`

Saya mengalami masalah serupa di mana video di dalam <video>tag hanya diputar di Chrome dan Firefox tetapi tidak di Safari. Inilah yang saya lakukan untuk memperbaikinya ...

Trik aneh yang saya temukan adalah memiliki dua referensi berbeda ke video Anda, satu di <video>tag untuk Chrome dan Firefox, dan yang lainnya di <img>tag untuk Safari. Fakta menarik, video benar-benar diputar di <img>tag di Safari. Setelah ini, tulis skrip sederhana untuk menyembunyikan salah satunya saat browser tertentu sedang digunakan. Jadi contohnya:

<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>

Ini juga membantu memecahkan masalah bingkai / bingkai hitam tipis pada beberapa video di browser tertentu yang dirender secara tidak benar.

Saya mengalami masalah ini di mana pemutaran .mp4 di Safari tidak berfungsi, tetapi di browser lain tidak masalah. Kesalahan yang saya lihat di konsol adalah: kesalahan media src tidak didukung. Dalam kasus saya, ini ternyata menjadi masalah tipe MIME, tetapi bukan karena tidak dideklarasikan sebagai tipe MIME di IIS, melainkan dideklarasikan dua kali (sekali di IIS dan juga di file web.config). Saya menemukan ini dengan mencoba mengunduh file .mp4 secara lokal di server. Saya menghapus file konfigurasi dari lokasi konten yang saya coba putar dan itu memperbaiki masalah. Saya bisa saja menghapus tipe MIME dari file web.config, tetapi dalam hal ini file web.config tidak diperlukan.

Untuk IOS, gunakan hanya file sumber mp4. Saya telah mengamati satu masalah di browser safari terbaru yaitu browser safari tidak dapat mendeteksi file sumber dengan benar dan karena itu, putar otomatis video tidak berfungsi.

Mari kita periksa contoh di bawah ini -

     <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>

Karena saya telah menggunakan mp4, webm dalam file sumber. Safari tidak mendukung webm tetapi masih dalam versi safari terbaru, itu akan memilih webm dan gagal putar otomatis video.

Jadi untuk bekerja putar otomatis di browser yang didukung, saya sarankan untuk memeriksa browser terlebih dahulu dan berdasarkan itu Anda harus membuat html Anda.

Jadi untuk safari, gunakan html di bawah ini.

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

Untuk selain safari,

     <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>

Saya memiliki masalah yang sama - pastikan url untuk aset video berasal dari domain aman. Lingkungan dev kami adalah http sementara produksi aman. Karena video direferensikan melalui jalur relatif, itu tidak berfungsi pada pengembangan. Tampaknya menjadi masalah bahwa apel membutuhkan video agar aman ...

berfungsi tetapi MacO baru-baru ini memiliki kebijakan putar otomatis untuk pengguna: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , saya menyelesaikan masalah yang sama menggunakan tombol untuk mengaktifkan suara:

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>

Saya menghadapi masalah yang sama. Karena ukuran bingkai video saya terlalu besar. yaitu, Apple 2248 px mendukung video H.264 Baseline Profile Level 3.0, hingga 640 x 480 pada 30 fps. Perhatikan bahwa bingkai B tidak didukung di profil Baseline. periksa ini untuk info lebih lanjut

Apa yang membantu dalam kasus saya adalah menjatuhkan trek audio. Itu sunyi sebelumnya, tapi itu harus benar-benar hilang.

Di ubuntu:

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

Dan safari / desktop mulai memutar video

Untuk kasus penggunaan saya ada dua hal :

1. Saya tidak menggunakan atribut baru / kebijakan webkit playsinline ;
2. Saya video / mime-type atau whathathell tidak benar dikodekan, jadi saya menggunakan situs ini untuk mengkonversi ke semua format yang saya butuhkan: https://pt.converterpoint.com/

Hai/

Saya mengalami masalah yang persis sama, tag video HTML saya diputar dengan baik di Chrome & Mozilla, di Safari - kontrol muncul tetapi video kosong. Saya mencoba bermain dengan semua atribut di atas, menghapus / menambahkan bisu, playsInline, dll. Dan tidak ada yang berhasil. Masalahnya juga dengan server seperti yang dijelaskan di sini. Saya punya ini - TIDAK BEKERJA:

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

dan saya baru saja memindahkan video saya ke perpustakaan eksternal dan saya baik-baik saja di Safari sekarang, ini BERFUNGSI dengan baik:

<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>

Tidak ada yang berhasil untuk saya kecuali untuk mengompresi video menjadi di bawah 30mb. Itu berhasil tetapi dengan kompresi yang sangat buruk.

Jika seseorang mengalami masalah yang sama, saya menyelesaikannya dengan mengaktifkan dukungan Byte-Range di server saya. Tampaknya Safari memerlukan permintaan rentang Byte. Dalam kasus saya, saya menggunakan NGINX dan saya harus menambahkan proxy_force_ranges on;ke file konfigurasi saya. Terima kasih atas jawaban ini !

Jika Anda menggunakan dalam penggunaan REACT, playsInlineini berfungsi di semua perangkat IOS