Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.(5)

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

ITtutoria

ITtutoria Logo ITtutoria Logo

ITtutoria Navigation

  • Python
  • Java
  • Reactjs
  • JavaScript
  • R
  • PySpark
  • MYSQL
  • Pandas
  • QA
  • C++
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA
Home/ Questions/Recommendation for the: ''Uncaught (in promise) DOMException: The play() request was interrupted by a new load request'' error.
Next
Answered
domenicalindgren
  • 24
domenicalindgren
Asked: June 9, 20222022-06-09T02:29:00+00:00 2022-06-09T02:29:00+00:00In: javascript

Recommendation for the: ”Uncaught (in promise) DOMException: The play() request was interrupted by a new load request” error.

  • 24

. Advertisement .

..3..

. Advertisement .

..4..

Hey geys! I’m back here. I’m having the error ”uncaught (in promise) DOMException: The play() request was interrupted by a new load request” while I running this code:

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
video.play(); // <-- Here is asynchronous!
video.pause();
</script>

Then it gives me an error warning:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Does anyone know how to fix it? Please write your suggestions below. Thanks!

uncaught (in promise) domexception
  • 2 2 Answers
  • 681 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook
  • Report

2 Answers

  • Voted
  • Oldest
  • Recent
  • Random
  1. Best Answer
    lyytutoria Expert
    2022-06-09T03:29:20+00:00Added an answer on June 9, 2022 at 3:29 am

    The cause:

    What I can see from your code is the video is not loaded because of preload="none". After video.play() is executed, you don’t need to start video playback immediately. Furthermore, since Chrome 50,  promise is returned by a play() call on a <video> or <audio> element , which is a synchronous function that gives a single result. The Promise is executed and the playing event is activated at the same moment if playback succeeds. The playback is not successful, so the Promise is refused and the error is displayed.

    Below’s what is happening in your code:

    1. video.play() begins to load video content asynchronously.
    2. video.pause() discontinues video loading due to it has not ready yet.
    3. video.play() refuses asynchronously.

    An error warning comes in Chrome DevTools because you don’t handle the video play Promise in your code.

    These are the reasons of your error.

    Solution:

    A media element (video or audio) will never play. Let’s check whether the Promise returned by the play function is denied or not. Notes that the Promise will not finish until playback has actually started, it means that the code within the then() will not run until the media starts to play. You can refer to my examples below:

    Autoplay example:

    <video id="video" preload="none" src="https://example.com/file.mp4"></video>
    
    <script>
    // Display loading animation.
    var playPromise = video.play();
    
    if (playPromise !== undefined) {
    playPromise.then(_ => {
    // Automatic playback has already started!
    // Show playing UI.
    })
    .catch(error => {
    // Automatic play was stopped
    // Show paused UI.
    });
    }
    </script>

    Play & Pause example

    <video id="video" preload="none" src="https://example.com/file.mp4"></video>
    
    <script>
    // Display loading animation.
    var playPromise = video.play();
    
    if (playPromise !== undefined) {
    playPromise.then(_ => {
    // Playback has started automatically!
    // Show playing UI.
    // Now you can pause video safely...
    video.pause();
    })
    .catch(error => {
    // Auto-play was prevented
    // Show paused UI.
    });
    }
    </script>

    Fetch & Play example:

    <video id="video"></video>
    <button id="button"></button>
    
    <script>
    button.addEventListener('click', onButtonClick);
    
    function onButtonClick() {
    // This will permit you 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>
    • 13
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report
    • [email protected]
      2022-07-03T21:40:47+00:00Replied to answer on July 3, 2022 at 9:40 pm

      thanks it worked!

      • 0
      • Reply
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
        • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question
  • How to Split String by space in C++
  • How To Convert A Pandas DataFrame Column To A List
  • How to Replace Multiple Characters in A String in Python?
  • How To Remove Special Characters From String Python

Explore

  • Home
  • Tutorial

Footer

ITtutoria

ITtutoria

This website is user friendly and will facilitate transferring knowledge. It would be useful for a self-initiated learning process.

@ ITTutoria Co Ltd.

Tutorial

  • Home
  • Python
  • Science
  • Java
  • JavaScript
  • Reactjs
  • Nodejs
  • Tools
  • QA

Legal Stuff

  • About Us
  • Terms of Use
  • Privacy Policy
  • Contact Us

DMCA.com Protection Status

Help

  • Knowledge Base
  • Support

Follow

© 2022 Ittutoria. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.