J'ai créé un site Web où si l'utilisateur clique, il joue un son. Pour éviter que le son ne se chevauche, j'ai dû ajouter le code:

n.pause();
n.currentTime = 0;
n.play();

Mais cela provoque l'erreur: se The play() request was interrupted by a call to pause()
produire chaque fois que l'événement sonore est déclenché juste après un autre déclencheur. Les sons jouent toujours bien, mais je veux éviter que ce message d'erreur n'apparaisse constamment. Des idées?

J'ai également rencontré ce problème récemment - cela pourrait être une condition de concurrence entre play()et pause(). Il semble qu'il y ait une référence à ce problème, ou à quelque chose lié ici .

Comme le souligne @Patrick , pausene renvoie pas de promesse (ou quoi que ce soit), donc la solution ci-dessus ne fonctionnera pas. Bien que MDN n'ait pas de documentation sur pause(), dans le brouillon WC3 pour Media Elements , il est dit:

media.pause ()

Définit l'attribut paused sur true, chargeant la ressource multimédia si nécessaire.

Ainsi, on peut également vérifier l' pausedattribut dans leur rappel de délai d'expiration.

Sur la base de cette excellente réponse SO , voici un moyen de vérifier si la vidéo est (ou non) réellement lue, afin de pouvoir déclencher une lecture () en toute sécurité sans l'erreur.

var isPlaying = video.currentTime > 0 && !video.paused && !video.ended 
    && video.readyState > 2;

if (!isPlaying) {
  video.play();
}

Sinon, la réponse de @Patrick devrait fonctionner.

Après des heures de recherche et de travail, j'ai trouvé la solution parfaite .

// Initializing values
var isPlaying = true;

// On video playing toggle values
video.onplaying = function() {
    isPlaying = true;
};

// On video pause toggle values
video.onpause = function() {
    isPlaying = false;
};

// Play video function
function playVid() {      
    if (video.paused && !isPlaying) {
        video.play();
    }
} 

// Pause video function
function pauseVid() {     
    if (!video.paused && isPlaying) {
        video.pause();
    }
}

Après cela, vous pouvez basculer lecture / pause aussi vite que possible, cela fonctionnera correctement .

J'ai rencontré ce problème, et j'ai un cas où je devais appuyer sur pause () puis play () mais lorsque j'utilise pause (). Then () je deviens indéfini.

J'ai constaté que si je commençais à jouer 150 ms après une pause, le problème était résolu. (Espérons que Google corrige bientôt)

playerMP3.volume = 0;
playerMP3.pause();

//Avoid the Promise Error
setTimeout(function () {      
   playerMP3.play();
}, 150);

Je viens de publier un article sur ce problème précis sur https://developers.google.com/web/updates/2017/06/play-request-was-interrupted qui vous indique exactement ce qui se passe et comment y remédier .

l'essayer

n.pause();
n.currentTime = 0;
var nopromise = {
   catch : new Function()
};
(n.play() || nopromise).catch(function(){}); ;

Cette solution m'a aidé:

n.cloneNode(true).play();

En fonction de la complexité de votre solution, cela peut être utile:

var currentPromise=false;    //Keeps track of active Promise

function playAudio(n){
    if(!currentPromise){    //normal behavior
        n.pause();
        n.currentTime = 0;
        currentPromise = n.play();    //Calls play. Will store a Promise object in newer versions of chrome;
                                      //stores undefined in other browsers
        if(currentPromise){    //Promise exists
            currentPromise.then(function(){ //handle Promise completion
                promiseComplete(n);
            });
        }
    }else{    //Wait for promise to complete
        //Store additional information to be called
        currentPromise.calledAgain = true;
    }
}

function promiseComplete(n){
    var callAgain = currentPromise.calledAgain;    //get stored information
    currentPromise = false;    //reset currentPromise variable
    if(callAgain){
        playAudio(n);
    }
}

C'est un peu exagéré, mais cela aide lors de la gestion d'une promesse dans des scénarios uniques.

Les solutions proposées ici ne fonctionnaient pas pour moi ou étaient trop importantes, alors je cherchais autre chose et j'ai trouvé la solution proposée par @dighan sur bountysource.com/issues/

Voici donc le code qui a résolu mon problème:

var media = document.getElementById("YourVideo");
const playPromise = media.play();
if (playPromise !== null){
    playPromise.catch(() => { media.play(); })
}

Il jette toujours une erreur dans la console, mais au moins la vidéo est en cours de lecture :)

Peut-être une meilleure solution pour cela comme je l'ai compris. Spec dit comme cité de @JohnnyCoder:

media.pause ()

Définit l'attribut paused sur true, chargeant la ressource multimédia si nécessaire.

-> le chargement

if (videoEl.readyState !== 4) {
    videoEl.load();
}
videoEl.play();

indique l'état de disponibilité du média HAVE_ENOUGH_DATA = 4

En gros, ne chargez la vidéo que si elle n'est pas déjà chargée. Une erreur mentionnée s'est produite pour moi, car la vidéo n'a pas été chargée. Peut-être mieux que d'utiliser un timeout.

supprimé toutes les erreurs: (dactylographié)

audio.addEventListener('canplay', () => {
    audio.play();
    audio.pause();
    audio.removeEventListener('canplay');
}); 

Avec la diffusion en direct, j'étais confronté au même problème. et ma solution est la suivante. À partir du TAG vidéo html, assurez-vous de supprimer "autoplay" et utilisez ce code ci-dessous pour jouer.

if (Hls.isSupported()) {
            var video = document.getElementById('pgVideo');
            var hls = new Hls();
            hls.detachMedia();
            hls.loadSource('http://wpc.1445X.deltacdn.net/801885C/lft/apple/TSONY.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
            hls.on(Hls.Events.ERROR, function (event, data) {
                if (data.fatal) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            // when try to recover network error
                            console.log("fatal network error encountered, try to recover");
                            hls.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            console.log("fatal media error encountered, try to recover");
                            hls.recoverMediaError();
                            break;
                        default:
                            // when cannot recover
                            hls.destroy();
                            break;
                    }
                }
            });
        }

Chrome renvoie une promesse dans les dernières versions. Sinon, simplement:

        n.pause();
        n.currentTime = 0;
        setTimeout(function() {n.play()}, 0);

J'ai le même problème, enfin je résous par:

video.src = 'xxxxx';
video.load();
setTimeout(function() {
  video.play();
}, 0);

Ce morceau de code corrigé pour moi!

Code modifié de @JohnnyCoder

HTML:

 <video id="captureVideoId" muted width="1280" height="768"></video>
                <video controls id="recordedVideoId" muted width="1280" 
 style="display:none;" height="768"></video>

JS:

  var recordedVideo = document.querySelector('video#recordedVideoId');
  var superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
  // workaround for non-seekable video taken from
  // https://bugs.chromium.org/p/chromium/issues/detail?id=642012#c23
  recordedVideo.addEventListener('loadedmetadata', function () {
    if (recordedVideo.duration === Infinity) {
        recordedVideo.currentTime = 1e101;
        recordedVideo.ontimeupdate = function () {
            recordedVideo.currentTime = 0;
            recordedVideo.ontimeupdate = function () {
                delete recordedVideo.ontimeupdate;
                var isPlaying = recordedVideo.currentTime > 0 && 
     !recordedVideo.paused && !recordedVideo.ended && 
      recordedVideo.readyState > 2;
                if (isPlaying) {
                    recordedVideo.play();
                }
            };
        };
       }
      });

Je l'ai corrigé avec un peu de code ci-dessous:

Lorsque vous voulez jouer, utilisez ce qui suit:

var video_play = $('#video-play');
video_play.on('canplay', function() {
 video_play.trigger('play');
});

De même, lorsque vous souhaitez mettre en pause:

var video_play = $('#video-play');
video_play.trigger('pause');

video_play.on('canplay', function() {
  video_play.trigger('pause');
});

Voici une autre solution si la raison en est que le téléchargement de votre vidéo est très lent et que la vidéo n'a pas été mise en mémoire tampon:

if (videoElement.state.paused) { videoElement.play(); } else if (!isNaN(videoElement.state.duration)) { videoElement.pause(); }

Il semble que de nombreux programmeurs aient rencontré ce problème. une solution doit être assez simple. l'élément multimédia revient Promisedes actions

n.pause().then(function(){
    n.currentTime = 0;
    n.play();
})

devrait faire l'affaire

voici une solution du blog googler:

var video = document.getElementById('#video')
var promise = video.play()
//chrome version 53+
if(promise){
    promise.then(_=>{
        video.pause()
    })
}else{
    video.addEventListener('canplaythrough', _=>{
        video.pause()
    }, false)
}

Toutes les nouvelles vidéos de support de navigateur doivent être lues automatiquement avec le son uniquement, veuillez donc mettre quelque chose comme ça

<video autoplay muted="muted" loop id="myVideo">
  <source src="https://w.r.glob.net/Coastline-3581.mp4" type="video/mp4">
</video>

L'URL de la vidéo doit correspondre à l'état SSL si votre site fonctionne avec https, l'URL de la vidéo doit également être en https et de même pour HTTP

La solution la plus propre et la plus simple :

var p = video.play();
if (p !== undefined) p.catch(function(){});

Raison n ° 1 - Appeler pause sans attendre que la promesse de lecture se résout

trop de réponses pour ce scénario, je vais donc me référer au meilleur document pour ce problème:

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

Deuxième raison - appeler la lecture lorsque l'onglet n'est pas focalisé

Dans ce cas, le navigateur peut interrompre le playen appelant pauselorsque l'onglet n'est pas actif. afin d'économiser des ressources pour l'onglet actif.

Vous pouvez donc simplement attendre que l'onglet se concentre avant d'appeler play:

async function waitForTabFocus() {
  return new Promise((resolve, reject) => {
    const onFocus = () => { resolve(); window.removeEventListener('focus', onFocus) };
    window.addEventListener('focus', onFocus)
  })
}

if (!document.hasFocus()) await this.waitForTabFocus();
videoEl.play();

J'ai rencontré le même problème et je l'ai résolu en ajoutant dynamiquement l' autoplayattribut plutôt qu'en utilisant play(). De cette façon, le navigateur a compris pour jouer sans se heurter à la condition de concurrence.

En essayant d'obtenir une vidéo en lecture automatique en boucle en l'appelant play()à la fin, la solution de contournement du délai d'attente n'a pas fonctionné pour moi (quelle que soit la durée du délai).

Mais j'ai découvert qu'en clonant / remplaçant la vidéo par jQuery à la fin, elle bouclerait correctement.

Par exemple:

<div class="container">
  <video autoplay>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

et

$(document).ready(function(){
  function bindReplay($video) {
    $video.on('ended', function(e){
      $video.remove();
      $video = $video.clone();
      bindReplay($video);
      $('.container').append($video);
    });
  }
  var $video = $('.container video');
  bindReplay($video);
});

J'utilise Chrome 54.0.2840.59 (64 bits) / OS X 10.11.6

Je pense qu'ils ont mis à jour la vidéo html5 et ont désapprouvé certains codecs. Cela a fonctionné pour moi après avoir supprimé les codecs.

Dans l'exemple ci-dessous:

<video>
    <source src="sample-clip.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
    <source src="sample-clip.webm" type="video/webm; codecs='vp8, vorbis'"> 
</video>

    must be changed to

<video>
    <source src="sample-clip.mp4" type="video/mp4">
    <source src="sample-clip.webm" type="video/webm">
</video>

Lorsque vous voyez une erreur avec Uncaught (in promise)Ceci signifie simplement que vous devez gérer la promesse avec un .catch()Dans ce cas, .play()renvoie une promesse. Vous pouvez décider si vous souhaitez enregistrer un message, exécuter du code ou ne rien faire, mais tant que vous avez, .catch()l'erreur disparaîtra.

var n = new Audio();
n.pause();
n.currentTime = 0;
n.play().catch(function(e) {
  // console.log('There was an error', e);
});

J'ai utilisé une astuce pour contrer ce problème. Définissez une variable globale var audio;

et dans le contrôle de fonctionnement

if(audio === undefined)
{
   audio = new Audio(url);
}

et dans la fonction d'arrêt

audio.pause();
audio = undefined;

donc le prochain appel de audio.play, l'audio sera prêt à partir de '0' currentTime

j'ai utilisé

audio.pause();
audio.currentTime =0.0; 

mais cela n'a pas fonctionné. Merci.