Trang này được dịch bởi Cloud Translation API.

Chính sách tự động phát trong Chrome

Cải thiện trải nghiệm người dùng, giảm thiểu các ưu đãi để cài đặt trình chặn quảng cáo và giảm mức sử dụng dữ liệu

François Beaufort

Chính sách tự động phát của Chrome đã thay đổi vào tháng 4 năm 2018 và tôi muốn cho bạn biết cho bạn lý do và cách điều này ảnh hưởng đến việc phát video kèm theo âm thanh. Tiết lộ nội dung thông báo: người dùng sẽ thích ứng dụng này!

Liam Neeson: Tôi sẽ tìm bạn và tôi sẽ tạm dừng bạn. — meme trên Internet được gắn thẻ "tự động phát" được tìm thấy trên Imgflip và Imgur.

Bean Bean: Một điều không chỉ đơn giản là tự động phát video. — meme trên Internet được gắn thẻ "tự động phát" được tìm thấy trên Imgflip và Imgur.

Hành vi mới

Như bạn có thể đã nhận thấy, các trình duyệt web đang dần chuyển sang chế độ tự động phát nghiêm ngặt hơn các chính sách nhằm cải thiện trải nghiệm người dùng, giảm thiểu các biện pháp khuyến khích cài đặt trình chặn quảng cáo và giảm mức sử dụng dữ liệu cho các ứng dụng đắt tiền và/hoặc bị hạn chế mạng. Những thay đổi này nhằm mang lại khả năng kiểm soát phát lại tốt hơn cho và mang lại lợi ích cho nhà xuất bản trong các trường hợp sử dụng hợp pháp.

Các chính sách tự động phát của Chrome rất đơn giản:

Tính năng tự động phát ở chế độ tắt tiếng luôn được cho phép.
Bạn có thể tự động phát có âm thanh nếu:
- Người dùng đã tương tác với miền (nhấp, nhấn, v.v.).
- Trên máy tính, ngưỡng Chỉ số tương tác với nội dung nghe nhìn của người dùng đã bị vượt quá, nghĩa là trước đó người dùng đã phát video có âm thanh.
- Người dùng đã thêm trang web vào màn hình chính của họ trên thiết bị di động hoặc đã cài đặt PWA trên máy tính.
Khung trên cùng có thể uỷ quyền quyền tự động phát cho iframe để cho phép tự động phát có âm thanh.

Chỉ mục tương tác truyền thông

Chỉ số tương tác với nội dung nghe nhìn (MEI) đo lường xu hướng của một cá nhân trong việc tiêu thụ nội dung nghe nhìn trên một trang web. Phương pháp của Chrome là tỷ lệ số lượt truy cập vào các sự kiện phát nội dung đa phương tiện quan trọng trên mỗi nguồn gốc:

Thời lượng sử dụng nội dung nghe nhìn (âm thanh/video) phải lớn hơn 7 giây.
Âm thanh phải xuất hiện và bật tiếng.
Thẻ có video đang hoạt động.
Kích thước của video (tính bằng pixel) phải lớn hơn 200x140.

Từ đó, Chrome sẽ tính điểm tương tác với nội dung nghe nhìn. Điểm này cao nhất trên những trang web thường xuyên phát nội dung nghe nhìn. Khi đủ cao, nội dung nghe nhìn chỉ được phép tự động phát trên máy tính.

MEI của người dùng có trên trang nội bộ about://media-engagement.

Ảnh chụp màn hình trang nội bộ about://media-engagement. — Ảnh chụp màn hình của trang nội bộ `about://media-engagement` trong Chrome.

Nút chuyển dành cho nhà phát triển

Là nhà phát triển, có thể bạn muốn thay đổi cách hoạt động của chính sách tự động phát trên thiết bị của Chrome để thử nghiệm trang web của bạn đối với các mức độ tương tác khác nhau của người dùng.

Bạn có thể tắt hoàn toàn chính sách tự động phát bằng cách sử dụng một dòng lệnh cờ: chrome.exe --autoplay-policy=no-user-gesture-required. Điều này cho phép bạn kiểm thử trang web của mình như thể người dùng đang tương tác mạnh mẽ với trang web và chế độ tự động phát luôn được cho phép.
Bạn cũng có thể quyết định để đảm bảo không bao giờ cho phép tự động phát bằng cách tắt MEI và liệu các trang web có MEI tổng thể cao nhất có tự động phát theo mặc định cho người dùng mới. Thực hiện việc này với cờ: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Uỷ quyền iframe

Chính sách về quyền cho phép nhà phát triển bật và tắt một cách có chọn lọc các tính năng và API của trình duyệt. Sau khi một nguồn gốc nhận được tính năng tự động phát quyền đó, công cụ này có thể uỷ quyền quyền đó cho các iframe trên nhiều nguồn gốc bằng chính sách về quyền tự động phát. Xin lưu ý rằng chế độ tự động phát được bật theo mặc định iframe cùng nguồn gốc.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Khi chính sách quyền cho tính năng tự động phát bị tắt, các lệnh gọi đến play() mà không có cử chỉ của người dùng sẽ từ chối lời hứa có DOMException NotAllowedError. và thuộc tính tự động phát cũng sẽ bị bỏ qua.

Cảnh báo: Các bài viết cũ hơn nên sử dụng thuộc tính gesture=media một cách không chính xác không được hỗ trợ.

Ví dụ

Ví dụ 1: Mỗi khi người dùng truy cập vào VideoSubscriptionSite.com trên máy tính xách tay, họ sẽ xem một chương trình truyền hình hoặc một bộ phim. Vì điểm số tương tác với phương tiện truyền thông cao hơn cao, chế độ tự động phát được phép.

Ví dụ 2: GlobalNewsSite.com có cả nội dung văn bản và video. Hầu hết người dùng truy cập vào trang web này để xem nội dung văn bản và chỉ thỉnh thoảng xem video. Thông tin của người dùng điểm số tương tác với nội dung đa phương tiện thấp, vì vậy quảng cáo tự động phát sẽ không được phép nếu người dùng chuyển trực tiếp từ một trang mạng xã hội hoặc một trang tìm kiếm.

Ví dụ 3: LocalNewsSite.com có cả nội dung văn bản và video. Hầu hết mọi người truy cập vào trang web thông qua trang chủ rồi nhấp vào các bài viết tin tức. Được phép tự động phát trên các trang tin bài do người dùng tương tác với miền. Tuy nhiên, bạn cần cẩn thận để đảm bảo người dùng không bị bất ngờ khi nội dung tự động phát.

Ví dụ 4: MyMovieReviewBlog.com nhúng iframe có đoạn giới thiệu phim để cùng với một bài đánh giá. Người dùng đã tương tác với miền để truy cập vào blog, vì vậy, tính năng tự động phát được cho phép. Tuy nhiên, blog cần uỷ quyền rõ ràng đặc quyền đó cho iframe để nội dung tự động phát.

Chính sách của Chrome Enterprise

Bạn có thể thay đổi hành vi tự động phát bằng các chính sách dành cho doanh nghiệp của Chrome đối với các trường hợp sử dụng như kiosk hoặc hệ thống không có người giám sát. Hãy xem Chính sách Trang trợ giúp để tìm hiểu cách đặt tính năng tự động phát liên quan đến doanh nghiệp chính sách của Google:

Chính sách AutoplayAllowed kiểm soát việc có cho phép tính năng tự động phát hay không.
Chính sách AutoplayAllowlist cho phép bạn chỉ định danh sách cho phép các mẫu URL sẽ luôn bật tính năng tự động phát.

Các phương pháp hay nhất dành cho nhà phát triển web

Phần tử Âm thanh/Video

Hãy nhớ một điều: Đừng bao giờ giả định rằng video sẽ phát và đừng hiển thị nút tạm dừng khi video không thực sự phát. Điều này rất quan trọng nên tôi sẽ viết lại một lần nữa ở bên dưới cho những người chỉ lướt qua bài đăng đó.

Bạn phải luôn xem Promise do hàm phát trả về để xem liệu đơn bị từ chối:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Một cách thú vị để thu hút người dùng là sử dụng tính năng tự động phát tắt tiếng và để họ chọn để bật tiếng. (Xem ví dụ bên dưới.) Một số trang web đã thực hiện việc này một cách hiệu quả, bao gồm Facebook, Instagram, Twitter và YouTube.

<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

Các sự kiện kích hoạt hoạt động của người dùng vẫn phải được xác định nhất quán trên các trình duyệt. Hiện tại, bạn nên dùng "click". Xem Vấn đề GitHub whatwg/html#3849.

Âm thanh trên web

API Âm thanh web đã được sử dụng tính năng tự động phát kể từ Chrome 71. Có một vài điều cần biết về tính năng này. Trước tiên, bạn nên chờ người dùng tương tác trước khi bắt đầu phát âm thanh để người dùng biết rằng có điều gì đó đang xảy ra. Ví dụ: hãy nghĩ đến nút "phát" hoặc nút chuyển "bật/tắt". Bạn cũng có thể thêm tính năng "bật tiếng" tuỳ thuộc vào luồng ứng dụng.

Lưu ý: Nếu AudioContext được tạo trước khi tài liệu nhận được cử chỉ của người dùng, thì AudioContext sẽ được tạo ở trạng thái "tạm ngưng" và bạn cần gọi resume() sau cử chỉ của người dùng.

Nếu tạo AudioContext khi tải trang, bạn sẽ phải gọi resume() sau một khoảng thời gian người dùng tương tác với trang (ví dụ: sau khi người dùng nhấp vào một nút). Hoặc AudioContext sẽ được tiếp tục sau khi người dùng thực hiện cử chỉ nếu start() được gọi trên bất kỳ nút đính kèm nào.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

Bạn cũng có thể tạo AudioContext chỉ khi người dùng tương tác với .

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

Để phát hiện xem trình duyệt có yêu cầu tương tác của người dùng để phát âm thanh hay không, hãy kiểm tra AudioContext.state sau khi bạn tạo. Nếu được phép phát, ứng dụng phải chuyển ngay sang running. Nếu không, giá trị sẽ là suspended. Nếu bạn nghe đối với sự kiện statechange, bạn có thể phát hiện các thay đổi một cách không đồng bộ.

Để xem ví dụ, hãy xem Yêu cầu lấy dữ liệu nhỏ đã khắc phục Tính năng phát Âm thanh trên web theo các quy tắc chính sách về tính năng tự động phát trên https://airhorner.com.