Я зробив веб-сайт, де, якщо користувач клацне, він відтворює звук. Щоб звук не перекривався, мені довелося додати код:

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

Але це спричиняє помилку: The play() request was interrupted by a call to pause()
з'являтися щоразу, коли звукова подія спрацьовує відразу після іншого тригера. Звуки все ще чудово звучать, але я хочу запобігти появі цього повідомлення про помилку. Якісь ідеї?

З цим питанням я стикався і нещодавно - це може бути умова перегонів між play()та pause(). Схоже, тут є посилання на це питання або щось, що стосується тут .

Як зазначає @Patrick , pauseне повертає обіцянки (чи нічого), тому вищевказане рішення не працюватиме. У той час як MDN не має документів pause(), у чернеті WC3 для Media Elements йдеться:

media.pause ()

Встановлює атрибут призупиненого значення true, якщо потрібно, завантажуючи медіаресурс.

Тому можна також перевірити pausedатрибут у зворотному режимі зворотного дзвінка.

Виходячи з цієї чудової відповіді ТА , ось як ви можете перевірити, чи відео справді відтворюється (чи ні), тож ви можете сміливо запускати відтворення () без помилки.

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

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

В іншому випадку, @Patrick «S відповідь повинен працювати.

Після годин викладання та роботи я знайшов ідеальне рішення .

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

Після цього ви можете перемикати програвання / паузу якнайшвидше, вона буде працювати належним чином .

Я потрапив у цю проблему і маю випадок, коли мені потрібно було натиснути на паузу (), потім грати (), але при використанні паузи (). Тоді () я не визначаю.

Я виявив, що якщо я почав грати через 150 мс після паузи, це вирішило проблему. (Сподіваємось, 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-interrupt, яка точно розповідає про те, що відбувається, і як це виправити .

Спробуй це

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

Це трохи непосильне, але допомагає при обробці Обіцянки в унікальних сценаріях.

Рішення, запропоновані тут, або не спрацювали для мене, або там, де велике, тож я шукав щось інше і знайшов рішення, запропоноване @dighan на bountysource.com/isissue/

Ось ось код, який вирішив мою проблему:

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

Він все одно кидає помилку в консоль, але принаймні відео відтворюється :)

Можливо, краще рішення для цього, як я зрозумів. Spec каже, як цитується з @JohnnyCoder:

media.pause ()

Встановлює атрибут призупиненого значення true, якщо потрібно, завантажуючи медіаресурс.

-> завантаження

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

вказує стан готовності носія HAVE_ENOUGH_DATA = 4

В основному завантажуйте відео лише в тому випадку, якщо воно ще не завантажено. Згадана помилка для мене сталася, оскільки відео не завантажувалось. Можливо, краще, ніж використовувати тайм-аут.

видалено всі помилки: (машинопис)

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

З прямою трансляцією я стикався з тим же питанням. і моє виправлення це. З HTML-відео TAG не забудьте видалити "автоматичне відтворення " і використовуйте цей код нижче для відтворення.

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 повертає Обіцянку в новіших версіях. В іншому випадку просто:

        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>

URL-адреса відео повинна відповідати статусу SSL, якщо ваш сайт працює з https, тоді URL-адреса відео також має бути https та однакова для HTTP

Найчистіше і найпростіше рішення:

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

Перша причина - пауза виклику, не чекаючи, коли гра обіцяє вирішити

занадто багато відповідей на цей сценарій, тому я просто посилаюся на найкращого документа для цього питання:

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

Причина друга - відтворення дзвінків, коли вкладка не зосереджена

У цьому випадку браузер може перервати playвиклик, pauseколи вкладка не фокусується. щоб зберегти ресурси для активної вкладки.

Таким чином, ви можете просто зачекати, коли вкладка буде зосереджена, перш ніж викликати гру:

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; 

але це не спрацювало. Дякую.