HTML5 Video etiketi Safari, iPhone ve iPad'de çalışmıyor

13'ler gibi küçük bir videonun olduğu bir html5 web sayfası oluşturmaya çalışıyorum, bu videonun flash versiyonunu 3 formata çevirdim: fireFogg kullanarak .ogv, firefogg kullanarak .webm ve HandBrake uygulamasını kullanarak html betiğini kullanarak .mp4 Sayfamda kullandım:

<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 Chrome ve FireFox'ta iyi çalışıyor ancak ne Masaüstünde Safari'de ne de iPhone veya iPad'de çalışmıyor, çıktı sadece video etiketinin kontrollerini gösteren boş bir sayfadır ancak hiçbir şey yüklenmemiştir

Sahip olduğum Safari sürümünün HTML5 videoyu desteklediğini unutmayın

İPhone ve iPad gibi elma cihazlarıyla aynı sorunu yaşadım, düşük güç modunu kapattım ve çalıştı ve ayrıca playsinlinevideo etiketine şu şekilde öznitelik eklemelisiniz :

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

Sadece dahil edildiğinde işe yaradı playsinline.

Gelecekte arama yapanlar için olası başka bir çözüm: (Sorununuz bir mime türü sorunu değilse.)

Kontroller = "true" işaretini ayarlamadığım sürece bazı nedenlerden dolayı videolar iPad'de oynatılmıyordu.

Örnek: Bu benim için iPhone'da çalıştı, ancak iPad'de çalışmadı.

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

Ve bu artık hem iPad hem de iPhone'da çalışıyor:

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

Web sunucunuz HTTP bayt aralığı isteklerini desteklemeyebilir. Kullandığım web sunucusunda durum böyledir ve sonuçta video widget'ı yüklenir ve bir oynat düğmesi görünür, ancak düğmeye tıklamanın hiçbir etkisi olmaz. - Video FF ve Chrome'da çalışır ancak iPhone veya iPad'de çalışmaz.

Bayt aralığı istekleri hakkında mobiforge.com adresinde daha fazla bilgi için Ek A: Apple iPhone için Akış :

Öncelikle, Safari Web Tarayıcısı içeriği ister ve bir ses veya video dosyasıysa, medya oynatıcısını açar. Medya oynatıcı daha sonra Web sunucusunun bayt aralığı isteklerini desteklediğinden emin olmak için içeriğin ilk 2 baytını ister. Ardından, eğer destekliyorsa, iPhone'un medya oynatıcısı içeriğin geri kalanını bayt aralıklarına göre ister ve oynatır.

Web'de "iphone mp4 bayt aralığı" araması yapmak isteyebilirsiniz.

Videolarınız oturum tabanlı bir oturum açma sistemiyle korunuyorsa, Safari bunları yükleyemez. Bunun nedeni, Safari'nin video için ilk istekte bulunması ve ardından görevi QuickTime'a devretmesi ve bu da başka bir istekte bulunmasıdır. Safari oturum bilgilerini tuttuğundan, kimlik doğrulamasını geçecek, ancak QuickTime geçmeyecektir.

Sunucu erişim günlüğünüzü görüntülerseniz bunu görebilirsiniz ... önce Safari'den gelen istek, sonra QuickTime'dan gelen istek. Diğer tarayıcılar, tarayıcının kendisinden yalnızca tek bir istekte bulunur.

Sorununuz buysa, geçici jetonları veya orijinal istekten sınırlı bir süreli erişimi kullanmak için video erişimini yeniden düzenlemeniz gerekebilir. Daha doğrudan bir çözüm bulursam bu yanıtı güncelleyeceğim.

Daha sonra arama yapmak için de öyle, ben kullanarak Handbr ile downscaled dair bir mp4 dosyasını vardı handbrake-gtkden apt-getörn sudo apt-get install handbrake-gtk. Ubuntu 14.04'te, handbrakedepo, MP4 desteğini kutudan çıkarmaz. Varsayılan ayarları bıraktım, ses kaydını çıkardım ve bir * .M4V dosyası oluşturdu. Merak edenler için, aynı konteynerler ancak M4V, öncelikle iOS'ta iTunes'da açmak için kullanılıyor.

Bu, Safari dışındaki tüm tarayıcılarda çalıştı:

<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 türünü arasında video/mp4ve video/m4vetkisiz olarak değiştirdim. Ayrıca controlözelliği eklemeyi de test ettim ve yine etkisi yok.

Bu, Mavericks'te Safari 7 ve Yosemite'de Safari 8 dahil olmak üzere test edilen tüm tarayıcılarda çalıştı. Aynı m4v dosyasını (yalnızca HTML'yi değil, gerçek dosyayı) mp4 olarak yeniden adlandırdım ve CDN'mize yeniden yükledim:

<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, bence tam anlamıyla MP4 olarak adlandırılan bir MP4 bekliyor. Başka hiçbir dosya ve mime türü kombinasyonu benim için işe yaramadı. Kaynak listesinin teknik olarak desteklenen ilk kaynağı seçmesi gerektiğinden oldukça emin olsam da, diğer tarayıcıların önce WEBM dosyasını, özellikle de Chrome'u tercih ettiğini düşünüyorum.

Ancak bu, iOS cihazlardaki video sorununu çözmedi (iPad 3 "yeni iPad" ve iPhone 6 test edildi).

Sadece bir mutednitelik ekleyin ve her şey yolunda gidecek.

Bu cevabın kaynağı buradadır: https://webkit.org/blog/6784/new-video-policies-for-ios/

Varsayılan olarak, WebKit aşağıdaki politikalara sahip olacaktır:

<video autoplay> öğeler artık aşağıdaki koşulları karşılayan öğeler için autoplay özelliğini kullanacak:

• <video> kaynak medyası hiç ses parçası içermiyorsa, öğelerin kullanıcı hareketi olmadan otomatik oynatılmasına izin verilir.
• <video muted> öğelerin kullanıcı hareketi olmadan otomatik olarak oynatılmasına da izin verilir.
• Bir <video>öğe, bir ses parçası alırsa veya kullanıcı hareketi olmadan sesi açılırsa , oynatma duraklatılır.
• <video autoplay> öğeler yalnızca ekranda görünür olduklarında, örneğin görüntü alanına kaydırıldıklarında, CSS aracılığıyla görünür hale getirildiklerinde ve DOM'a eklendiklerinde oynatılmaya başlayacaktır.
• <video autoplay> öğeler, örneğin görüntü alanının dışına kaydırılarak görünmez hale gelirlerse dururlar.

<video> öğeleri artık aşağıdaki koşulları karşılayan öğeler için play () yöntemini kullanacak:

• <video> kaynak medyası hiç ses parçası içermiyorsa veya sessize alma özelliği true olarak ayarlanmışsa, öğelerin bir kullanıcı hareketi olmadan oynatılmasına () izin verilir.
• Bir <video>öğe, bir ses parçası alırsa veya kullanıcı hareketi olmadan sesi açılırsa , oynatma duraklatılır.
• <video> öğeler ekranda görünmediklerinde veya görüntü alanı dışındayken oynatılmasına () izin verilecektir.
• video.play () bir Söz döndürür ve bu koşullardan herhangi biri karşılanmazsa reddedilir.

İPhone'da <video playsinline>öğelerin artık satır içinde oynatılmasına izin verilecek ve oynatma başladığında otomatik olarak tam ekran moduna geçmeyecek. <video>playsinline özellikleri olmayan öğeler, iPhone'da oynatmak için tam ekran modunu gerektirmeye devam edecek. Bir kıstırma hareketiyle tam ekrandan çıkıldığında, <video>oyun çizgisi olmayan öğeler satır içinde oynatılmaya devam eder.

Safari'nin HTML5 Video'yu desteklemesine rağmen, bunun çalışması için Quicktime Player'ın yüklenmesi gerektiğini buldum. HTML5 Video kullanan oluşturduğum bir sitede, kullanıcı Safari'yi kullanırken Quicktime'ın yüklü olması gerektiği konusunda uyarılıyor, aksi takdirde yalnızca video transkriptlerini görebilecekler. Bu yardımcı olur umarım.

Mobil Safari'nin sayfanıza memnuniyetle hizmet edeceği, ancak sertifikayı kabul etmiş olsanız bile "sahte" bir SSL sertifikasına video sunmayı reddettiği, güvenilmeyen bir 'geliştirme' SSL sertifikalarında garip sorunlar gördüm.

Test etmek için videoyu başka bir yere dağıtabilir veya http'ye (sayfanın tamamı için) geçebilirsiniz ve oynatılmalıdır.

Videonuzun sesinin kapatılmasının bir sakıncası yoksa, 'playsinline' eklemek Iphone ve Ipa'da benim için çalışıyor.

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

Videonuzun sesinin kapatılmasını istemiyor ancak yine de otomatik oynatmayı istiyorsanız, js ile sessiz özelliği kaldırmayı deneyebilirsiniz: Sessiz bir prop ile html5 videonun sesi nasıl açılır

İOS 6.1'den itibaren iPad'de videoları otomatik oynatmak artık mümkün değil. Apple belgelerine göre Otomatik oynatma özelliği, iPad dahil tüm ios cihazlarında Safari'de çalışmıyor:

"Apple, hem komut dosyası hem de öznitelik uygulamaları aracılığıyla iOS aygıtlarında otomatik video oynatmayı devre dışı bırakma kararı aldı.

Safari'de, kullanıcının bir hücresel ağda olabileceği ve veri birimi başına ücretlendirilebileceği iOS'ta (iPad dahil tüm cihazlar için), önceden yükleme ve otomatik oynatma devre dışı bırakılır. Kullanıcı başlatana kadar hiçbir veri yüklenmez. "

Daha fazlasını bu Apple belgelerinde okuyabilirsiniz

.Mp4 için bu çalışır (safari mobil ve masaüstü):

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

controls=”true”Elma kendi başına sadece kullanım kontrolleri söylediği gibi bir yukarıda sonrası belirtilen bana hayır Sense olun.

Referans: "HTML5 ses veya videoyu kullanmak için, bir veya öğesi oluşturarak, medya için bir kaynak URL belirleyerek ve kontroller özelliğini ekleyerek başlayın. <video src="http://example.com/path/mymovie.mp4" controls></video>"

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

İlişkilerimde (küçük bir bilgi) : iPhone'dan video yüklemenin videoyu sunucuya .quicktime olarak gönderdiğini buldum. İronik olarak, videoyu safaride sunucudan oynatmaya çalışırken sorun budur. (mobil ve masaüstü).

Yani (benim gibi) safaride .quicktime (veya .mp4 dışında herhangi bir şey) sorunu yaşıyorsanız , işte apple tarafından sağlanan bir çalışma. Unutmayın, henüz kendim test etmedim ve bir bakışta pek memnun değilim, sadece daha fazla bilgi veriyorum.

Referans: "QuickTime Eklentisine Geri Dönün Hemen hemen tüm tarayıcılar için çalışan QuickTime eklentisine geri dönmenin basit bir yolu vardır — Apple tarafından sağlanan önceden oluşturulmuş JavaScript dosyasını, ac_quicktime.js dosyasını HTML Video Örneğinden indirin ve HTML başlığınıza aşağıdaki kod satırını ekleyerek bunu web sayfanıza ekleyin: <script src="ac_quicktime.js" type="text/javascript"></script>"

Kaynak: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP400069523-CH2-S

Güncelleme: Sunucuya.mov önceden yüklenmek üzere .quicktime yeniden adlandırmak için (base64 dosya türünde "data: video / mov;"), ac_quicktime.js'yi atlayın. . . daha sonra html video etiketinde çalışacaktır; Hackerdy ​​Hack.

Bu kodu kullanarak video safarideki tüm tarayıcılarda ve ios cihazlarında oynayacak ... Herkesin peşinden gidin (Bunu kullandım ve iyi çalışıyorum)

'

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

'

Bir <video>etiketin içindeki videoların yalnızca Chrome ve Firefox'ta oynatıldığı ancak Safari'de oynatılmadığı benzer bir sorun yaşadım . İşte bunu düzeltmek için yaptığım şey ...

Bulduğum garip bir numara, videonuz için biri <video>Chrome ve Firefox için bir etiket, diğeri de <img>Safari için bir etiket olmak üzere iki farklı referansa sahip olmaktı. Eğlenceli gerçek, videolar aslında <img>Safari'de bir etiket içinde oynatılıyor . Bundan sonra, belirli bir tarayıcı kullanımdayken birini veya diğerini gizlemek için basit bir komut dosyası yazın. Yani mesela:

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

Bu ayrıca, yanlış bir şekilde oluşturuldukları bazı tarayıcılarda bazı videolarda ince siyah çerçeve / kenarlık sorununu çözmeye yardımcı olur.

Safari'de .mp4 oynatmanın çalışmadığı bir sorunu yaşadım, ancak diğer tarayıcılarda sorun yoktu. Konsolda gördüğüm hata şuydu: error media src desteklenmiyor. Benim durumumda bu bir MIME türü sorun olarak ortaya çıktı, ancak IIS'de MIME türü olarak bildirilmediği için değil, iki kez bildirildiği için değil (bir kez IIS'de ve ayrıca bir web.config dosyasında). Bunu, .mp4 dosyasını yerel olarak sunucuya indirmeye çalışarak buldum. Yapılandırma dosyasını oynatmaya çalıştığım içeriğin konumundan kaldırdım ve sorunu çözdüm. MIME türünü web.config dosyasından silebilirdim, ancak bu durumda web.config dosyasına gerek yoktu.

IOS için lütfen yalnızca mp4 kaynak dosyasını kullanın. En son safari tarayıcısında, safari tarayıcısının kaynak dosyayı doğru bir şekilde algılayamadığı ve bu nedenle video otomatik oynatmanın çalışmadığı bir sorun gözlemledim.

Aşağıdaki örneği kontrol edelim -

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

Kaynak dosyalarda mp4, webm kullandığım için. Safari deosnt webm'yi destekliyor ancak yine de en son safari sürümünde, webm'yi seçecek ve video otomatik oynatmada başarısız oluyor.

Bu nedenle, desteklenen tarayıcıda otomatik oynatmayı çalıştırmak için önce tarayıcıyı kontrol etmenizi öneririm ve buna bağlı olarak html'nizi oluşturmanız gerekir.

Safari için html'nin altında kullanın.

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

Safari dışında

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

Aynı sorunu yaşadım - video öğesinin url'sinin güvenli alandan geldiğinden emin olun. Üretim güvenliyken geliştirme ortamımız http'dir. Videoya göreceli yoldan referans verildiğinden, geliştirme üzerinde çalışmıyordu. Apple'ın videonun güvenli olmasını gerektirdiği bir sorun gibi görünüyor ...

Çalışıyor ancak MacO'ların yakın zamanda kullanıcı için otomatik oynatma politikası var: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , Sesi etkinleştirmek için bir düğme kullanarak aynı sorunu çözdüm:

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>

Ben de aynı sorunla karşılaştım. Çünkü video çerçeve boyutum çok büyüktü. yani. 2248 piksel elma, 30 fps'de 640 x 480'e kadar H.264 Temel Profil Seviyesi 3.0 videoyu destekler. Baseline profilinde B çerçevelerinin desteklenmediğini unutmayın. daha fazla bilgi için bunu kontrol edin

Benim durumumda yardımcı olan şey ses kaydını düşürmekti. Önceden sessizdi ama tamamen gitmesi gerekiyordu.

Ubuntu'da:

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

Ve safari / masaüstü videoyu oynatmaya başlar

Kullanım durumum için iki şey vardı :

1. Yeni özniteliği / webkit politikasını kullanmıyordum playsinline;
2. Videom / mime-tipim veya whathell doğru şekilde kodlanmamış, bu yüzden bu siteyi herkese dönüştürmek için kullandım ihtiyacım biçimlere : https://pt.converterpoint.com/

Ö/

Tam olarak aynı sorunu yaşadım, HTML video etiketim Chrome ve Mozilla'da, Safari'de iyi bir şekilde oynatıldı - kontroller görünüyordu ancak video boştu. Yukarıdaki tüm özelliklerle oynamayı, sesi kaldırmayı / eklemeyi, sıralı oynatmayı vb. Denedim ve hiçbir şey işe yaramadı. Sorun, burada da anlatıldığı gibi sunuculardaydı. Ben buna sahiptim - ÇALIŞMADI:

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

ve videomu harici kitaplığa yeni taşıdım ve şimdi Safari'de iyiyim, iyi ÇALIŞIYOR:

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

Videoyu 30 MB'nin altında olacak şekilde sıkıştırmak dışında hiçbir şey işe yaramadı. Bu hile yaptı ama çok kötü bir sıkıştırma ile.

Aynı sorunu yaşayan biri varsa, sunucumda Bayt Aralığı desteğini etkinleştirerek çözdüm. Safari'nin Bayt aralığı istekleri gerektirdiği anlaşılıyor. Benim durumumda NGINX kullanıyorum ve proxy_force_ranges on;yapılandırma dosyama eklemem gerekiyor . Bu cevap için teşekkürler !

REACT'ta kullanıyorsanız, playsInlinebu tüm IOS cihazlarında çalışıyor