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 ư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

GitHub

Chính sách tự động phát của Chrome đã thay đổi vào tháng 4 năm 2018 và tôi sẵn lòng giải thích lý do cũng như ảnh hưởng của chính sách này đối với việc phát video có âm thanh. Cảnh báo hé lộ: người dùng sẽ thích giao diện này!

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

SEn Bean: Một không chỉ đơn thuần là tự động phát video. — Các meme trên Internet có gắn thẻ "tự động phát" xuất hiện 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 áp dụng các chính sách tự động phát nghiêm ngặt hơn để 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 trên các mạng đắt tiền và/hoặc hạn chế. Những thay đổi này nhằm giúp người dùng có nhiều quyền kiểm soát hơn đối với hoạt động phát và mang lại lợi ích cho nhà xuất bản qua các trường hợp sử dụng hợp pháp.

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

Luôn cho phép tự động phát bị tắt tiếng.
Cho phép 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ười dùng đã vượt quá ngưỡng Chỉ số tương tác với nội dung nghe nhìn, 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 trên thiết bị di động hoặc cài đặt PWA trên máy tính.
Các khung hình hàng đầu có thể uỷ quyền quyền tự động phát cho iframe của chúng để cho phép tự động phát có âm thanh.

Chỉ số tương tác của truyền thông

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

Thời lượng xem nội dung nghe nhìn (âm thanh/video) phải nhiều hơn 7 giây.
Phải có âm thanh và bật tiếng.
Thẻ có video đang hoạt động.
Kích thước của video (tính bằng px) phải lớn hơn 200x140.

Từ đó, Chrome sẽ tính điểm số tương tác với nội dung nghe nhìn, điểm cao nhất trên các trang web thường xuyên phát nội dung nghe nhìn. Khi kích thước đủ 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 hiện có tại trang nội bộ của about://media-engagement.

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

Chuyển đổi dành cho nhà phát triển

Là nhà phát triển, bạn nên thay đổi hành vi của chính sách tự động phát của Chrome trên máy để thử nghiệm trang web của mình theo 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 cờ dòng lệnh: chrome.exe --autoplay-policy=no-user-gesture-required. Điều này cho phép bạn kiểm tra trang web của mình như thể người dùng có tương tác tích cực với trang web của bạn không và tính năng tự động phát sẽ 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ó được tự động phát theo mặc định đối với người dùng mới hay không. 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 các tính năng và API của trình duyệt một cách có chọn lọc. Sau khi một nguồn gốc được cấp quyền tự động phát, nguồn gốc đó có thể uỷ quyền quyền đó cho các iframe nhiều nguồn gốc bằng chính sách quyền đối với tính năng tự động phát. Lưu ý rằng tính năng tự động phát được cho phép theo mặc định trên các 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 bạn tắt chính sách về quyền cho tính năng tự động phá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 với 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ũ đề xuất không chính xác việc sử dụng thuộc tính gesture=media không được hỗ trợ.

Ví dụ

Ví dụ 1: Mỗi khi người dùng truy cập vào VideoSubscriptionSite.com bằng 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 nội dung nghe nhìn của họ cao nên tính năng tự động phát sẽ được cho 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 trang web để xem nội dung văn bản và chỉ thỉnh thoảng xem video. Điểm tương tác với nội dung nghe nhìn của người dùng thấp nên không cho phép tự động phát nếu người dùng điều hướng trực tiếp từ một trang trên mạng xã hội hoặc 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ủ, sau đó nhấp vào tin bài. Tính năng tự động phát trên các trang tin bài sẽ được cho phép do tương tác của người dùng với miền. Tuy nhiên, bạn nên thận trọng để đả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 một iframe có một đoạn giới thiệu phim đi kèm 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 phải uỷ quyền rõ ràng đặc quyền đó cho iframe để nội dung tự động phát.

Chính sách 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 cho các trường hợp sử dụng như kiosk hoặc các hệ thống không được giám sát. Hãy xem trang trợ giúp Danh sách chính sách để tìm hiểu cách đặt các chính sách doanh nghiệp liên quan đến tính năng tự động phát:

Chính sách AutoplayAllowed kiểm soát việc có cho phép 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 mà tính năng tự động phát sẽ luôn bậ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

Sau đây là một điều cần nhớ: Đừng bao giờ cho 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. Vì vậy, tôi sẽ viết lại bài đăng một lần nữa dưới đây cho những ai chỉ lướt qua bài đăng đó.

Bạn nên luôn xem xét Promise mà hàm Play trả về để xem có bị từ chối hay không:

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à cho phép họ chọn bật tiếng. (Xem ví dụ bên dưới.) Một số trang web đã làm việc này một cách hiệu quả, như Facebook, Instagram, Twitter và YouTube.

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

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

Các sự kiện kích hoạt việc kích hoạt người dùng vẫn phải được xác định một cách nhất quán trên các trình duyệt. Bạn nên sử dụng "click" trong thời gian này. Xem Vấn đề trong GitHub whatwg/html#3849.

Âm thanh trên web

Web Audio API đã được tính năng tự động phát kể từ phiên bản Chrome 71. Có một số điều bạn cần biết về công cụ này. Đầu tiên, bạn nên đợi hoạt động tương tác của người dùng trước khi bắt đầu phát âm thanh để người dùng nhận biết được điều gì đó đang diễn ra. Ví dụ: hãy nghĩ đến nút "phát" hoặc công tắc "bật/tắt". Bạn cũng có thể thêm nút "bật tiếng" tuỳ thuộc vào luồng của ứ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 "suspended" (tạm ngưng) và bạn sẽ 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() vào một thời điểm nào đó sau khi người dùng tương tác với trang (ví dụ: sau khi người dùng nhấp vào nút). Ngoài ra, AudioContext sẽ được tiếp tục sau cử chỉ của người dùng nếu start() được gọi trên bất kỳ nút nào đính kèm.

// 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 trang.

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 người dùng tương tác để phát âm thanh hay không, hãy đánh dấu AudioContext.state sau khi bạn tạo. Nếu được phép phát, thiết bị sẽ được chuyển ngay sang running. Nếu không, giá trị sẽ là suspended. Nếu theo dõ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 tham khảo Yêu cầu kéo (Pull Request) nhỏ nhằm khắc phục vấn đề phát Âm thanh trên web theo các quy tắc chính sách tự động phát này của https://airhorner.com.