Phát video nội tuyến (inline) HTML5 trên iPhone vs iPad/Trình duyệt

Trên iOS, video HTML5 mặc định phát ở chế độ toàn màn hình (fullscreen) trên iPhone, nhưng phát nội tuyến (inline) trên iPad. Điều này cản trở việc hiển thị nội dung khác cùng lúc với video.

Thuộc tính playsinline (Webkit)

Để ép video phát nội tuyến trên iPhone (iOS 10+), thêm thuộc tính:

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

• webkit-playsinline - Thuộc tính vendor prefix cho iOS cũ (iOS 9-).
• playsinline - Chuẩn HTML5, hỗ trợ iOS 10+ và các trình duyệt hiện đại.

iOS 10+ : Hỗ trợ chuẩn playsinline

<video src="video.mp4" playsinline controls></video>

Từ iOS 10, Safari hỗ trợ thuộc tính chuẩn playsinline. Video sẽ phát ngay trong trang web thay vì mở toàn màn hình.

Yêu cầu bổ sung cho iOS

Để playsinline hoạt động trơn tru trên iOS Safari, video phải có:

• muted (tắt tiếng) - Hoặc
• Người dùng đã tương tác (click/tap) với trang trước đó.

<video src="video.mp4" playsinline muted autoplay></video>

Kết hợp muted + autoplay + playsinline cho phép video tự phát nội tuyến ngay lập tức.

UIWebView / WKWebView (App native iOS)

Nếu nhúng web trong app iOS native:

• UIWebView (deprecated): Cần thiết lập allowsInlineMediaPlayback = YES.
• WKWebView: Mặc định cho phép inline nếu video có playsinline.

Tóm tắt