DOMException - play() 请求中断
DOMException - play() 请求中断
您刚才在 Chrome 开发者工具 JavaScript 控制台中发现了这个意外的媒体错误吗？
注意 ：未捕获（承诺中）DOMException：play() 请求因调用 pause() 而中断。或
注意：未捕获（在承诺中）DOMException：play() 请求被新的加载请求中断。那你来对地方了。别担心，我会说明导致此问题的原因以及解决方法。
导致此错误的原因
下面的一些 JavaScript 代码可重现您所看到的“Uncaught (in promise)”（未捕获）错误：
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script>
video.play(); // <-- This is asynchronous!
video.pause();
</script>
上面的代码会在 Chrome 开发者工具中导致以下错误消息：
_Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
由于视频因 preload="none" 而未加载，因此视频播放不一定在执行 video.play() 后立即开始播放。
此外，自 Chrome 50 起，对 <video> 或 <audio> 元素的 play() 调用会返回一个 Promise，这是一个异步返回单个结果的函数。如果播放成功，系统会执行 promise 并同时触发 playing 事件。如果播放失败，promise 将被拒绝，并提供一条说明失败的错误消息。
现在会发生以下情况：
video.play()开始异步加载视频内容。video.pause()会中断视频加载，因为它尚未准备就绪。video.play()以异步方式大声拒绝。
由于我们在代码中未处理视频播放 Promise，因此 Chrome 开发者工具中显示一条错误消息。
注意 ：调用video.pause() 并不是中断视频的唯一方式。您可以使用 video.load() 和 video.src = '' 完全重置视频播放状态，包括缓冲区。
解决方法
了解了根本原因之后，我们来看看如何解决此问题。
首先，不要假设系统会播放媒体元素（视频或音频）。查看 play 函数返回的 Promise，以查看其是否被拒绝。值得注意的是，Promise 只有在播放实际开始播放后才会执行，这意味着 then() 中的代码只有在媒体开始播放后才会执行。
示例：自动播放
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script>
// Show loading animation.
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
示例：播放和暂停
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script>
// Show loading animation.
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
video.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
这个简单示例非常好用，但如果您之后能够使用 video.play() 播放视频，该怎么办呢？
我告诉你一个秘密。您不必使用 video.play()，也可以使用 video.load()，方法如下：
示例：提取并播放
<video id="video"></video>
<button id="button"></button>
<script>
button.addEventListener('click', onButtonClick);
function onButtonClick() {
// This will allow us to play video later...
video.load();
fetchVideoAndPlay();
}
function fetchVideoAndPlay() {
fetch('https://example.com/file.mp4')
.then(response => response.blob())
.then(blob => {
video.srcObject = blob;
return video.play();
})
.then(_ => {
// Video playback started ;)
})
.catch(e => {
// Video playback failed ;(
})
}
</script>
onButtonClick 函数与 async 关键字异步。您将失去稍后播放视频所需的“用户手势令牌”。
Play promise 支持
在写入时，HTMLMediaElement.play() 会在 Chrome、Edge、Firefox、Opera 和 Safari 中返回一个 promise。
危险区域
<video> 中的 <source> 使 play() promise 永不拒绝
对于 <video src="not-existing-video.mp4"\>，play() promise 会按预期拒绝，因为视频不存在。对于 <video><source src="not-existing-video.mp4" type='video/mp4'></video>，play() promise 绝不会拒绝。仅当没有有效来源时，才会出现这种情况。
