130

ฉันได้สร้างเว็บแอปที่ใช้แท็ก HTML5 และโค้ด JavaScript ที่แสดงเนื้อหาอื่น ๆ ที่ซิงโครไนซ์กับวิดีโอที่กำลังทำงานอยู่ ใช้งานได้ดีในเบราว์เซอร์เดสก์ท็อป: Firefox, Chrome และ Safari บน iPhone หรือ DroidX โปรแกรมเล่นวิดีโอเนทีฟจะปรากฏขึ้นและเข้าควบคุมหน้าจอจึงบดบังเนื้อหาไดนามิกอื่น ๆ ที่ฉันต้องการแสดงพร้อมกับวิดีโอ

มีวิธีแก้ปัญหานี้หรือไม่? ถ้าจำเป็นฉันจะหาวิธีเขียนแอพเนทีฟสำหรับทั้งสองแพลตฟอร์มนั้น แต่มันจะช่วยฉันได้มากถ้าฉันสามารถใช้ HTML5 / JavaScript ได้

— AlpineCarver
แหล่งที่มา

1

อันที่จริงการใช้งานเบราว์เซอร์ของผู้เล่น a / v ทั้งใน ios และ android นั้นมีปัญหาเหมือนนรก ลองใช้ผู้เล่นหลาย ๆ คนในเพจหรือลองเพิ่มการควบคุมที่มีสไตล์ให้พวกเขาแล้วคุณจะเห็น - มันใช้ไม่ได้ ดังนั้นอาจเป็นแอปแบบเต็มหน้าจอภายนอกสำหรับการเล่นวิดีโอ - ไม่เลวร้ายนัก;)

— tuxSlayer

1

ฉันมีความสุขทุกครั้งที่อุปกรณ์ Apple แสดงเนื้อหาของฉันตามที่ตั้งใจไว้ ฉันใช้เพื่อเฉลิมฉลองนั้น

— Anders Lindén

ในทางเทคนิคไม่มี แต่มีห้องสมุดสองแห่งที่ทำให้เป็นไปได้เช่นiphone-inline-video (การเปิดเผย: ฉันเขียนไว้)

— อิสระ

74

ใน iOS 10+

Apple เปิดใช้งานแอตทริบิวต์playsinlineในทุกเบราว์เซอร์บน iOS 10 ดังนั้นจึงทำงานได้อย่างราบรื่น:

<video src="file.mp4" playsinline>

ใน iOS 8 และ iOS 9

คำตอบสั้น ๆ :ใช้iphone-inline-videoซึ่งจะเปิดใช้งานการเล่นแบบอินไลน์และซิงค์เสียง

คำตอบยาว:คุณสามารถหลีกเลี่ยงปัญหานี้โดยการจำลองการเล่นโดยskimmingวิดีโอแทนของจริง.play()'ไอเอ็นจีมัน

— fregante
แหล่งที่มา

มันไม่ทำงานใน Captive Network Assistant (Captive Portal)

— Dominik Vogt

54

มีคุณสมบัติที่เปิด / ปิดการเล่นสื่อไลน์ในเว็บเบราว์เซอร์ iOS (หากคุณกำลังเขียนแอปเนทีฟมันจะเป็นallowsInlineMediaPlaybackคุณสมบัติของ UIWebView) โดยค่าเริ่มต้นบน iPhone นี้เป็นชุดที่จะNOแต่บน iPad YESมีการตั้งค่า

โชคดีสำหรับคุณคุณสามารถปรับพฤติกรรมนี้ใน HTML ได้ดังนี้:

<video id="myVideo" width="280" height="140" webkit-playsinline>

... หวังว่าจะแยกออกให้คุณ ฉันไม่รู้ว่ามันจะใช้ได้กับอุปกรณ์ Android ของคุณหรือเปล่า มันเป็นคุณสมบัติของ webkit ดังนั้นจึงอาจ คุ้มค่าที่จะไป

— LXT
แหล่งที่มา

25

ขอบคุณสำหรับคำแนะนำ น่าเสียดายที่มันไม่ได้เปลี่ยนพฤติกรรมที่ฉันเห็น แต่เครื่องเล่นวิดีโอเนทีฟแบบเต็มหน้าจอจะปรากฏขึ้นทั้งบน iPhone และ DroidX

— AlpineCarver

5

ฉันมีปัญหานี้เหมือนกัน ฉันได้เพิ่ม webkit-playsinline และแม้แต่ webkit-playsinline = "webkit-playsinline" ที่ผ่านการตรวจสอบแล้ว xml แต่ไม่ได้เปลี่ยนพฤติกรรม

— mike clagg

7

สิ่งนี้อาจใช้ไม่ได้ใน Safari สำหรับ iPhone เนื่องจากมุมมองเว็บไม่อนุญาตให้เล่นวิดีโอแบบอินไลน์ อย่างไรก็ตามหากหน้าเว็บนั้นโฮสต์อยู่ภายใน UIWebView ของคุณเองภายในแอพของคุณเองคุณสามารถตั้งค่าคุณสมบัติเหล่านี้และการเล่นวิดีโอแบบอินไลน์จะทำได้: webview.allowsInlineMediaPlayback = ใช่; webview.mediaPlaybackRequiresUserAction = ไม่;

— Willster

14

ซึ่งใช้งานได้ใน Cordova / PhoneGap ด้วย เพียงเพิ่มสิ่งต่อไปนี้ใน config.xml ของคุณในโปรเจ็กต์ Cordova:<preference name="AllowInlineMediaPlayback" value="true" />

— Mr. TA

3

<ค่ากำหนดชื่อ = "AllowInlineMediaPlayback" value = "true" /> เยี่ยมมาก!. มันทำงานได้ดีบน iPhone ของฉัน ขอบคุณมาก.

— sirius2013

41

คำตอบเก่า (ใช้ได้จนถึงปี 2559)

นี่คือลิงค์นักพัฒนาของ Apple ที่ระบุอย่างชัดเจนว่า -

บน iPhone และ iPod touch ซึ่งเป็นอุปกรณ์หน้าจอขนาดเล็ก " ไม่มีการนำเสนอวิดีโอในหน้าเว็บ"

ข้อพิจารณาเฉพาะอุปกรณ์ Safari

ตัวเลือกของคุณ :

webkit-playsinlineแอตทริบิวต์งานสำหรับวิดีโอ HTML5 บน iOS แต่เฉพาะเมื่อคุณบันทึกหน้าเว็บที่หน้าจอที่บ้านของคุณเป็น webapp - ไม่ได้ถ้าเปิดหน้าใน Safari
สำหรับแอปที่มาพร้อมกับ WebView (หรือแอปไฮบริดที่มี HTML, CSS, JS) UIWebViewจะอนุญาตให้เล่นวิดีโอแบบอินไลน์ได้ แต่หากคุณตั้งค่าallowsInlineMediaPlaybackคุณสมบัติสำหรับUIWebViewคลาสเป็นจริงเท่านั้น

— KingJulian
แหล่งที่มา

1

ดูความคิดเห็นของฉันสำหรับคำตอบที่ยอมรับ ICYMI สำหรับ Cordova เพิ่มสิ่งต่อไปนี้ใน config.xml ของคุณ:<preference name="AllowInlineMediaPlayback" value="true" />

— Mr. TA

บน YouTube.com เล่นโดยไม่แสดงเต็มจอ

— Anthony

คำตอบคือเก่าในปี 2014 และอาจมีการเปลี่ยนแปลง นอกจากนี้ youtube.com ไม่ใช่แอปที่มาพร้อมกับ WebViewตามที่กล่าวไว้ในคำตอบ ขอบคุณที่สังเกตเห็น

— KingJulian

18

ใน iOS 10 เบต้า 4 โค้ดที่ถูกต้องใน HTML5 คือ

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinlineสำหรับ iOS <10 และplaysinlineสำหรับ iOS> = 10

ดูรายละเอียดผ่านhttps://webkit.org/blog/6784/new-video-policies-for-ios/

— iamhite
แหล่งที่มา

11

ตามหน้านี้ https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html จะใช้ได้เฉพาะในกรณีที่ (เปิดใช้งานใน UIWebView ที่มีคุณสมบัติ allowInlineMediaPlayback เท่านั้นที่ตั้งค่าเป็น YES ) ฉันเข้าใจใน Mobile Safari นี่คือใช่บน iPad และไม่ใช่บน iPhone และ iPod Touch

— jz-
แหล่งที่มา

4

ดูเหมือนว่าจะได้ผลก็ต่อเมื่อคุณตั้งค่าหน้าโปรแกรมเล่น HTML5 ให้ "อยู่ภายใน" แอป iOS ที่มาพร้อมเครื่อง แน่นอนว่ามันใช้ไม่ได้กับหน้าเว็บทั่วไป

— natlee75

9

ฉันไม่รู้เกี่ยวกับ Android แต่ Safari บน iPhone หรือ iPod touch จะเล่นวิดีโอทั้งหมดแบบเต็มหน้าจอเนื่องจากขนาดหน้าจอที่เล็ก บน iPad จะเล่นวิดีโอบนหน้าเว็บ แต่อนุญาตให้ผู้ใช้แสดงแบบเต็มหน้าจอ

— ughoavgfhw
แหล่งที่มา

ฉันสามารถหลีกเลี่ยงโปรแกรมเล่นวิดีโอแบบเต็มหน้าจอที่มี HTML5 บน iPhone หรือ Android ได้หรือไม่

ใน iOS 10+

ใน iOS 8 และ iOS 9