Bạn có thể tự động phát video HTML5 trên iPad không?

123

Các <video>thẻ autoplay="autoplay"thuộc tính hoạt động tốt trong Safari.

Khi kiểm tra trên iPad, video phải được kích hoạt thủ công.

Tôi nghĩ rằng đó là một vấn đề tải, vì vậy tôi đã chạy một vòng kiểm tra trạng thái của phương tiện truyền thông:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

Trạng thái vẫn còn 0trên iPad. Trên safari máy tính để bàn của tôi, nó đi qua 0, 1và cuối cùng 4. Trên iPad, nó chỉ đạt được 4nếu tôi chạm thủ công vào mũi tên "phát".

Hơn nữa, gọi $("#periscopevideo").get(0).play()từ một nhấp chuột thông qua onClickcác công trình quá.

Có bất kỳ hạn chế nào của Apple liên quan đến tự động phát không? (Nhân tiện, tôi đang chạy iOS 5+).

jquery  ios  objective-c  html  cocoa-touch 
— Jem
nguồn
— apsillers
Có lẽ chúng ta nên xem xét phát hiện trình duyệt và liệu bạn có nên gọi playVideo (): stackoverflow.com/questions/26895492/
— Kẻ
Công việc này đối với tôi github.com/Stanko/html-canvas-video-player
— dimitar
Blogpost hữu ích về chủ đề này: webkit.org/blog/6784/new-video-polaho-for-ios
— Matthias M
opera mini trong ios hỗ trợ tự động phát theo mặc định, trong khi chrome, firefox và safari không và không cung cấp tùy chọn để bật.
— ẩn danh

Câu trả lời:

156

Cập nhật iOS 10

Lệnh cấm tự động phát đã được dỡ bỏ kể từ iOS 10 - nhưng với một số hạn chế (ví dụ: A có thể được tự động phát nếu không có bản nhạc âm thanh).

Để xem danh sách đầy đủ các hạn chế này, hãy xem các tài liệu chính thức: https://webkit.org/blog/6784/new-video-polaho-for-ios/

iOS 9 trở về trước

Kể từ iOS 6.1, không thể tự động phát video trên iPad.

Giả định của tôi về lý do tại sao họ đã tắt tính năng tự động phát?

Chà, vì nhiều chủ sở hữu thiết bị có giới hạn sử dụng dữ liệu / băng thông trên thiết bị của họ, tôi nghĩ rằng Apple cảm thấy rằng chính người dùng nên quyết định khi họ bắt đầu sử dụng băng thông.

Sau một chút nghiên cứu, tôi đã tìm thấy đoạn trích sau trong tài liệu của Apple liên quan đến tự động phát trên thiết bị iOS để xác nhận giả định của tôi:

"Apple đã đưa ra quyết định vô hiệu hóa việc phát video tự động trên các thiết bị iOS, thông qua cả việc triển khai tập lệnh và thuộc tính.

Trong Safari, trên iOS (đối với tất cả các thiết bị, bao gồm iPad), nơi người dùng có thể ở trên mạng di động và bị tính phí trên mỗi đơn vị dữ liệu, tải trước và tự động phát bị vô hiệu hóa. Không có dữ liệu được tải cho đến khi người dùng bắt đầu nó. "- Tài liệu của Apple.

Dưới đây là một cảnh báo riêng được nêu trên trang Tham khảo HTML5 của Safari về lý do tại sao phương tiện nhúng không thể được phát trong Safari trên iOS:

Cảnh báo : Để ngăn tải xuống không mong muốn trên các mạng di động với chi phí của người dùng, phương tiện nhúng không thể được phát tự động trong Safari trên iOS, người dùng luôn bắt đầu phát lại. Bộ điều khiển được tự động cung cấp trên iPhone hoặc iPod touch sau khi phát lại, nhưng đối với iPad, bạn phải đặt thuộc tính điều khiển hoặc cung cấp bộ điều khiển bằng JavaScript.

Có gì phương tiện này (về code) là Javascript của play()và load()phương pháp không hoạt động cho đến khi các đồng tu dùng phát lại, trừ các play()hoặc load()phương pháp được kích hoạt bởi người dùng hành động (ví dụ như một sự kiện nhấp chuột).

Về cơ bản, nút phát do người dùng khởi tạo hoạt động, nhưng một onLoad="play()"sự kiện thì không.

Ví dụ: điều này sẽ phát phim: 

<input type="button" value="Play" onclick="document.myMovie.play()">

Trong khi những điều sau đây sẽ không làm gì trên iOS: 

<body onload="document.myMovie.play()">
— dsgriffin
nguồn
1
Hmmm 3 tháng tạo đồng hồ báo thức trực tuyến cho iPhone Safari! Chúng tôi (ngủ.fm) đã tìm ra một cách để giữ cho điện thoại luôn hoạt động trong khi ứng dụng đang mở nhưng bây giờ với iOS 6.1, âm thanh báo thức sẽ không phát. Nó hoạt động tốt trong iOS 6.0. Có một công việc xung quanh?
— chaser7016
1
oh chờ đã, chúng tôi đã có đồng hồ báo thức web di động của chúng tôi (ngủ.fm) cho iPhone Safari và chạy lại, vì vậy có nhiều cách giải quyết cho việc thiếu hỗ trợ tự động phát html5.
— chaser7016
1
@ Jonah1289 Theo bài đăng trên blog của bạn trên Sleep.fm Brian Cavalier đã Tweet một liên kết github với tiêu đề sau Tự động phát âm thanh trên ipad hoặc iphone bằng cách sử dụng webkitaudiocontext thay vì thẻ âm thanh Có thể là một nơi tốt để bắt đầu.
— Francisco
1
Chi tiết hơn, xin vui lòng - giải pháp cụ thể nào tồn tại khi thiếu hỗ trợ Tự động phát?
— Umopepisdn
11
Những gì họ nên làm là cho phép tự động phát khi có wifi và có chế độ phát thủ công hoặc nhắc người dùng rằng video muốn tự động phát khi trên mạng di động.
— Ric
16

Tôi muốn bắt đầu bằng cách nói rằng tôi nhận ra câu hỏi này đã cũ và đã có câu trả lời được chấp nhận; nhưng, với tư cách là một người dùng internet không may sử dụng câu hỏi này như một phương tiện để kết thúc chỉ được chứng minh là sai ngay sau đó (nhưng không phải trước khi tôi làm phiền khách hàng của mình một chút) Tôi muốn thêm suy nghĩ và đề xuất của mình.

Mặc dù @DSG và @Giona là chính xác và không có gì sai với câu trả lời của họ, nhưng có một cơ chế sáng tạo mà bạn có thể sử dụng để "giải quyết", có thể nói, giới hạn này. Điều đó không có nghĩa là tôi đang bỏ qua việc lách luật của tính năng này, hoàn toàn ngược lại, nhưng chỉ là một số cơ chế để người dùng vẫn "cảm thấy" như thể một tệp video hoặc âm thanh là "tự động phát".

Công việc nhanh chóng là ẩn một thẻ video ở đâu đó trên trang di động, vì tôi đã xây dựng một trang web phản hồi nhanh, tôi chỉ làm điều này cho các màn hình nhỏ hơn. Thẻ video (ví dụ HTML và jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Với điều đó được ẩn trên trang, khi người dùng "nhấp" để xem phim (vẫn tương tác với người dùng, không có cách nào để khắc phục yêu cầu đó) thay vì điều hướng đến trang xem phụ tôi tải video ẩn. Điều này chủ yếu hoạt động vì thẻ phương tiện không thực sự được sử dụng mà thay vào đó được quảng cáo thành phiên bản Quicktime nên việc có một yếu tố video hiển thị là không cần thiết. Trong trình xử lý cho "nhấp chuột" (hoặc "chạm" trên thiết bị di động).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

Và viola. Theo như UX, một người dùng nhấp vào video để phát và Quicktime mở phát video họ chọn. Điều này vẫn nằm trong giới hạn rằng video chỉ có thể được phát qua hành động của người dùng vì vậy tôi không ép buộc dữ liệu đối với bất kỳ ai không quyết định xem video với dịch vụ này. Tôi đã phát hiện ra điều này khi cố gắng tìm hiểu chính xác Youtube đã loại bỏ điều này như thế nào với điện thoại di động của họ, về cơ bản là một công cụ xây dựng trang Javascript thực sự đẹp và ẩn yếu tố như trong trường hợp thẻ video.

tl; dr Đây là một cách "giải quyết" để thử và tạo một tính năng UX "tự động phát" trên các thiết bị iOS mà không vượt quá giới hạn của Apple và vẫn có người dùng quyết định xem họ có muốn xem video (hoặc âm thanh thích nhất không, mặc dù tôi Họ đã không tự kiểm tra) mà không có một cái nào được tải mà không có sự cho phép của họ.

Ngoài ra, với người đã nhận xét đó là từ ngủ.fm, điều này vẫn không may sẽ không phải là một giải pháp cho các vấn đề của bạn, đó là phát lại âm thanh dựa trên thời gian.

Tôi hy vọng ai đó thấy thông tin này hữu ích, nó sẽ giúp tôi tiết kiệm được một tuần gửi tin xấu cho một khách hàng kiên quyết rằng họ có tính năng này và tôi rất vui khi tìm được cách cung cấp cuối cùng.

BIÊN TẬP

Phát hiện thêm cho thấy cách giải quyết trên chỉ dành cho thiết bị iPhone / iPod. IPad phát video trong Safari trước khi được chiếu toàn màn hình, do đó bạn sẽ cần một số cơ chế để thay đổi kích thước video khi nhấp trước khi phát nếu không bạn sẽ kết thúc bằng âm thanh và không có video.

— Brandon Buck
nguồn
2
Sẽ tốt hơn khi sử dụng $dummyVideo.get(0)thay vì dấu ngoặc, vì vậy jQuery có thể thất bại một cách duyên dáng nếu lựa chọn của bạn trống.
— Kính hiển vi
12

Chỉ cần đặt

webView.mediaPlaybackRequiresUserAction = NO;

Tự động phát hoạt động cho tôi trên iOS.

— Er Li
nguồn
29
Điều này không hoạt động cho một trang web, điều này chỉ hoạt động cho các trang web mà bạn đã bọc chúng bằng một ứng dụng Bản địa.
— Brandon Buck
5
Ý tôi là, từ một trang web (như câu hỏi đang hỏi) đây là một thứ hoàn toàn không thể truy cập - vâng, Javascript trong trình duyệt không thể làm được điều này. Điều này chỉ hoạt động nếu bạn chạy trang web của bạn bên trong WebView từ một ứng dụng mà bạn có quyền kiểm soát để nó không thực sự cung cấp giải pháp cho câu hỏi.
— Brandon Buck
6
@izuriel phải công bằng, ông đã làm thẻ câu hỏi với "khách quan-c" và "cocoa-touch", vì vậy nó không RẰNG xa vời để thừa nhận ông đang sử dụng một webview
— Kloar
3
Thẻ @Kloar thường được thêm vào như một phương tiện để thu hút sự chú ý nhiều hơn hoặc hiểu lầm chung về vấn đề họ đang cố gắng giải quyết. Người đặt câu hỏi có thể đã nghĩ rằng việc đề cập đến mục tiêu-c cũng giống như nói "iOS" (và tương tự đối với ca cao-touch). Thẻ "uiwebview" không được liệt kê mặc dù vậy tôi loại trừ đó là một tùy chọn khả thi. Câu hỏi đề cập đến việc sử dụng Safari trên máy tính để bàn và iPad (không có gì về một ứng dụng) và sử dụng mã demo Javascript để gỡ lỗi tình huống. Nói chung, tôi muốn nói rằng đây là một sự đánh cược an toàn, câu hỏi này thực sự là tìm kiếm các giải pháp không phải là bản địa.
— Brandon Buck
— cottonBallPaws
11

Kể từ iOS 10, video bây giờ có thể tự động phát, nhưng chỉ các video đó bị tắt tiếng hoặc không có bản nhạc. Yay!

Nói ngắn gọn:

  • <video autoplay> bây giờ các phần tử sẽ tôn vinh thuộc tính tự động phát, cho các phần tử đáp ứng các điều kiện sau:
    • <video> các phần tử sẽ được phép tự động phát mà không có cử chỉ người dùng nếu phương tiện nguồn của chúng không chứa các bản âm thanh.
    • <video muted> các phần tử cũng sẽ được phép tự động phát mà không cần cử chỉ của người dùng.
    • Nếu một <video> yếu tố đạt được một bản nhạc âm thanh hoặc bị tắt tiếng mà không có cử chỉ của người dùng, phát lại sẽ tạm dừng.
    • <video autoplay> các phần tử sẽ chỉ bắt đầu phát khi hiển thị trên màn hình, chẳng hạn như khi chúng được cuộn vào chế độ xem, được hiển thị thông qua CSS và được chèn vào DOM.
    • <video autoplay> các phần tử sẽ tạm dừng nếu chúng không hiển thị, chẳng hạn như bằng cách cuộn ra khỏi khung nhìn.

Thêm thông tin tại đây: https://webkit.org/blog/6784/new-video-polaho-for-ios/

— JackKalish
nguồn
4
thuộc tính tự động phát chỉ hoạt động trên PC, không hoạt động trên thiết bị di động. Tôi đã thử nhiều lần.
— huykon225
7

Trong tài liệu tham khảo Safari Safari này , bạn có thể đọc

Để ngăn tải xuống không mong muốn trên các mạng di động với chi phí của người dùng, phương tiện nhúng có thể được phát tự động trong Safari trên iOS, người dùng luôn bắt đầu phát lại. Bộ điều khiển được tự động cung cấp trên iPhone hoặc iPod touch sau khi phát lại, nhưng đối với iPad, bạn phải đặt thuộc tính điều khiển hoặc cung cấp bộ điều khiển bằng JavaScript.

— Giona
nguồn
38
"ngoài các tệp GIF có thể nhiều MB và sử dụng băng thông mà không cần mọi người nhận ra"
— Simon_Weaver
@Simon_Weaver x12 lần cho hầu hết các lần chính xác.
— Burak Tokak
2

Trước tiên, hãy tắt video để đảm bảo tự động phát trong ios, sau đó bật tiếng nếu bạn muốn.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
— Mohammad Ali Akbari
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.