Tự động phát âm thanh và video trên web là một tính năng mạnh mẽ, đồng thời phải tuân theo các quy định hạn chế khác nhau trên các nền tảng.
Ngày nay, hầu hết trình duyệt dành cho máy tính để bàn sẽ luôn cho phép các trang web bắt đầu phát <video> hoặc <audio> thông qua JavaScript mà không cần người dùng tương tác.
Tuy nhiên, hầu hết trình duyệt dành cho thiết bị di động đều yêu cầu một cử chỉ rõ ràng của người dùng trước khi quá trình phát do JavaScript khởi tạo có thể diễn ra. Điều này giúp đảm bảo rằng người dùng thiết bị di động (nhiều người trong số họ trả tiền cho băng thông hoặc có thể đang ở môi trường công cộng) không vô tình bắt đầu tải xuống và phát nội dung nghe nhìn mà không tương tác rõ ràng với trang.
Trước đây, rất khó để xác định xem người dùng có cần tương tác để bắt đầu phát hay không và để phát hiện các lỗi xảy ra khi cố gắng phát (tự động) nhưng không thành công. Có nhiều giải pháp, nhưng không phải là giải pháp lý tưởng. Đã đến lúc cần có một nội dung cải tiến cho phương thức play() cơ bản để giải quyết sự không chắc chắn này. Nội dung cải tiến này hiện đã được đưa vào nền tảng web, với lần triển khai đầu tiên trong Chrome 50.
Lệnh gọi play() trên phần tử <video> hoặc <audio> hiện trả về một Promise. Nếu phát thành công, Lời hứa sẽ được thực hiện và nếu phát không thành công, Lời hứa sẽ bị từ chối cùng với thông báo lỗi giải thích lý do không thành công. Điều này cho phép bạn viết mã trực quan như sau:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
Ngoài việc phát hiện xem phương thức play() có thành công hay không, giao diện mới dựa trên Lời hứa cho phép bạn xác định thời điểm phương thức play() thành công. Có những ngữ cảnh mà trình duyệt web có thể quyết định trì hoãn việc bắt đầu phát. Ví dụ: Chrome dành cho máy tính sẽ không bắt đầu phát <video> cho đến khi thẻ hiển thị. Lời hứa sẽ không thực hiện cho đến khi quá trình phát thực sự bắt đầu, nghĩa là mã bên trong then() sẽ không thực thi cho đến khi nội dung nghe nhìn đang phát. Các phương thức trước đây để xác định xem play() có thành công hay không, chẳng hạn như chờ một khoảng thời gian nhất định cho sự kiện playing và giả định là không thành công nếu sự kiện đó không kích hoạt, dễ bị âm tính giả trong các trường hợp phát chậm.
Chúng tôi đã xuất bản một ví dụ trực tiếp về chức năng mới này. Xem trong một trình duyệt như Chrome 50 hỗ trợ giao diện dựa trên Lời hứa này. Xin lưu ý: trang này sẽ tự động phát nhạc khi bạn truy cập. (Tất nhiên, trừ phi không có!)
Vùng nguy hiểm
<source> trong <video> khiến play() hứa hẹn không bao giờ từ chối
Đối với <video src="not-existing-video.mp4"\>, lời hứa play() sẽ từ chối như dự kiến vì video không tồn tại. Đối với <video><source src="not-existing-video.mp4" type='video/mp4'></video>, lời hứa play() không bao giờ từ chối. Điều này chỉ xảy ra nếu không có nguồn nào hợp lệ.