แท็กวิดีโอ HTML5 ไม่ทำงานใน Safari, iPhone และ iPad

ฉันพยายามสร้างหน้าเว็บ html5 ซึ่งมีวิดีโอขนาดเล็กเช่น 13s ฉันแปลงเวอร์ชันแฟลชของวิดีโอนี้เป็น 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มันทำงานเฉพาะเมื่อรวมทั้ง

อีกทางเลือกหนึ่งที่เป็นไปได้สำหรับผู้ค้นหาในอนาคต: (หากปัญหาของคุณไม่ใช่ปัญหาประเภทอื่น)

ด้วยเหตุผลบางประการวิดีโอจะไม่เล่นบน iPad เว้นแต่ฉันจะตั้งค่าสถานะการควบคุม = "จริง"

ตัวอย่าง: สิ่งนี้ใช้ได้กับฉันบน 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เกี่ยวกับคำขอช่วงไบต์ในภาคผนวก A: การสตรีมสำหรับ Apple iPhone :

ขั้นแรก Safari เว็บเบราว์เซอร์จะร้องขอเนื้อหาและหากเป็นไฟล์เสียงหรือวิดีโอจะเปิดขึ้นมาเป็นเครื่องเล่นสื่อ จากนั้นเครื่องเล่นสื่อจะร้องขอเนื้อหา 2 ไบต์แรกเพื่อให้แน่ใจว่าเว็บเซิร์ฟเวอร์รองรับคำขอช่วงไบต์ จากนั้นหากรองรับพวกเขาเครื่องเล่นสื่อของ iPhone จะขอเนื้อหาที่เหลือตามช่วงไบต์และเล่นมัน

คุณอาจต้องการค้นหาเว็บสำหรับ "iphone mp4 byte-range"

หากวิดีโอของคุณได้รับการปกป้องโดยระบบล็อกอินตามเซสชัน Safari จะไม่สามารถโหลดได้ เนื่องจาก Safari ส่งคำขอเริ่มต้นสำหรับวิดีโอจากนั้นส่งงานไปยัง QuickTime ซึ่งจะส่งคำขออีกครั้ง เนื่องจาก Safari เก็บข้อมูลเซสชันไว้จึงจะผ่านการรับรองความถูกต้อง แต่ QuickTime จะไม่

คุณจะเห็นสิ่งนี้หากคุณดูบันทึกการเข้าถึงเซิร์ฟเวอร์ของคุณ ... ก่อนอื่นให้ร้องขอจาก Safari จากนั้นจึงขอจาก QuickTime เบราว์เซอร์อื่น ๆ ก็ขอเพียงครั้งเดียวจากเบราว์เซอร์เอง

หากนี่คือปัญหาของคุณคุณอาจต้องทำการเข้าถึงวิดีโออีกครั้งเพื่อใช้โทเค็นชั่วคราวหรือการเข้าถึงแบบ จำกัด เวลาจากคำขอเดิม ฉันจะอัปเดตคำตอบนี้หากพบวิธีแก้ปัญหาที่ตรงกว่านี้

สำหรับการค้นหาในอนาคตได้เป็นอย่างดีผมมีไฟล์ mp4 ที่ฉัน downscaled กับ 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>

ฉันเปลี่ยนประเภทละครใบ้ระหว่าง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 ชื่อจริง ไม่มีการผสมไฟล์และประเภทละครใบ้แบบอื่นที่เหมาะกับฉัน ฉันคิดว่าเบราว์เซอร์อื่น ๆ เลือกใช้ไฟล์ 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> ตอนนี้องค์ประกอบจะเป็นไปตามวิธีการเล่น () สำหรับองค์ประกอบที่ตรงตามเงื่อนไขต่อไปนี้:

• <video> องค์ประกอบจะได้รับอนุญาตให้เล่น () โดยไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้หากสื่อต้นทางไม่มีแทร็กเสียงหรือหากคุณสมบัติปิดเสียงถูกตั้งค่าเป็นจริง
• หาก<video>องค์ประกอบได้รับแทร็กเสียงหรือถูกปิดเสียงโดยไม่มีท่าทางของผู้ใช้การเล่นจะหยุดชั่วคราว
• <video> องค์ประกอบจะได้รับอนุญาตให้เล่น () เมื่อมองไม่เห็นบนหน้าจอหรือเมื่ออยู่นอกวิวพอร์ต
• video.play () จะส่งคืน Promise ซึ่งจะถูกปฏิเสธหากไม่เป็นไปตามเงื่อนไขเหล่านี้

ใน iPhone <video playsinline>ตอนนี้องค์ประกอบต่างๆจะได้รับอนุญาตให้เล่นแบบอินไลน์และจะไม่เข้าสู่โหมดเต็มหน้าจอโดยอัตโนมัติเมื่อการเล่นเริ่มต้นขึ้น <video>องค์ประกอบที่ไม่มีคุณสมบัติ playinline จะยังคงต้องใช้โหมดเต็มหน้าจอสำหรับการเล่นบน iPhone เมื่อออกจากโหมดเต็มหน้าจอด้วยท่าทางบีบนิ้ว<video>องค์ประกอบที่ไม่มีการเล่นอินไลน์จะยังคงเล่นแบบอินไลน์

ฉันพบว่าแม้ว่า Safari จะรองรับวิดีโอ HTML5 แต่ก็ต้องติดตั้ง Quicktime Player เพื่อให้สามารถใช้งานได้ ในไซต์ที่ฉันสร้างขึ้นโดยใช้วิดีโอ HTML5 ผู้ใช้จะได้รับการแจ้งเตือนเมื่อใช้ Safari โดยแจ้งว่าพวกเขาต้องติดตั้ง Quicktime มิฉะนั้นจะดูได้เฉพาะการถอดเสียงวิดีโอเท่านั้น หวังว่านี่จะช่วยได้

ฉันเคยเห็นปัญหาแปลก ๆ เกี่ยวกับใบรับรอง SSL 'การพัฒนา' ที่ไม่น่าเชื่อถือซึ่ง Safari บนมือถือจะให้บริการหน้าของคุณอย่างมีความสุข แต่ปฏิเสธที่จะให้บริการวิดีโอกับใบรับรอง SSL 'ปลอม' แม้ว่าคุณจะยอมรับใบรับรองแล้วก็ตาม

ในการทดสอบคุณสามารถทำให้วิดีโอใช้งานได้ที่อื่นหรือเปลี่ยนไปใช้ http (สำหรับทั้งหน้า) และวิดีโอควรเล่น

การเพิ่ม 'playinline' ใช้ได้ผลกับฉันบน 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 ต้นทางสำหรับสื่อและรวมถึงแอตทริบิวต์การควบคุม <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 และ รวมไว้ในหน้าเว็บของคุณโดยการแทรกบรรทัดของโค้ดต่อไปนี้ในส่วนหัว 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-CH2-SW6

อัปเดต: สำหรับ .quicktimeเปลี่ยนชื่อเป็น.movก่อนการอัปโหลดไปยังเซิร์ฟเวอร์ (ใน base64 filetype "data: video / mov;") ให้ข้าม ac_quicktime.js . . จากนั้นจะทำงานในแท็กวิดีโอ html Hackerdy ​​แฮ็ค

เมื่อใช้รหัสนี้วิดีโอจะเล่นในเบราว์เซอร์ทั้งหมดในซาฟารีและอุปกรณ์ 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 ไม่ทำงาน แต่ในเบราว์เซอร์อื่นก็ใช้ได้ ข้อผิดพลาดที่ฉันเห็นในคอนโซลคือ: ไม่รองรับ error 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 ต้องการให้วิดีโอปลอดภัย ...

ใช้งานได้ แต่ MacO เพิ่งมีนโยบายการเล่นอัตโนมัติสำหรับผู้ใช้: 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 พิกเซลรองรับวิดีโอ H.264 Baseline Profile Level 3.0 สูงสุด 640 x 480 ที่ 30 fps โปรดทราบว่าไม่รองรับเฟรม 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 การควบคุมปรากฏขึ้น แต่วิดีโอว่างเปล่า ฉันพยายามเล่นกับแอตทริบิวต์ทั้งหมดข้างต้นลบ / เพิ่มปิดเสียงเล่นอินไลน์ ฯลฯ และไม่มีอะไรได้ผล ปัญหาเกิดกับเซิร์ฟเวอร์ตามที่อธิบายไว้ที่นี่เช่นกัน ฉันมีสิ่งนี้ - ไม่ทำงาน:

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

ไม่มีอะไรได้ผลสำหรับฉันยกเว้นการบีบอัดวิดีโอให้มีขนาดต่ำกว่า 30MB นั่นเป็นเคล็ดลับ แต่มีการบีบอัดที่ไม่ดีมาก

หากมีคนที่มีปัญหาเดียวกันฉันแก้ไขได้โดยเปิดใช้งานการสนับสนุน Byte-Range บนเซิร์ฟเวอร์ของฉัน ดูเหมือนว่า Safari ต้องการการร้องขอช่วงไบต์ ในกรณีของฉันฉันใช้ NGINX และฉันต้องเพิ่มproxy_force_ranges on;ไฟล์กำหนดค่าของฉัน ขอบคุณสำหรับคำตอบนี้ !

หากการใช้งานของคุณใน REACT ใช้playsInlineงานได้ในอุปกรณ์ IOS ทั้งหมด