কীভাবে "আনকাচড (প্রতিশ্রুতিতে) ডমোক্সেপশন হ্যান্ডেল করবেন: প্লে () ব্যর্থ হয়েছে কারণ ব্যবহারকারী প্রথমে নথির সাথে ইন্টারঅ্যাক্ট করেননি।" ডেস্কটপে ক্রোম 66 দিয়ে?


122

আমি ত্রুটির বার্তা পাচ্ছি ..

অপ্রকাশিত (প্রতিশ্রুতিতে) ডমেক্সেক্সেপশন: প্লে () ব্যর্থ হয়েছে কারণ ব্যবহারকারী প্রথমে নথির সাথে ইন্টারঅ্যাক্ট করেননি।

.. যখন ক্রোম সংস্করণ using 66 ব্যবহার করে ডেস্কটপে ভিডিও চালানোর চেষ্টা করা হয়।

নীচের এইচটিএমএলটি ব্যবহার করে কোনও ওয়েবসাইটে স্বয়ংক্রিয়ভাবে প্লেব্যাক শুরু হওয়া একটি বিজ্ঞাপন আমি পেয়েছি:

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

তাই বাই-পাস ক্রোম v66 এর অটোপ্লে ব্লকার সত্যিই হিসাবে সহজ শুধু যোগ করা হয় webkit-playsinline="true", playsinline="true"এবং autoplay=""থেকে বৈশিষ্ট্যাবলী <video>উপাদান? এর কোনও নেতিবাচক পরিণতি আছে কি?


2
আমি মনে করি প্লেসাইনলাইন একটি আইওএস জিনিস।
জোশ লি

উত্তর:


125

ক্রোম 66 আপডেটের পরে এইচটিএমএল 5 উপাদানগুলিতে অটোপ্লে কাজ করার জন্য আপনাকে কেবলমাত্র mutedভিডিও উপাদানটিতে সম্পত্তি যুক্ত করতে হবে।

সুতরাং আপনার বর্তমান ভিডিও এইচটিএমএল

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

শুধু প্রয়োজন muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

আমি বিশ্বাস করি ক্রোম 66 66 আপডেটটি ট্যাবগুলি ব্যবহারকারীদের ট্যাবে এলোমেলো শব্দ তৈরি করার চেষ্টা করছে। সে কারণেই নিঃশব্দ সম্পত্তি আবার অটোপ্লেকে কাজ করে।


এক ঘন্টা জন্য আমার চুল টানা পরে। এটি আমার সমস্যা সমাধান করেছে
অ্যান্ডি

ভিডিওটি চালানো শুরু হওয়ার পরে অডিও সক্ষম করার কোনও উপায় আছে কি? সরানো হচ্ছে muteঅ্যাট্রিবিউট বা সেটিং volumeঅ্যাট্রিবিউট সাহায্য করে না।
নিকিতাহল

ম্যাকওস ক্রোম সংস্করণে 74.0.3729.131 এ উভয় স্নিপেট কালো পর্দা দেয়
কামিল কিয়েস্কুউস্কি

@ কামিলকিএকজেউউসকি ভিডিওটি একটি কালো পর্দা দেখাচ্ছে কারণ এটি srcঅবৈধ। আমি srcভিডিওটি স্বয়ংক্রিয়ভাবে খেলায় স্নিপেট আপডেট করেছি ।
জো

2
muted="true"পরিবর্তে আমাকে করতে হয়েছিল
tgordon18

13

আমি যে সর্বোত্তম সমাধানটি খুঁজে পেয়েছি তা হ'ল ভিডিওটি নিঃশব্দ করা

এইচটিএমএল

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>

12
  1. খোলা chrome://settings/content/sound
  2. সেটিং কোনও ব্যবহারকারীর অঙ্গভঙ্গির প্রয়োজন হয় না
  3. Chrome পুনরায় চালু করুন

6
স্বতঃপ্লে নীতি পরিবর্তন। আমাকে ক্লিক করুন
মিং

4
এটি কেবল স্থানীয়ভাবে ক্রোম অটোপ্লে নীতি আচরণ পরীক্ষা করার জন্য বিকাশকারীদের জন্য ব্যবহার করে। বিকাশকারীদের
ডটকম / ডাব্লু

5
আমি দেখতে পেয়েছি যে কমান্ড লাইন পতাকাটি --autoplay-policy=no-user-gesture-requiredএই সেটিংটি অর্জনের প্রোগ্রামিক উপায়।
নিকিয়াচোনিস

27
এটি কেবলমাত্র আপনার ব্রাউজারের জন্যই কাজ করে, অন্য প্রত্যেকে এখনও প্রভাবিত হবে

37
কে এই উত্তর upvoting হয়? এটি সুপারসার ডটকম নয়। আপনার স্থানীয় মেশিনের সমাধান কোনও গ্রহণযোগ্য উত্তর হতে পারে না।
adripanico

11

হাতে থাকা প্রশ্নের উত্তর দেওয়া হচ্ছে ...
না এই বৈশিষ্ট্যগুলি থাকা যথেষ্ট নয়, আপনার ডকুমেন্টটিতে একটি ব্যবহারকারী-অঙ্গভঙ্গি নিবন্ধিত হওয়া দরকার অডিও সহ একটি মিডিয়া অটোপ্লে সক্ষম করতে।

তবে, এই সীমাবদ্ধতাটি খুব দুর্বল: আপনি যদি পিতামাতার নথিতে এই ব্যবহারকারী-অঙ্গভঙ্গিটি পেয়ে থাকেন এবং আপনার ভিডিওটি যদি কোনও আইফ্রেমে লোড হয়ে যায় তবে আপনি এটি খেলতে পারবেন ...

সুতরাং উদাহরণস্বরূপ এই ঝাঁকুনি নিতে , যা শুধুমাত্র

<video src="myvidwithsound.webm" autoplay=""></video>

প্রথম লোডে এবং আপনি যদি কোথাও ক্লিক না করেন তবে এটি চলবে না, কারণ আমাদের কোনও ইভেন্ট এখনও নিবন্ধিত হয়নি।
তবে একবার আপনি "রান" বোতামটি ক্লিক করুন, তারপরে প্যারেন্ট ডকুমেন্ট (jsfiddle.net) কোনও ব্যবহারকারী-অঙ্গভঙ্গি পেয়েছে এবং এখন ভিডিওটি প্লে করে, যদিও এটি প্রযুক্তিগতভাবে একটি অন্য নথিতে লোড করা থাকে।

তবে নীচের স্নিপেট, যেহেতু এটিতে আপনাকে রান কোড স্নিপেট বোতামটি ক্লিক করতে হবে, অটোপ্লে হবে।

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

এর অর্থ হল যে আপনার বিজ্ঞাপনটি সম্ভবত খেলতে সক্ষম হয়েছিল কারণ আপনি মূল পৃষ্ঠায় একটি ব্যবহারকারী-অঙ্গভঙ্গি সরবরাহ করেছিলেন।


এখন, নোট করুন যে সাফারি এবং মোবাইল ক্রোমের তুলনায় আরও কঠোর নিয়ম রয়েছে, এবং আপনাকে ব্যবহারকারী-ইভেন্ট হ্যান্ডলার থেকে নিজেই বা উপাদানটিতে play()প্রোগ্রামটিমেটিকভাবে একবারে পদ্ধতিটি একবারে ট্রিগার করতে হবে ।<video><audio>

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


11

আমার জন্য (কৌণিক প্রকল্পে) এই কোডটি সহায়তা করেছে:

এইচটিএমএলে আপনার যুক্ত করা উচিত autoplay muted

জেএস / টিএসে

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}

1
একেবারে সত্য এবং অবিশ্বাস্য, এমনকি এনজি 8 সহ সর্বশেষতম কৌণিক সংস্করণ। কৌনিকটি কেবল উপাদানগুলির এইচটিএমএল টেমপ্লেট কী চলছে সে সম্পর্কে চিন্তা করে না!
পেড্রো ফেরেরীরা

2
এবং, নতুন কৌণিক ব্যবহারের @ViewChild()উপায়ের সাথে আপনার স্ট্যাট্যাটিক বিকল্পটি সত্য করে তোলা দরকার: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; এবং তারপরে: this.video = this.videoplayer.nativeElement;@ngOnInit()
পেড্রো

1
এটি আমার সমস্যা ছিল, এইচটিএমএলে নিঃশব্দ করা সম্পূর্ণ উপেক্ষা করা হয় এবং আমাকে জেএস দ্বারা বাধ্য করা হয়েছিল। দিনগুলি অনুসন্ধানের পরে আপনার উত্তরটির জন্য +1 এম
ইগনাসিও বুস্টোস

এটি আমার ক্ষেত্রে সঠিক উত্তর, নিখুঁতভাবে কাজ করেছে
হ্যারি .নীম

বাহ, বিশ্বাস করতে পারছি না কৌণিক এসএসআর পোস্ট-লোড দর্শনের জন্য আমার আসলে জাভাস্ক্রিপ্ট-সাইড মিউটিং দরকার ছিল। এই পুরো সময়, আমি ভেবেছিলাম এইচটিএমএল সমস্যা ছিল।
aराव

7

মাউসমেভ ইভেন্ট লিসেন্টার ব্যবহার করার চেষ্টা করুন

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

4

DOM এলিমেন্টটি প্রসারিত করুন, ত্রুটিটি পরিচালনা করুন এবং গ্রেপ্তার সাথে ডিগ্রেড করুন

নীচে আমি নেটিভ ডিওএম প্লে ফাংশনটি গুটিয়ে রাখতে, তার প্রতিশ্রুতিটি ধরতে এবং তারপরে ব্রাউজার কোনও ব্যতিক্রম ছুঁড়ে ফেললে একটি প্লে বোতামে অবনমিত করতে প্রোটোটাইপ ফাংশনটি ব্যবহার করি। এই এক্সটেনশানটি ব্রাউজারের ঘাটতি দেখায় এবং লক্ষ্য উপাদানগুলির জ্ঞান সহ যে কোনও পৃষ্ঠায় প্লাগ-এন-প্লে হয়।

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

এটি একটি অত্যন্ত চালাক দৃষ্টিভঙ্গি, এটি কোনও নীতি ভঙ্গ করে না (যেহেতু প্লেব্যাক যাইহোক শুরু হয় না), এবং ত্রুটি থাকতে বাধা দেয়। +1
লরেটোপরিসিটি

3

আমার ক্ষেত্রে, আমাকে এটি করতে হয়েছিল

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

2

ভিডিওটি অটোপ্লেলে বা জেএস (ভিডিও.প্লে ()) এর মাধ্যমে প্লে করার জন্য ক্রোমের একটি ব্যবহারকারী ইন্টারঅ্যাকশন দরকার। তবে মিথস্ক্রিয়াটি যে কোনও মুহুর্তে কোনও প্রকারের হতে পারে। আপনি যদি কেবল পৃষ্ঠায় এলোমেলো ক্লিক করেন, ভিডিওটি স্বয়ংক্রিয়ভাবে প্লে হবে। আমি তখন সমাধান করেছি, একটি বোতাম যুক্ত করুন (কেবল ক্রোম ব্রাউজারগুলিতে) যা "ভিডিও অটোপ্লে সক্ষম করুন" বলে। বোতামটি কিছুই করে না, তবে কেবল এটিতে ক্লিক করা, পরবর্তী কোনও ভিডিওর জন্য প্রয়োজনীয় ব্যবহারকারীর ইন্টারঅ্যাকশন।


1

অডিও ফাইল চালানোর চেষ্টা করার সময় আমি একই ধরণের ত্রুটির মুখোমুখি হয়েছি। প্রথমদিকে, এটি কাজ করছিল, তারপরে যখন আমি markForCheckপ্রতিশ্রুতি মেটায় তখন পুনরায় রেন্ডার করতে ট্রিগার করতে একই ফাংশনে চেঞ্জডেক্টর পদ্ধতিটি ব্যবহার শুরু করি তখন এটি কাজ করা বন্ধ করে দেয় (ভিউ রেন্ডারিংয়ের সাথে আমার একটি সমস্যা ছিল)।

যখন আমি পরিবর্তিত markForCheckকরতে detectChangesএটি আবার কাজ শুরু করে। আমি সত্যিই কী ঘটেছে তা ব্যাখ্যা করতে পারি না, আমি কেবল এটি এখানে ফেলে দেওয়ার কথা ভেবেছিলাম, সম্ভবত এটি কাউকে সহায়তা করবে।


1

প্রত্যাশা অনুযায়ী আপনার কোড কাজের জন্য আপনার mutedভিতরে বৈশিষ্ট্য যুক্ত করা উচিত ছিল videoElement। নমুনা দেখুন ..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

উত্স হিসাবে বৈধ ভিডিও লিঙ্ক যুক্ত করতে ভুলবেন না


0

অ্যান্ড্রয়েড ফোনে আমার কিছু সমস্যা ছিল। কয়েকটি চেষ্টার পরে আমি জানতে পেরেছিলাম যে ডেটা সেভার চালু থাকলে কোনও অটো প্লে হয় না:

ডেটা সেভার মোড সক্ষম থাকলে কোনও অটোপ্লে নেই । যদি ডেটা সেভার মোড সক্ষম থাকে তবে মিডিয়া সেটিংসে অটোপ্লে অক্ষম থাকে।

উৎস


-6

ঠিকানা বারে ক্রোম: // ফ্ল্যাগ টাইপ করুন

অনুসন্ধান: অটোপ্লে

স্বতঃপ্লে নীতি

অডিও বা ভিডিওকে অটোপ্লে করার অনুমতি দেওয়া হচ্ছে কি না তা সিদ্ধান্ত নেওয়ার সময় নীতি ব্যবহৃত হয়।

- ম্যাক, উইন্ডোজ, লিনাক্স, ক্রোম ওএস, অ্যান্ড্রয়েড

"এই সেট কোন ব্যবহারকারীর অঙ্গভঙ্গীর প্রয়োজন বোধ করা হয় "

Chrome পুনরায় চালু করুন এবং আপনাকে কোনও কোড পরিবর্তন করতে হবে না


24
আপনি সম্ভবত প্রতিটি এবং প্রতিটি ব্যবহারকারীকে সেটিংস পরিবর্তন করতে বলতে পারবেন না।
আশীষ ঝাঁওয়ার

2
এটি প্রকৃতপক্ষে কিছু লোকের জন্য (কিওস্ক, ব্যক্তিগত এবং স্থানীয় ওয়েবসাইটগুলি ...) সমস্যাটি সমাধান করতে পারে তবে ক্রোম the 76 এ পতাকাটি সরানো হয়েছে the এখন একমাত্র সমাধানটি উত্তর
মিলান hভেলা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.