10

I can't play my video on mobile Browsers. When using Safari Remote Debugging, i get the following issue:

Unhandled Promise Rejection: AbortError: The operation was aborted.

I find this solution: https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

But i don't know, how can i use it in my code to fix the problem.

<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()
})
Niklas
  • 1,638
  • 4
  • 19
  • 48
  • I was getting the same issue when running on the local debug environment. Have you tried publishing the code and testing on a PROD or Testing environment? As for me the issue goes away when publishing the code and testing directly on a domain. Looks like anything different to http://localhost will work. That worked for me. Let us know if work for some of you as well. – cvillalobosm Oct 01 '21 at 17:26

2 Answers2

5

  • First thing is that autoplay attribute is needed.

    <video src='...' controls mutedautoplay></video>

  • When videoPromise is the reference to the video and call to the .play() method, it will work within a Promise.

    const videoPromise = document.querySelector('video').play();

  • Also there is a dependency in OP code .getElementById() was misspent:

    let video = document.getElementbyId('video');
    let video_cta = document.getElementbyId('video_cta');

  • The Google article provided in OP also mentions that the <source> tag will not handle a reject properly:

    Use

    <video src='...'></video>

    Not

    <video> <source src='...'> </video>

  • This should stop the error message:

    Unhandled Promise Rejection: AbortError: The operation was aborted.

Demo 1 uses a Promise and method .then(). Demo 2 uses async/await. The async function is wrapped in an IIFE (Immediately Invoked Function Expression)

Demo 1

Promise

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>

Demo 2

async/await

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • 1
    thanks for answer, but i get now the following error on safari mobile: `Unhandled Promise Rejection: NotSupportedError: The operation is not supported.` – Niklas May 03 '19 at 08:25
  • thanks for updating, but the Demo 2 doesn't work too. I get the error: `Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.` – Niklas May 04 '19 at 13:45
1

I had same problem. The video didn't play in Safari. But apparently, when I put different mp4 file in same place, the video played successfully. I used ffmpeg tool with different settings to generate the video. See related answer FFMPEG video conversion to MP4 works everywhere except in iOS Safari/Chrome.

In short, make sure you tried some other video file.

pttsky
  • 737
  • 5
  • 15