130

Tôi đã xây dựng một ứng dụng web sử dụng thẻ HTML5 và mã JavaScript để hiển thị nội dung khác được đồng bộ hóa với video đang chạy. Nó hoạt động rất tốt trong các trình duyệt máy tính để bàn: Firefox, Chrome và Safari. Trên iPhone hoặc DroidX, trình phát video gốc bật lên và chiếm lấy màn hình, do đó che khuất nội dung động khác mà tôi muốn hiển thị cùng lúc với video.

Có cách nào để khắc phục điều này? Nếu cần, tôi sẽ tìm ra cách viết ứng dụng gốc cho cả hai nền tảng đó, nhưng nó sẽ giúp tôi tiết kiệm rất nhiều nỗ lực nếu tôi chỉ có thể gắn bó với HTML5 / JavaScript.

— Núi cao
nguồn

1

Trên thực tế, việc triển khai trình duyệt của người chơi a / v trong cả ios và Android đều có lỗi như địa ngục. Hãy thử một vài người chơi trên trang hoặc thử thêm các điều khiển thời trang cho họ và bạn sẽ thấy - nó không thể sử dụng được. Vì vậy, có lẽ ứng dụng toàn màn hình bên ngoài để phát video - không tệ lắm;)

— tuxSlayer

1

Tôi rất vui mỗi khi các thiết bị của apple hiển thị nội dung của tôi theo cách dự định. Tôi sử dụng để ăn mừng điều đó.

— Anders Lindén

Về mặt kỹ thuật là không, nhưng có một vài thư viện có sẵn để làm cho nó có thể, như iphone-inline-video (tiết lộ: Tôi đã viết nó)

— fregante

74

Trong iOS 10+

Apple đã kích hoạt thuộc tính này playsinlinetrong tất cả các trình duyệt trên iOS 10, do đó, điều này hoạt động trơn tru:

<video src="file.mp4" playsinline>

Trong iOS 8 và iOS 9

Câu trả lời ngắn: sử dụng iphone-inline-video , nó cho phép phát lại nội tuyến và đồng bộ hóa âm thanh.

Câu trả lời dài: Bạn có thể giải quyết vấn đề này bằng cách mô phỏng phát lại bằng cách lướt qua video thay vì thực sự .play()'nó.

— tự do
nguồn

Nó không hoạt động trong Trợ lý mạng Captive (Cổng thông tin Captive)

— Dominik Vogt

54

Có một thuộc tính cho phép / vô hiệu hóa trong phát lại phương tiện truyền thông trực tuyến trong trình duyệt web iOS (nếu bạn đang viết một ứng dụng gốc, thì đó sẽ là allowsInlineMediaPlaybacktài sản của UIWebView). Theo mặc định trên iPhone, cài đặt này được đặt thành NOnhưng trên iPad thì được đặt thành YES.

May mắn thay cho bạn, bạn cũng có thể điều chỉnh hành vi này trong HTML như sau:

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

... Điều đó hy vọng sẽ sắp xếp nó ra cho bạn. Tôi không biết nếu nó sẽ hoạt động trên các thiết bị Android của bạn. Đây là một tài sản webkit, vì vậy nó có thể. Dù sao cũng đáng để đi.

— lxt
nguồn

25

Cám ơn vì sự gợi ý. Thật không may, nó không thay đổi hành vi mà tôi đang thấy - trình phát video gốc toàn màn hình bật lên trên cả iPhone và DroidX.

— AlpineCarver

5

Tôi cũng đang có vấn đề này Tôi đã thêm webkit-Playsinline và thậm chí phiên bản được xác thực xml của webkit-Playsinline = "webkit-Playsinline", nhưng không thay đổi hành vi

— mike clagg

7

Điều này có thể không hoạt động trong Safari cho iPhone vì chế độ xem web không cho phép phát lại video nội tuyến. Tuy nhiên, nếu trang web được lưu trữ trong UIWebView của riêng bạn trong ứng dụng của riêng bạn, bạn có thể đặt các thuộc tính này và có thể phát lại video nội tuyến: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;

— Willster

14

Điều này cũng hoạt động trong Cordova / PhoneGap. Chỉ cần thêm phần sau vào tệp config.xml của bạn trong dự án Cordova:<preference name="AllowInlineMediaPlayback" value="true" />

— Ông TA

3

<ưu tiên tên = "AllowInlineMediaPlayback" value = "true" /> Tuyệt vời!. Nó hoạt động tốt trên iPhone của tôi. Cảm ơn rất nhiều.

— sirius2013

41

Câu trả lời cũ (áp dụng đến năm 2016)

Đây là một liên kết nhà phát triển của Apple nói rõ rằng -

trên iPhone và iPod touch, là những thiết bị màn hình nhỏ, "Video KHÔNG được trình bày trong Trang web"

Xem xét cụ thể cho thiết bị Safari

Lựa chọn của bạn :

Các webkit-playsinlinecông trình thuộc tính cho video HTML5 trên iOS nhưng chỉ khi bạn lưu các trang web vào màn hình chủ của bạn như một ứng dụng web - Không nếu mở ra một trang trong Safari
Đối với ứng dụng gốc có WebView (hoặc ứng dụng lai với HTML, CSS, JS), UIWebViewcho phép phát video nội tuyến, nhưng chỉ khi bạn đặt thuộc allowsInlineMediaPlaybacktính cho UIWebViewlớp thành đúng

— KingJulian
nguồn

1

Xem ý kiến của tôi để câu trả lời được chấp nhận. ICYMI, đối với Cordova, hãy thêm đoạn sau vào tệp config.xml của bạn:<preference name="AllowInlineMediaPlayback" value="true" />

— Ông TA

Trên YouTube.com, nó chơi mà không cần toàn màn hình

— Anthony

Câu trả lời là cũ, 2014, và mọi thứ có thể đã thay đổi. Ngoài ra, youtube.com không phải là một ứng dụng gốc có WebView như được đề cập trong câu trả lời. Cảm ơn đã chú ý mặc dù.

— KingJulian

18

Trong iOS 10 beta 4. Mã đúng trong HTML5 là

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

webkit-playsinlinedành cho iOS <10 và playsinlinedành cho iOS> = 10

Xem chi tiết qua https://webkit.org/blog/6784/new-video-polaho-for-ios/

— iamhite
nguồn

11

Theo trang này https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html nó chỉ có sẵn nếu (Bật chỉ trong một UIWebView với bộ tài sản allowsInlineMediaPlayback YES. ) Tôi hiểu trong Mobile Safari, đây là CÓ trên iPad và KHÔNG trên iPhone và iPod Touch.

— jz-
nguồn

4

Có vẻ như điều này sẽ chỉ hoạt động nếu bạn đang thiết lập trang trình phát HTML5 để "sống trong" một ứng dụng iOS gốc. Nó chắc chắn không hoạt động trên một trang web đơn giản.

— natlee75

9

Tôi không biết về Android, nhưng Safari trên iPhone hoặc iPod touch sẽ phát tất cả các video toàn màn hình vì kích thước màn hình nhỏ. Trên iPad, nó sẽ phát video trên trang nhưng cho phép người dùng làm cho nó toàn màn hình.

— ughoavgfhw
nguồn

Tôi có thể tránh trình phát video toàn màn hình gốc bằng HTML5 trên iPhone hoặc Android không?

Trong iOS 10+

Trong iOS 8 và iOS 9