사용자가 클릭하면 소리가 나는 웹 사이트를 만들었습니다. 사운드가 겹치는 것을 방지하기 위해 코드를 추가해야했습니다.

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

그러나 그로 인해 오류가 발생합니다. The play() request was interrupted by a call to pause()
사운드 이벤트가 다른 트리거 직후에 트리거 될 때마다 나타납니다. 소리는 여전히 잘 재생되지만이 오류 메시지가 계속해서 표시되는 것을 방지하고 싶습니다. 어떤 아이디어?

최근에도이 문제가 발생했습니다.이 문제는 play()과 사이의 경쟁 조건 일 수 있습니다 pause(). 이 문제에 대한 언급이 있거나 여기에 관련된 내용이있는 것 같습니다 .

으로 @Patrick는 지적, pause위의 반응 용액 작동하지 않습니다, 약속 (또는 아무것도를) 반환하지 않습니다. MDN에는에 문서가 없지만 Media Elementspause() 에 대한 WC3 초안 에서 다음 과 같이 말합니다.

media.pause ()

paused 속성을 true로 설정하고 필요한 경우 미디어 리소스를로드합니다.

따라서 paused타임 아웃 콜백에서 속성을 확인할 수도 있습니다 .

이 훌륭한 SO 답변을 기반으로 비디오가 실제로 재생되는지 여부를 확인할 수있는 방법이 있으므로 오류없이 안전하게 play ()를 트리거 할 수 있습니다.

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

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

그렇지 않으면 @Patrick 의 대답 이 작동합니다.

몇 시간의 검색과 작업 끝에 완벽한 해결책을 찾았습니다 .

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

그 후에 가능한 한 빨리 재생 / 일시 중지 를 전환 할 수 있으며 제대로 작동 합니다.

나는이 문제를 겪었고 pause ()를 누른 다음 play ()를 눌러야하는 경우가 있지만 pause (). then ()을 사용할 때 정의되지 않습니다.

일시 중지 후 150ms 재생을 시작하면 문제가 해결된다는 것을 알았습니다. (곧 Google이 수정되기를 바랍니다.)

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

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

이 정확한 문제에 대한 기사를 https://developers.google.com/web/updates/2017/06/play-request-was-interrupted 에 게시하여 정확히 무슨 일이 일어나고 있는지, 어떻게 해결 해야하는지 알려 주었습니다 .

시도 해봐

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

이 솔루션은 저에게 도움이되었습니다.

n.cloneNode(true).play();

원하는 솔루션의 복잡성에 따라 다음이 유용 할 수 있습니다.

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

이것은 약간 과잉이지만 독특한 시나리오에서 Promise를 처리 할 때 도움이됩니다.

여기에서 제안한 솔루션은 저에게 적합하지 않았거나 큰 곳에서 작동하지 않았으므로 다른 것을 찾고 있었고 bountysource.com/issues/에서 @dighan이 제안한 솔루션을 찾았습니다.

내 문제를 해결 한 코드는 다음과 같습니다.

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

여전히 콘솔에 오류가 발생하지만 적어도 비디오가 재생 중입니다. :)

내가 알아 낸 것처럼 이것에 대한 더 나은 해결책 일 것입니다. Spec은 @JohnnyCoder에서 인용 한대로 말합니다.

media.pause ()

paused 속성을 true로 설정하고 필요한 경우 미디어 리소스를로드합니다.

->로드

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

미디어 HAVE_ENOUGH_DATA = 4의 준비 상태를 나타냅니다.

기본적으로 아직로드되지 않은 경우에만 비디오를로드합니다. 동영상이로드되지 않았기 때문에 언급 된 오류가 발생했습니다. 시간 제한을 사용하는 것보다 나을 수도 있습니다.

모든 오류 제거 : (typescript)

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

라이브 스트리밍에서 나는 같은 문제에 직면했습니다. 내 수정은 이것입니다. html video TAG에서 "autoplay" 를 제거 하고 아래 코드를 사용하여 재생하십시오.

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은 최신 버전에서 Promise를 반환합니다. 그렇지 않으면 간단히 :

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

나는 같은 문제가 있으며 마침내 다음과 같이 해결합니다.

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

이 코드는 나를 위해 수정되었습니다!

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

다음 코드로 수정했습니다.

플레이하려면 다음을 사용하십시오.

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

마찬가지로 일시 중지를 원할 때 :

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

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

비디오 다운로드가 매우 느리고 비디오가 버퍼링되지 않았기 때문에 다른 해결책이 있습니다.

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

많은 프로그래머가이 문제에 직면 한 것 같습니다. 해결책은 아주 간단해야합니다. 미디어 요소 Promise는 작업에서 반환 되므로

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

트릭을해야한다

다음은 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)
}

모든 새로운 브라우저는 비디오가 음소거 된 상태에서만 자동 재생되도록 지원하므로 이와 같은 것을 넣으십시오.

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

사이트가 https로 실행되는 경우 동영상의 URL이 SSL 상태와 일치해야하며 동영상 URL도 https에 있어야하며 HTTP에 대해서도 동일해야합니다.

깨끗 하고 간단한 해결책 :

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

이유 1-플레이 약속이 해결 될 때까지 기다리지 않고 일시 중지 호출

이 시나리오에 대한 답변이 너무 많으므로 해당 문제에 가장 적합한 문서를 참조하겠습니다.

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

이유 2-탭에 초점이 맞지 않을 때 재생 호출

이 경우 브라우저는 다음 play을 호출 하여 중단 할 수 있습니다.pause 는 탭에 포커스가 없을 때 있습니다. 활성 탭의 리소스를 절약하기 위해.

따라서 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();

동일한 문제가 발생하여을 autoplay사용하는 대신 동적으로 속성을 추가하여 문제를 해결했습니다 play(). 그런 식으로 브라우저는 경쟁 조건에 부딪히지 않고 플레이하는 것을 알아 냈습니다.

play()끝날 때 호출하여 자동 재생 비디오를 반복하려고 시도 했지만 시간 제한 해결 방법이 작동하지 않았습니다 (시간 제한이 길어도).

그러나 비디오가 끝났을 때 jQuery로 비디오를 복제 / 교체하면 제대로 반복된다는 것을 발견했습니다.

예를 들면 :

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

과

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

Chrome 54.0.2840.59 (64 비트) / OS X 10.11.6을 사용하고 있습니다.

나는 그들이 html5 비디오를 업데이트하고 일부 코덱을 사용하지 않는다고 생각합니다. 코덱을 제거한 후 저에게 효과적이었습니다.

아래 예에서 :

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

Uncaught (in promise)이 오류가 표시되면 .catch()이 경우 약속을 처리해야 함을 의미합니다 .이 경우 .play()약속을 반환합니다. 메시지를 기록 할 것인지, 코드를 실행할 것인지, 아니면 아무것도하지 않을 것인지 결정할 수 있지만 .catch(), 오류가 발생하면 사라집니다.

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

이 문제에 대응하기 위해 트릭을 사용했습니다. 전역 변수 var audio를 정의합니다.

그리고 기능 검사에서

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

그리고 정지 기능에서

audio.pause();
audio = undefined;

그래서 다음 전화 audio.play '0'currentTime부터 오디오가 준비됩니다.

나는 사용했다

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

하지만 작동하지 않았습니다. 감사.