HTML5 video.play返回待定承诺

Question

我试图确定浏览器是否支持加载时自动播放。

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

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

WHATWG规范仅建议自2016年2月{2016年2月} pull request继2016年1月提交MediaElement.play()后，MediaElement宣传MediaElement.play()。这与最近的阻止{来自自动播放的{1}}（特殊情况除外，例如issue）。

these, for iOS Safari仍然（截至2017年11月）似乎没有提及MediaElement.play()应该返回承诺。

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

• Firefox：53 - W3C spec; [Mozilla docs]

• 'Chrome for Desktop'，'Chrome for Android'，'Android WebView'：50 - [Mozilla Bugzilla]; [Mozilla docs]

• 'Opera'，'Opera for Android'：37 - [Chrome platform status]

• iOS Safari：iOS 10 - [Chrome platform status]

• Desktop Safari：2017年6月，也许是v10.1.1 - [WebKit's new video policies for iOS]

此更改的状态为{<3}}，适用于Edge （随意发表评论）。

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

Chrome小组已发布[Autoplay policy changes for macOS]以检查您自己的浏览器是否支持Promisified Attempting to play automatically... The play() Promise fulfilled! Rock on! 。

如果支持，日志框将显示：

MediaElement.play()

否则，它只会打印这两个中的第一行。

我应该如何普遍支持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. }); } ？

以下是{+ 3}}在Google Developer博客文章中推荐的最佳做法。建议在unknown和test page中使用类似的代码，这些代码都来自原始的Jeff Posnick文件。

MediaElement.play()

基本上：存储调用object的结果，并且如果结果证明是非未定义的（例如，类型为_id），则仅作为Promise链进行操作。

Answer 2

我不确定这是否是一个错误，但您需要在视频中设置src才能完成或拒绝播放Promise。

将其设置为空字符串""会抛出一个＆＃34;找不到支持的来源＆＃34;错误，但由于在原始代码中抛出了无法识别的错误，then从未触发过。 所以你可以依靠这个＆＃34;找不到错误＆＃34;告诉自动播放有效，或者不要把错误扔到当时。

＆＃13;

＆＃13;

let autoPlayAllowed = true;
let v = document.createElement('video');
v.src = ""; // we need this

const promise = v.play();

if (promise instanceof Promise) {
  promise.catch(function(error) {
    console.log(error.message);
    // Check if it is the right error
    if (error.name === 'NotAllowedError') {
      autoPlayAllowed = false;
    } else {
      // Don't throw the error so that we get to the then
      // or throw it but set the autoPlayAllowed to true in here
    }
  }).then(function() {
    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
  // Note: you could fallback to simple event listeners in this case
  console.log('autoplay unknown')
}

＆＃13;

＆＃13;

＆＃13;

请注意，只有WHATWG规范包含MediaElement.play()中的承诺，W3C没有。所以你可能想要回溯到简单的事件监听器，至少目前是这样。