您是否刚刚在 Chrome 开发者工具 JavaScript 控制台中发现了这个意外的媒体错误?
或
那你来对地方了。别担心,我会说明导致此错误的原因以及解决方法。
导致此问题的原因
以下一些 JavaScript 代码可重现您看到的“未捕获(有保证)”错误:
<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 开发者工具中显示一条错误消息。
解决方法
了解了根本原因后,让我们来看看如何解决此问题。
首先,不要假定媒体元素(视频或音频)会播放。查看 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>
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 绝不会拒绝。仅当没有有效来源时,才会发生这种情况。