HTML5 video.play返回待定承诺

Question

我正在尝试确定浏览器是否支持加载时自动播放.

我正在使用以下代码,它在Android Chrome上工作正常,但对于桌面Chrome,.catch或.then中的所有行都没有执行.承诺似乎只是无休止地回复未决承诺.

这是一个真正的Chrome错误还是我不明白Promises如何在这里工作？

const promise = document.createElement('video').play();

if (promise instanceof Promise) {
	promise.catch((error) => {
		// Check if it is the right error
		if (error.name === 'NotAllowedError') {
			autoPlayAllowed = false;
		} else {
			throw error;
		}
	}).then(() => {
		if (autoPlayAllowed) {
			// Autoplay is allowed - continue with initialization
			console.log('autoplay allowed')
		} else {
			// Autoplay is not allowed - wait for the user to trigger the play button manually
			console.log('autoplay NOT allowed')
		}
	});

} else {
	// Unknown if allowed
	console.log('autoplay unknown')
}

谢谢!

Answer 1

哪些浏览器Promisify MediaElement.play()？

WHATWG规范仅建议MediaElement.play()自2016 年1月提交的问题之后的2016年2月拉取请求进行Promisified .它与最近阻止s自动播放的决定相关(除非在特殊条件下,例如iOS Safari)).MediaElement

在W3C规范仍然(如2017年11月的)似乎并没有提及MediaElement.play()应返回的承诺.

MediaElement.play() 从版本开始返回Promise:

• Firefox:53 - [Mozilla docs] ; [Mozilla Bugzilla]

• "Chrome for Desktop","Chrome for Android","Android WebView":50 - [Mozilla docs] ; [Chrome平台状态]

• 'Opera','Opera for Android':37 - [Chrome平台状态]

• iOS Safari:iOS 10 - [适用于iOS的WebKit新视频政策]

• 桌面Safari:2017年6月,也许是v10.1.1 - [macOS的自动播放政策更改]

Edge 的这种变化的状态是未知的(随意评论).

如何测试我的浏览器是否支持它？

Chrome团队发布了一个测试页,以检查您自己的浏览器是否支持Promisified MediaElement.play().

如果支持,日志框将显示:

Attempting to play automatically...
The play() Promise fulfilled! Rock on!

否则,它只会打印这两个中的第一行.

我应该如何普遍支持MediaElement.play()？

以下是Jeff Posnick在Google Developer博客文章中推荐的最佳做法.WebKit博客文章和BitMovin建议使用类似的代码,它们都来源于原始问题归档.

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.
  });
}

基本上:存储调用的结果MediaElement.play(),并且如果结果证明是非未定义的(例如,类型object),则仅作为Promise链对其进行操作.