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/

相关推荐
binishuaio6 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE8 分钟前
【Java SE】StringBuffer
java·开发语言
就是有点傻12 分钟前
WPF中的依赖属性
开发语言·wpf
洋24020 分钟前
C语言常用标准库函数
c语言·开发语言
进击的六角龙22 分钟前
Python中处理Excel的基本概念(如工作簿、工作表等)
开发语言·python·excel
wrx繁星点点23 分钟前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
熊的猫31 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
NoneCoder40 分钟前
Java企业级开发系列(1)
java·开发语言·spring·团队开发·开发
苏三有春41 分钟前
PyQt5实战——UTF-8编码器功能的实现(六)
开发语言·qt
Aniay_ivy1 小时前
深入探索 Java 8 Stream 流:高效操作与应用场景
java·开发语言·python