HTML5 video.play返回待处理的承诺 [英] HTML5 video.play returning Pending promises

问题描述

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

I'm trying to determine whether the browser supports autoplay on load.

我正在使用以下代码，它在Android chrome上正常运行，但对于台式机Chrome，.catch或.then中的所有行均不执行.这个承诺似乎只是无限地返回Pending promises.

I'm using the following code, and it works fine on Android chrome, but for Desktop Chrome none of the lines in .catch or .then get executed. The promise seems to just return Pending promises ad infinitum.

这是一个实际的Chrome错误，还是我不了解Promises在这里的工作方式?

Is this an actual Chrome bug or am I not understanding how Promises work here?

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')
}

谢谢！

推荐答案

哪些浏览器承诺MediaElement.play()?

自2016年2月拉取请求以来，WHATWG规范仅建议将MediaElement.play()予以承诺接下来是2016年1月提交的问题.它与最近的决定有关防止MediaElement自动播放(除非在特殊情况下，例如这些，适用于iOS Safari ).

Which browsers Promisify MediaElement.play()?

The WHATWG spec has only recommended that MediaElement.play() be Promisified since a Feb 2016 pull request following on from an issue submitted on Jan 2016. It is connected to the recent decision to prevent MediaElements from autoplaying (except under special conditions, such as these, for iOS Safari).

W3C规范仍然(截至2017年11月)似乎没有提到MediaElement.play()应该返回Promise.

The W3C spec still (as of Nov 2017) does not appear to mention that MediaElement.play() should return a Promise.

MediaElement.play()返回一个Promise版本:

MediaElement.play() returns a Promise as of version:

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

"Chrome for Desktop"，"Chrome for Android"，"Android WebView":50 – [Chrome平台状态]

'Chrome for Desktop', 'Chrome for Android', 'Android WebView': 50 – [Mozilla docs]; [Chrome platform status]

'Opera'，'Opera for Android':37 – [Chrome平台状态]

'Opera', 'Opera for Android': 37 – [Chrome platform status]

iOS Safari:iOS 10 – [WebKit的新视频iOS的政策]

iOS Safari: iOS 10 – [WebKit's new video policies for iOS]

台式机Safari:2017年6月，所以可能是v10.1.1 – [针对macOS的自动播放策略更改]

Desktop Safari: Jun 2017, so maybe v10.1.1 – [Autoplay policy changes for macOS]

对于Edge ，此更改的状态为未知(随时发表评论) .

The status of this change is unknown for Edge (feel free to comment).

Chrome小组发布了测试页以进行检查您自己的浏览器是否支持Promisified MediaElement.play().

The Chrome team have released a test page to check whether your own browser supports Promisified MediaElement.play().

如果支持，日志记录框将显示:

If supported, the logging box will say:

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

否则，它将仅打印这两行的第一行.

Otherwise, it will only print the first line of those two.

以下是 Jeff Posnick 推荐的最佳做法. >在Google Developer博客文章中.在 WebKit博客帖子中，建议使用类似的代码， BitMovin 从原始的问题归档.

Here are the best practices recommended by Jeff Posnick in a Google Developer blog post. Similar code is recommended in a WebKit blog post and by BitMovin, and they all derive from the original issue filing.

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链对其进行操作.

Basically: store the result of invoking MediaElement.play(), and only act on it as a Promise chain if the result turns out to be non-undefined (eg. of type object).

这篇关于HTML5 video.play返回待处理的承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！