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. Tôi sau đây sẽ cho bạn biết lý do và mức độ ảnh hưởng của sự thay đổi này đến việc phát video có âm thanh. Cảnh báo tiết lộ nội dung: người dùng sẽ thích tính năng này!

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

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

Hành vi mới

Như bạn có thể đã nhận thấy, trình duyệt web đang chuyển sang 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 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 trên các mạng đắt đỏ và/hoặc bị hạn chế. Những thay đổi này nhằm mang lại khả năng kiểm soát quá trình phát tốt hơn cho người dùng, cũng như 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:

Chúng tôi luôn cho phép chế độ tự động phát ở chế độ tắt tiếng.
Tính năng tự động phát có âm thanh được phép 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 qua, nghĩa là trước đây 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.
Các khung hình hàng đầu 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 phương tiện truyền thông (MEI) đo lường xu hướng xem nội dung nghe nhìn của một cá nhân trên một trang web. Phương pháp của Chrome là tỷ lệ lượt truy cập đối với các sự kiện phát nội dung nghe nhìn quan trọng trên mỗi nguồn gốc:

Thời lượng xem 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 số này cao nhất trên các 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 của trang nội bộ about://media-engagement. — Ảnh chụp màn hình của trang nội bộ `about://media-engagement` trên Chrome.

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

Là nhà phát triển, bạn có thể muốn thay đổi hành vi của chính sách tự động phát của Chrome trên máy tính để kiểm thử trang web của mình nhằm xem xét 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 thử 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 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ó tự động phát theo mặc định cho 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 nhận được quyền tự động phát, một nguồn gốc có thể uỷ quyền quyền đó cho các iframe trên nhiều nguồn gốc thông qua chính sách về quyền 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 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ần cử chỉ của người dùng sẽ từ chối lời hứa có DOMException NotAllowedError. Ngoài ra, 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ũ nên sử dụng sai thuộc tính gesture=media vì thuộc tính này không được hỗ trợ.

Ví dụ

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

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 này để xem nội dung văn bản và thỉnh thoảng xem video. Điểm tương tác với nội dung đa phương tiện của người dùng thấp, vì vậy, hệ thống sẽ không cho phép tự động phát nếu người dùng di chuyển trực tiếp từ trang tìm kiếm hoặc trang mạng xã hội.

Ví dụ 3: LocalNewsSite.com có cả nội dung văn bản và video. Hầu hết mọi người đều truy cập vào trang web thông qua trang chủ, sau đó nhấp vào các bài viết tin tức. Hệ thống sẽ cho 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 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 iframe có đoạn giới thiệu phim để xem 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 chính sách doanh nghiệp của Chrome cho các trường hợp sử dụng như kiosk hoặc hệ thống không được giám sát. Hãy xem trang trợ giúp về Danh sách chính sách để tìm hiểu cách đặt các chính sách liên quan đến tính năng tự động phát cho doanh nghiệp:

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 chứa các mẫu URL mà trong đó 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à đ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. Điều quan trọng đến mức tôi sẽ viết lại bài đăng này 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 (Lời hứa) mà hàm phát trả về 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ả, bao gồm cả 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 kích hoạt của người dùng vẫn được xác định một cách 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/html#3849.

Âm thanh trên web

API Âm thanh web đã sử dụng tính năng tự động phát kể từ Chrome 71. Bạn cần biết một số thông tin sau đây. Trước tiên, bạn nên đợi người dùng tương tác trước khi bắt đầu phát âm thanh để người dùng biết về một điều gì đó đang diễn 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 nút "bật tiếng" tuỳ 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ì tài liệu đó sẽ được tạo ở trạng thái "bị 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() tại 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 đí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 trang.

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

Để biết trình duyệt có cần người dùng tương tác để 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, bạn phải 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 xem Yêu cầu lấy dữ liệu (Pull Request) nhỏ giúp khắc phục việc phát Âm thanh trên web cho các quy tắc chính sách về tính năng tự động phát này trên https://airhorner.com.