Creé un sitio web donde si el usuario hace clic, reproduce un sonido. Para evitar que el sonido se superponga, tuve que agregar el código:

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

Pero eso causa el error: The play() request was interrupted by a call to pause()
aparece cada vez que se activa el evento de sonido justo después de otro disparador. Los sonidos aún se reproducen bien, pero quiero evitar que este mensaje de error aparezca constantemente. ¿Algunas ideas?

También me he encontrado con este problema recientemente; esto podría ser una condición de carrera entre play()y pause(). Parece que hay una referencia a este problema o algo relacionado aquí .

Como señala @Patrick , pauseno devuelve una promesa (ni nada), por lo que la solución anterior no funcionará. Si bien MDN no tiene documentos pause(), en el borrador de WC3 para Media Elements , dice:

media.pause ()

Establece el atributo de pausa en verdadero, cargando el recurso multimedia si es necesario.

Por lo que también se puede verificar el pausedatributo en su devolución de llamada de tiempo de espera.

Con base en esta excelente respuesta SO , aquí hay una forma en que puede verificar si el video se está reproduciendo (o no) realmente, para que pueda activar una reproducción () de manera segura sin el error.

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

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

De lo contrario, la respuesta de @Patrick debería funcionar.

Después de horas de búsqueda y trabajo, encontré la solución perfecta .

// 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();
    }
}

Después de eso, puede alternar reproducción / pausa tan rápido como pueda, funcionará correctamente .

He encontrado este problema y tengo un caso en el que necesitaba presionar pausa () y luego reproducir () pero cuando uso pause (). Luego () me quedo indefinido.

Descubrí que si comenzaba a jugar 150 ms después de la pausa, se resolvía el problema. (Con suerte, Google lo soluciona pronto)

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

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

Acabo de publicar un artículo sobre este problema exacto en https://developers.google.com/web/updates/2017/06/play-request-was-interrupted que le dice exactamente qué está sucediendo y cómo solucionarlo .

intentalo

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

Esta solución me ayudó:

n.cloneNode(true).play();

Dependiendo de qué tan compleja desee su solución, esto puede ser útil:

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);
    }
}

Esto es un poco exagerado, pero ayuda cuando se maneja una Promesa en escenarios únicos.

Las soluciones propuestas aquí no funcionaron para mí o eran demasiado grandes, así que estaba buscando algo más y encontré la solución propuesta por @dighan en bountysource.com/issues/

Entonces aquí está el código que resolvió mi problema:

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

Todavía arroja un error en la consola, pero al menos el video se está reproduciendo :)

Tal vez una mejor solución para esto, como descubrí. Spec dice como se cita de @JohnnyCoder:

media.pause ()

Establece el atributo de pausa en verdadero, cargando el recurso multimedia si es necesario.

-> cargarlo

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

indica el estado de preparación de los medios HAVE_ENOUGH_DATA = 4

Básicamente, solo cargue el video si aún no está cargado. Se produjo un error mencionado porque el video no se cargó. Quizás sea mejor que usar un tiempo de espera.

eliminado todos los errores: (mecanografiado)

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

Con la transmisión en vivo, me enfrentaba al mismo problema. y mi solución es esta. Desde la etiqueta de video html, asegúrese de eliminar la "reproducción automática" y use el siguiente código para jugar.

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 devuelve una promesa en las versiones más recientes. De lo contrario, simplemente:

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

Tengo el mismo problema, finalmente lo resuelvo:

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

¡Este fragmento de código se arregló para mí!

Código modificado 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();
                }
            };
        };
       }
      });

Lo he arreglado con un código a continuación:

Cuando quieras jugar, usa lo siguiente:

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

Del mismo modo, cuando quieras hacer una pausa:

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

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

Aquí hay otra solución si la razón es que la descarga de su video es muy lenta y el video no se ha almacenado en búfer:

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

Parece que muchos programadores encontraron este problema. una solución debería ser bastante simple. retorno de elementos de medios Promisede acciones

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

debería hacer el truco

aquí hay una solución del blog de Google:

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)
}

Todos los nuevos videos de soporte del navegador se reproducirán automáticamente con solo estar silenciados, así que coloque algo como esto

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

La URL del video debe coincidir con el estado de SSL si su sitio se ejecuta con https, entonces la URL del video también debe estar en https y lo mismo para HTTP

La solución más limpia y sencilla :

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

Razón uno: llamar a pausa sin esperar a que se resuelva la promesa de juego

demasiadas respuestas para este escenario, por lo que solo me referiré al mejor documento para ese problema:

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

Segunda razón: llamar al juego cuando la pestaña no está enfocada

En este caso, el navegador podría interrumpir el playllamando pausecuando la pestaña no está enfocada. para ahorrar recursos para la pestaña activa.

Por lo tanto, puede esperar a que la pestaña se enfoque antes de llamar al juego:

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();

Me encontré con el mismo problema y lo resolví agregando dinámicamente el autoplayatributo en lugar de usarlo play(). De esa forma, el navegador se dio cuenta de que podía jugar sin encontrarse con la condición de carrera.

Al intentar que un video de reproducción automática se repita llamando play()cuando finaliza, la solución de tiempo de espera no funcionó para mí (por muy largo que sea el tiempo de espera).

Pero descubrí que al clonar / reemplazar el video con jQuery cuando termina, se repite correctamente.

Por ejemplo:

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

y

$(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);
});

Estoy usando Chrome 54.0.2840.59 (64 bits) / OS X 10.11.6

Creo que actualizaron el video html5 y desaprobaron algunos códecs. Me funcionó después de eliminar los códecs.

En el siguiente ejemplo:

<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>

Cuando ve un error con Uncaught (in promise)Esto solo significa que debe manejar la promesa con un .catch()En este caso, .play()devuelve una promesa. Puede decidir si desea registrar un mensaje, ejecutar algún código o no hacer nada, pero mientras lo tenga, .catch()el error desaparecerá.

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

He utilizado un truco para contrarrestar este problema. Defina una variable global var audio;

y en la verificación de funcionamiento

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

y en la función de parada

audio.pause();
audio = undefined;

por lo que la próxima llamada de audio.playaudio estará lista desde '0' currentTime

solía

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

pero no funcionó. Gracias.