javascript - mediaElement.play() 方法返回一个被拒绝的 promise
标签 javascript html html5-video
我无法在移动浏览器上播放我的视频。使用 Safari 远程调试时,我遇到以下问题:
Unhandled Promise Rejection: AbortError: The operation was aborted.
我找到了这个解决方案:https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
但我不知道,如何在我的代码中使用它来解决问题。
html
<video muted id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls>
<source src="/path/to/video.mp4" type="video/mp4">
</video>
let video = document.getElementbyId('video');
let video_cta = document.getElementbyId('video_cta');
//this doesn't fix my problem
var videoPromise = video.play();
if (videoPromise != undefined) {
videoPromise.then(function(_) {
video.pause();
video.currentTime = 0;
});
}
//start video after click the button
video_cta.addEventListener('click' function() {
video.play()
})
最佳答案
首先是 autoplay
属性是必需的。
<video src='...' controls muted`**autoplay**`></video>` `<video src='...' controls muted` 自动播放 `></video>
当videoPromise
是对视频的引用并调用 .play()
方法,它将在 Promise 中工作。
const videoPromise = document.querySelector('video').play();
OP 代码中也存在依赖关系 .getElementById()
被误用:
let video = document.getElement`**b**`yId('video');` `let video = document.getElement` 湾 `yId('video');` `let video_cta = document.getElement`**b**`yId('video_cta');` `let video_cta = document.getElement` 湾 `yId('video_cta');
Google article OP 中提供的还提到 <source>
标签将无法处理 reject
适本地:
Use
<video src='...'></video>
Not
<video> <source src='...'> </video>
这应该停止错误消息:
Unhandled Promise Rejection: AbortError: The operation was aborted.
演示 1 使用 Promise
和方法.then()
. 演示 2 使用 async/await
. async function
被包裹在一个 IIFE ( I mmediately I nvoked F unction Expression )
演示 1
promise 承诺
js
let cta = document.querySelector('#cta');
const videoPromise = document.querySelector('video').play();
if (videoPromise != undefined) {
videoPromise.then(_ => {
video.play();
});
}
cta.addEventListener('click', function() {
video.play();
});
<video src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
<button id='cta'>CTA</button>
演示 2
async/await
js
let cta = document.querySelector('#cta');
const video = document.querySelector('video');
(function() {
playMedia();
})();
async function playMedia() {
try {
await video.play();
} catch (err) {}
}
cta.addEventListener('click', function() {
video.play();
});
<video src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
<button id='cta'>CTA</button>
关于javascript - mediaElement.play() 方法返回一个被拒绝的 promise ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55953639/