কীভাবে "প্লে () অনুরোধটি বিরতি দেওয়ার জন্য একটি কল দিয়ে বাধা দেওয়া হয়েছিল ()" ত্রুটি?


107

আমি একটি ওয়েবসাইট তৈরি করেছি যেখানে যদি ব্যবহারকারী ক্লিক করে, এটি একটি শব্দ বাজায়। শব্দটি ওভারল্যাপিং থেকে আটকাতে, আমাকে কোডটি যুক্ত করতে হয়েছিল:

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

তবে এর ফলে ত্রুটি ঘটে: The play() request was interrupted by a call to pause()
প্রতিবার আসার জন্য শব্দটির ইভেন্টটি অন্য ট্রিগারের ঠিক পরে ট্রিগার করা হয়। শব্দগুলি এখনও দুর্দান্ত বাজায় তবে আমি এই ত্রুটি বার্তাকে ক্রমাগত পপিং প্রতিরোধ করতে চাই। কোন ধারনা?


এটি একটি ত্রুটি, বা আরও একটি বিজ্ঞপ্তি?
ডান্ডাভিস

এটি একটি ত্রুটি, এখানে সম্পূর্ণ ত্রুটি: অপ্রকাশিত (প্রতিশ্রুতিতে) ডমেক্সেক্সেপশন: নাটক () অনুরোধটি বিরতি দেওয়ার জন্য একটি কল দিয়ে বাধা দেওয়া হয়েছিল ()।
ওভেন এম

7
এটি একটি নতুন বাগ, এটি নিয়ে চিন্তা করবেন না: bugs.chromium.org/p/chromium/issues/detail?id=593273
ডান্ডাভিস

3
এর সহজ সমাধানটি হ'ল কেবল প্লে কল করা বা একে অপরের ঠিক পরে বিরতি দেওয়া। পরিবর্তে বা খেলতে হবে তা নির্ধারণ করতে পরিবর্তে মিডিয়া ইভেন্টগুলি ব্যবহার করুন। উদাহরণ: onCanPlay()। এই সমস্ত উত্তর নোংরা হ্যাকস।
মার্টিন ডসন

1
আমার বিপরীত সমস্যা ছিল আমি n.play() তখন চেষ্টা করেছি n.pause()। তার জন্য, এই ওয়েব ফান্ডামেন্টাল নিবন্ধটি সমাধানটি বর্ণনা করে। tl; dr:n.play().then(() => { n.pause()})
totymedli

উত্তর:


84

আমি সম্প্রতি এই সমস্যাটিরও মুখোমুখি হয়েছি - এটি play()এবং এর মধ্যে একটি দৌড়ের অবস্থা হতে পারে pause()। দেখে মনে হচ্ছে এখানে এই ইস্যুটির কোনও রেফারেন্স আছে বা এখানে সম্পর্কিত কিছু আছে

@ পেট্রিক যেমন উল্লেখ করেছেন, pauseকোনও প্রতিশ্রুতি (বা কিছু) ফেরায় না, সুতরাং উপরের সমাধানটি কার্যকর হবে না। MDN তে দস্তাবেজ নেই যদিও pause()এ, মিডিয়া উপাদানের জন্য WC3 খসড়া , এটা বলেন:

media.pause ()

বিরামযুক্ত বৈশিষ্ট্যটি সত্যকে সেট করে, প্রয়োজনে মিডিয়া সংস্থান লোড করুন।

সুতরাং যে কেউ pausedতাদের সময়সীমা কলব্যাকের মধ্যে বিশিষ্টতাও পরীক্ষা করতে পারে ।

এই দুর্দান্ত এসও উত্তরের ভিত্তিতে , ভিডিওটি সত্যই প্লে হচ্ছে (বা না) এটি পরীক্ষা করার জন্য এখানে একটি উপায় রয়েছে, যাতে আপনি ত্রুটি ছাড়াই নিরাপদে একটি নাটক () ট্রিগার করতে পারেন।

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

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

অন্যথায়, @Patrick এর উত্তর কাজ করা উচিত।


1
যেমন @ রিজেন্সি-সফ্টওয়্যার বলেছে, বিরতি পদ্ধতি কোনও প্রতিশ্রুতি দেয় না (। বিরতি () তে কোনও ডক্স নেই), তবে কেবল "অপরিজ্ঞাত" আছে। সুতরাং এই সমাধানটি কেবল প্লেতে প্রয়োগ করা যেতে পারে () তারপরে () ক্ষেত্রে বিরতি দিন।
স্প্ল্যাক্ট

তথ্যের জন্য ধন্যবাদ - আমি @ রিজেন্সি সফ্টওয়্যারটি কী পোস্ট করেছে তা প্রতিফলিত করতে আমার উত্তর আপডেট করেছি, যা সঠিক ছিল এবং তার একটি কার্যনির্বাহী সমাধানও রয়েছে :-)।
জনি কোডার

আপনি অপেক্ষা সময় হিসাবে 150 মিটার পৌঁছেছেন? ক্রোম ইস্যু বলে মনে হচ্ছে: বাগগুলি।
ক্রোমিয়াম

সময়সীমার কারণে @ রিজেন্সি সফ্টওয়্যার এর উত্তর দেখুন । আমি তাদের উত্তরে প্রসারিত করেছি, এটি একটি ভাল সমাধান ছিল। এছাড়াও, আমার উত্তরটি আপনাকে উত্তরটির শুরুতে প্রদত্ত লিঙ্কটি উল্লেখ করে।
জননি কোডার

ভিডিও স্ট্রিমিংয়ের জন্য এটি কাজ করবে না। যদি আমার ওয়েবআরটিসি ভিডিও চালু করা থাকে তবে এটি কনসোলটিকে ব্যতিক্রম করে।
স্টেপান ইয়াকোভেনকো

70

কয়েক ঘন্টা সিচিং এবং কাজ করার পরে, আমি নিখুঁত সমাধান পেয়েছি ।

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

এর পরে, আপনি যত তাড়াতাড়ি প্লে / বিরাম টগল করতে পারেন, এটি সঠিকভাবে কাজ করবে


1
এইভাবেই আমি সমস্যাটি অর্জন করেছি। আমি মনে করি এটি একটি সময়সীমার উপর নির্ভর করার চেয়ে অনেক ভাল সমাধান
ম্যালকোর

@ মালকোর আপনাকে ধন্যবাদ, এটি সবার জন্য সমস্যার সমাধান করবে
নেবোজসা সাপিক

কেউ কেউ উত্তরটি আরও দ্রুত বাড়ানোর জন্য দয়া করে এই উত্তরটি দিতে পারেন?
এডিংকালার

1
কেন এটি সঠিক উত্তর হিসাবে চিহ্নিত করা হয়নি? অবশ্যই এটি একটি সমাধান, সময়সীমা সহ কোনও হ্যাক নয়।
জেরন-ডায়োভিস

15
দুটি পরিবর্তনশীল কেন প্রয়োজনীয়? আমি বলছি না এটি একটি খারাপ সমাধান। খালি খাঁজতে চেষ্টা করছি।
মঙ্গলজনক

20

আমি এই ইস্যুটিতে আঘাত করেছি, এবং আমার একটি কেস আছে যেখানে আমার বিরতি () এর পরে খেলতে হবে () খেলতে হবে) তবে বিরতি () ব্যবহার করার সময় () তখন আমি অপরিজ্ঞাত হয়ে পড়েছি।

আমি দেখতে পেলাম যে আমি বিরতি দেওয়ার পরে যদি 150 মিমি খেলা শুরু করি তবে এটি সমস্যার সমাধান করে। (আশা করি গুগল শিগগিরই ঠিক হয়ে গেছে)

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

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

যদি আপনি 150 মিমি মানে? আমি কয়েকটি ভিন্ন মূল্যবোধ চেষ্টা করেছি এবং এটি আমার উদ্দেশ্যে স্থির করেছি। আমি ক্রোম এবং অ্যান্ড্রয়েডকে লক্ষ্য করেছিলাম এবং এটি আমার অ্যাপ্লিকেশনগুলির প্রয়োজনীয়তার সাথে খাপ খায়। এটি কম হতে সক্ষম হতে পারে।
প্যাট্রিক

3
সুতরাং এটি প্রায় এলোমেলো মান যেমন আপনার ইমপ্লের চেয়ে অন্য কোনও কিছুর সাথে সম্পর্কিত নয়। স্পষ্টতার জন্য ধন্যবাদ!
y_nk

আমি কৌতূহল করছি আপনি একাধিক শব্দ বাজানোর জন্য একই উপাদানটি ব্যবহার করছেন? এটি বোঝার বিষয়টি ব্যাখ্যা করবে; একই উপাদানটির মাধ্যমে অন্য শব্দ বাজানোর চেষ্টা করার সময় একটি শব্দ এখনও লোড হয়। একটি বিলম্ব "এটি" থামিয়ে দিতে পারে যদিও এটি একটি ক্লডজি ফিক্স এবং আরও দীর্ঘ / সংক্ষিপ্ত বিলম্বকে আরও ভাল / সেরা অভিজ্ঞতার জন্য ব্যবহার করা যেতে পারে। মাছিগুলিতে উপাদানগুলি সাফ করা এবং পুনরুদ্ধার করা আমার এসওপি হয়েছে যা বেশ কয়েকটি অডিও / ভিডিও এবং মেমরি ফাঁসকে এড়িয়ে যায়।
গাছ

1
ক্রোম বাগের মতো দেখতে: bugs.chromium.org/p/chromium/issues/detail?id=593273
কানেক্ট

8
স্বেচ্ছাসেবী সেটটাইমআউট সময়কাল দৌড়ের অবস্থার সমাধান করতে ব্যবহার করা উচিত নয়।
15:38


5

এটি চেষ্টা করুন

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


2

আপনি কীভাবে জটিল সমাধান চান তা নির্ভর করে এটি কার্যকর হতে পারে:

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

এটি কিছুটা ওভারকিল, তবে অনন্য পরিস্থিতিতে কোনও প্রতিশ্রুতি পরিচালনা করার ক্ষেত্রে সহায়তা করে।


2

এখানে প্রস্তাবিত সমাধানগুলি আমার পক্ষে কার্যকর হয়নি বা কোথায় বড় হবে, তাই আমি অন্য কোনও কিছুর সন্ধান করছিলাম এবং @dighan দ্বারা প্রস্তাবিত সমাধানটি বাউন্টেসোর্স / ডেস্ক/

সুতরাং এখানে কোড যা আমার সমস্যার সমাধান করেছে:

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

এটি এখনও কনসোলে একটি ত্রুটি ছুঁড়েছে, তবে কমপক্ষে ভিডিওটি চলছে :)


1

আমি এটার জন্য আরও ভাল সমাধান হতে পারে। @ জননি কোডারের উদ্ধৃত বিবরণ অনুসারে স্পেক বলেছেন:

media.pause ()

বিরামযুক্ত বৈশিষ্ট্যটি সত্যকে সেট করে, প্রয়োজনে মিডিয়া সংস্থান লোড করুন।

-> এটি লোড হচ্ছে

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

মিডিয়া HAVE_ENOUGH_DATA = 4 এর তাত্পর্যপূর্ণ অবস্থা নির্দেশ করে

মূলত কেবলমাত্র ভিডিওটি লোড করুন যদি এটি ইতিমধ্যে লোড না করা হয়। আমার জন্য উল্লিখিত ত্রুটি ঘটেছে, কারণ ভিডিও লোড হয়নি। একটি সময়সীমা ব্যবহার করার চেয়ে ভাল।


1

সমস্ত ত্রুটি অপসারণ:

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

1

লাইভ স্ট্রিমিংয়ের সাথে আমি একই সমস্যার মুখোমুখি ছিলাম। এবং আমার ঠিক এই। এইচটিএমএল ভিডিও 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;
                    }
                }
            });
        }

1
দুর্দান্ত সমাধান !!
জুনাইদ মুখতার

1

Chrome নতুন সংস্করণগুলিতে একটি প্রতিশ্রুতি দেয়। অন্যথায়, কেবল:

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

1

আমার একই সমস্যা আছে, শেষ পর্যন্ত আমি এর মাধ্যমে সমাধান করব:

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

1

এই কোড কোডটি আমার জন্য স্থির!

@ জননি কোডারের পরিবর্তিত কোড

এইচটিএমএল:

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

জাতীয়:

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

1

আমি কিছু কোড বেলো দিয়ে এটি ঠিক করেছি:

আপনি যখন খেলতে চান, নিম্নলিখিতগুলি ব্যবহার করুন:

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

0

আপনার ভিডিও ডাউনলোডটি অতি ধীর এবং ভিডিওটি বাফার না করায় এখানে আরও একটি সমাধান রয়েছে:

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


0

দেখে মনে হচ্ছে প্রচুর প্রোগ্রামাররা এই সমস্যার মুখোমুখি হয়েছেন। একটি সমাধান বেশ সহজ হতে হবে। মিডিয়া উপাদান Promiseক্রিয়া থেকে ফিরে

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

কৌতুক করা উচিত


0

এখানে গুগলার ব্লগ থেকে একটি সমাধান দেওয়া হয়েছে:

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

0

সমস্ত নতুন ব্রাউজার সমর্থন ভিডিও কেবলমাত্র নিঃশব্দ হওয়ার সাথে সাথে স্বয়ংক্রিয় প্লে হবে তাই দয়া করে এরকম কিছু রাখুন

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

ভিডিওর URL টি এসএসএলের সাথে মেলানো উচিত যদি আপনার সাইটটি https নিয়ে চলতে থাকে তবে ভিডিও URL টিও https তে থাকা উচিত এবং HTTP- র ক্ষেত্রেও একই


0

সবচেয়ে পরিষ্কার এবং সহজ সমাধান:

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

0

কারণ এক - সমাধানের জন্য খেলার প্রতিশ্রুতির অপেক্ষা না করে কলিং বিরতি

এই দৃশ্যের জন্য অনেকগুলি উত্তর, সুতরাং আমি কেবলমাত্র এই ইস্যুটির জন্য সেরা ডকটিকে উল্লেখ করব:

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

-1

আমি একই ইস্যুতে দৌড়ে এসেছি এবং এটির autoplayপরিবর্তে গতিযুক্ত ব্যবহার না করে অ্যাট্রিবিউট যুক্ত করে সমাধান করেছি play()। ব্রাউজারটি রেসের শর্তে না চলে খেলতে খেলবে।


-1

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

আমি ক্রোম 54.0.2840.59 (64-বিট) / ওএস এক্স 10.11.6 ব্যবহার করছি


-1

আমি মনে করি তারা এইচটিএমএল 5 ভিডিও আপডেট করেছে এবং কিছু কোডেককে অবমূল্যায়ন করেছে। কোডেকগুলি সরানোর পরে এটি আমার পক্ষে কাজ করেছিল।

নীচের উদাহরণে:

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


-1

আপনি যখন কোনও ত্রুটি দেখেন 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);
});

এটি কোনও প্রতিশ্রুতি ফিরিয়ে দেয় না
মার্টিন ডসন

@ মার্টিনমাজা ডসন এটি একটি প্রতিশ্রুতি দেয় না। প্রশ্নে আপনি যদি xxx এর স্পষ্ট মন্তব্যটি লক্ষ্য করেন তবে তিনি বলেন যে "এটি একটি ত্রুটি, এখানে সম্পূর্ণ ত্রুটি: অচেনা (প্রতিশ্রুতিতে) ডোমেক্সেক্সেপশন: নাটক () অনুরোধটি বিরতি দেওয়ার জন্য একটি কল দিয়ে বাধা দেওয়া হয়েছিল ()"।
সেনটম্বুরকে

-5

আমি এই সমস্যাটি মোকাবেলায় একটি কৌশল ব্যবহার করেছি। গ্লোবাল ভেরিয়েবল ভার অডিও সংজ্ঞায়িত করুন;

এবং ফাংশন চেক

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

এবং স্টপ ফাংশন

audio.pause();
audio = undefined;

এর পরের কল audio.play , অডিও '0' বর্তমান সময় থেকে প্রস্তুত হবে

আমি ব্যবহার করতাম

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

কিন্তু এটি কার্যকর হয়নি। ধন্যবাদ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.