ฉันสร้างเว็บไซต์ที่หากผู้ใช้คลิกมันจะส่งเสียง เพื่อป้องกันไม่ให้เสียงทับซ้อนกันฉันต้องเพิ่มรหัส:

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

ตั้งค่าแอตทริบิวต์ paused เป็น true โหลดทรัพยากรสื่อหากจำเป็น

ดังนั้นเราอาจตรวจสอบpausedแอตทริบิวต์ในการโทรกลับแบบหมดเวลา

จากคำตอบ SO ที่ยอดเยี่ยมนี้คุณสามารถตรวจสอบได้ว่าวิดีโอนั้น (หรือไม่) กำลังเล่นจริงหรือไม่เพื่อให้คุณสามารถเริ่มการเล่น () ได้อย่างปลอดภัยโดยไม่มีข้อผิดพลาด

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

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

ไม่เช่นนั้นคำตอบของ@Patrickควรใช้งานได้

หลังจากชั่วโมงของการทำงาน seaching และฉันพบที่สมบูรณ์แบบวิธีการแก้ปัญหา

// 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 () แล้วเล่น () แต่เมื่อใช้ 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-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);
    }
}

นี่เป็นเรื่องที่มากเกินไป แต่ช่วยเมื่อจัดการกับคำสัญญาในสถานการณ์ที่ไม่เหมือนใคร

โซลูชันที่เสนอที่นี่อาจไม่ได้ผลสำหรับฉันหรือที่ไหนใหญ่ดังนั้นฉันจึงมองหาอย่างอื่นและพบวิธีแก้ปัญหาที่ @dighan เสนอ bountysource.com/issues/

นี่คือรหัสที่แก้ไขปัญหาของฉัน:

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 อย่าลืมลบ "เล่นอัตโนมัติ" และใช้โค้ดด้านล่างนี้เพื่อเล่น

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

ฉันได้ใช้กลอุบายเพื่อตอบโต้ปัญหานี้ กำหนดเสียงตัวแปรสากล

และในการตรวจสอบฟังก์ชัน

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

และในฟังก์ชันหยุด

audio.pause();
audio = undefined;

ดังนั้นการโทรครั้งต่อไปของ audio.playเสียงจะพร้อมจาก '0' currentTime

ฉันใช้

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

แต่มันไม่ได้ผล ขอบคุณ.