আপনি কি Chrome DevTools JavaScript কনসোলে এই অপ্রত্যাশিত মিডিয়া ত্রুটির উপর হোঁচট খেয়েছেন?
বা
তাহলে আপনি সঠিক জায়গায় আছেন। কোন ভয় নেই। আমি এটির কারণ কী এবং কীভাবে এটি ঠিক করব তা ব্যাখ্যা করব।
এর কারণ কী
এখানে নিচে কিছু জাভাস্ক্রিপ্ট কোড রয়েছে যা "অপরাধিত (প্রতিশ্রুতিতে)" ত্রুটিটি পুনরুত্পাদন করে যা আপনি দেখছেন:
<video id="video" preload="none" src="https://example.com/file.mp4"></video> <script> video.play(); // <-- This is asynchronous! video.pause(); </script>
উপরের কোডটি Chrome DevTools-এ এই ত্রুটির বার্তার ফলে:
_Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
যেহেতু ভিডিওটি preload="none" এর কারণে লোড হয় না, video.play() কার্যকর হওয়ার সাথে সাথেই ভিডিও প্লেব্যাক অগত্যা শুরু হয় না৷
তাছাড়া Chrome 50 থেকে, একটি <video> বা <audio> এলিমেন্টে একটি play() কল একটি প্রতিশ্রুতি প্রদান করে, একটি ফাংশন যা অ্যাসিঙ্ক্রোনাসভাবে একটি একক ফলাফল প্রদান করে। প্লেব্যাক সফল হলে, প্রতিশ্রুতি পূরণ করা হয় এবং playing ইভেন্ট একই সময়ে বহিস্কার করা হয়। প্লেব্যাক ব্যর্থ হলে, ব্যর্থতা ব্যাখ্যা করে একটি ত্রুটি বার্তা সহ প্রতিশ্রুতি প্রত্যাখ্যান করা হয়।
এখন যা ঘটছে তা এখানে:
-
video.play()অ্যাসিঙ্ক্রোনাসভাবে ভিডিও সামগ্রী লোড করা শুরু করে। -
video.pause()ভিডিও লোডিং বাধা দেয় কারণ এটি এখনও প্রস্তুত নয়। -
video.play()অ্যাসিঙ্ক্রোনাসভাবে জোরে প্রত্যাখ্যান করে।
যেহেতু আমরা আমাদের কোডে ভিডিও প্লে প্রমিস পরিচালনা করছি না, তাই Chrome DevTools-এ একটি ত্রুটির বার্তা উপস্থিত হয়৷
কিভাবে এটা মেরামত করা যেতে পারে
এখন যেহেতু আমরা মূল কারণটি বুঝতে পেরেছি, আসুন দেখি এটি ঠিক করতে আমরা কী করতে পারি।
প্রথমত, কখনো মিডিয়া উপাদান (ভিডিও বা অডিও) চলবে বলে মনে করবেন না। এটি প্রত্যাখ্যান করা হয়েছে কিনা তা দেখতে play ফাংশন দ্বারা ফিরে প্রতিশ্রুতি দেখুন. এটি লক্ষণীয় যে প্লেব্যাকটি আসলে শুরু না হওয়া পর্যন্ত প্রতিশ্রুতিটি পূরণ হবে না, যার অর্থ মিডিয়া প্লে না হওয়া পর্যন্ত then() ভিতরের কোডটি কার্যকর হবে না।
উদাহরণ: অটোপ্লে
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script>
// Show loading animation.
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
উদাহরণ: Play & Pause
<video id="video" preload="none" src="https://example.com/file.mp4"></video>
<script>
// Show loading animation.
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
video.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
এই সাধারণ উদাহরণের জন্য এটি দুর্দান্ত তবে আপনি যদি video.play() ব্যবহার করে পরে একটি ভিডিও চালাতে সক্ষম হন তবে কী করবেন?
আমি তোমাকে একটা গোপন কথা বলব। আপনাকে video.play() ব্যবহার করতে হবে না, আপনি video.load() ব্যবহার করতে পারেন এবং কীভাবে তা এখানে:
উদাহরণ: Fetch & Play
<video id="video"></video>
<button id="button"></button>
<script>
button.addEventListener('click', onButtonClick);
function onButtonClick() {
// This will allow us to play video later...
video.load();
fetchVideoAndPlay();
}
function fetchVideoAndPlay() {
fetch('https://example.com/file.mp4')
.then(response => response.blob())
.then(blob => {
video.srcObject = blob;
return video.play();
})
.then(_ => {
// Video playback started ;)
})
.catch(e => {
// Video playback failed ;(
})
}
</script>
প্রতিশ্রুতি সমর্থন খেলা
লেখার সময়, HTMLMediaElement.play() Chrome , Edge, Firefox, Opera এবং Safari- এ একটি প্রতিশ্রুতি প্রদান করে।
বিপদজনক এলাকা
<video> এর মধ্যে <source> play() প্রতিশ্রুতি দেয় না
<video src="not-existing-video.mp4"\> এর জন্য, play() প্রতিশ্রুতি প্রত্যাশিতভাবে প্রত্যাখ্যান করেছে কারণ ভিডিওটি বিদ্যমান নেই৷ <video><source src="not-existing-video.mp4" type='video/mp4'></video> এর জন্য, play() প্রতিশ্রুতি কখনই প্রত্যাখ্যান করে না। এটি শুধুমাত্র তখনই ঘটবে যদি কোন বৈধ উৎস না থাকে।