javascript - mediaElement.play() 方法返回一个被拒绝的 promise

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/

相关推荐
endingCode8 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
湫ccc20 分钟前
《Python基础》之pip换国内镜像源
开发语言·python·pip
fhvyxyci21 分钟前
【C++之STL】摸清 string 的模拟实现(下)
开发语言·c++·string
qq_4597300323 分钟前
C 语言面向对象
c语言·开发语言
菜鸟学Python32 分钟前
Python 数据分析核心库大全!
开发语言·python·数据挖掘·数据分析
一个小坑货39 分钟前
Cargo Rust 的包管理器
开发语言·后端·rust
bluebonnet2743 分钟前
【Rust练习】22.HashMap
开发语言·后端·rust
古月居GYH44 分钟前
在C++上实现反射用法
java·开发语言·c++
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
在下不上天1 小时前
Flume日志采集系统的部署,实现flume负载均衡,flume故障恢复
大数据·开发语言·python