মোবাইলে নিঃশব্দ অটোপ্লে - ক্যানভাস হ্যাক এবং অ্যানিমেটেড GIF গুলিকে বিদায় বলুন!

ভিডিওর জন্য মিউট করা অটোপ্লে 53 সংস্করণে Android এর জন্য Chrome দ্বারা সমর্থিত৷ autoplay এবং muted উভয়ই সেট করা থাকলে একটি ভিডিও উপাদানের জন্য প্লেব্যাক স্বয়ংক্রিয়ভাবে শুরু হবে যদি এটি দৃশ্যমান হয়, এবং নিঃশব্দ ভিডিওগুলির প্লেব্যাক ব্যবহারিকভাবে play() দিয়ে শুরু করা যেতে পারে৷ পূর্বে, মোবাইলে প্লেব্যাক নিঃশব্দ অবস্থা নির্বিশেষে ব্যবহারকারীর অঙ্গভঙ্গি দ্বারা শুরু করা হত।

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

আপনি এই নমুনা পরিদর্শন করে এটি কর্মে দেখতে পারেন। muted ভিডিওর প্লেব্যাক Chrome 53 বা তার পরে স্বয়ংক্রিয়ভাবে শুরু হয়।

ভিডিও প্লেয়ারের স্ক্রিনশট।

উপরন্তু, নিঃশব্দ প্লেব্যাক এখন play() পদ্ধতি ব্যবহার করে শুরু করা যেতে পারে। পূর্বে, play() শুধুমাত্র প্লেব্যাক শুরু করবে যদি এটি একটি ব্যবহারকারীর অঙ্গভঙ্গি যেমন একটি বোতাম ক্লিক থেকে আসে। অ্যান্ড্রয়েডে নিম্নলিখিত দুটি ডেমো তুলনা করুন - সেগুলি Chrome 53 এ চেষ্টা করুন, তারপরে একটি পুরানো সংস্করণে:

আমরা যখনই সম্ভব autoplay অ্যাট্রিবিউট ব্যবহার করার পরামর্শ দিই, এবং প্রয়োজন হলেই play() পদ্ধতি।

একটি click মতো ব্যবহারকারীর অঙ্গভঙ্গির প্রতিক্রিয়ায় একটি ভিডিওকে প্রোগ্রাম্যাটিকভাবে আনমিউট করা সম্ভব, কিন্তু আপনি যদি ব্যবহারকারীর অঙ্গভঙ্গি ছাড়াই একটি ভিডিও প্রোগ্রাম্যাটিকভাবে আনমিউট করার চেষ্টা করেন, তাহলে প্লেব্যাক বিরতি দেবে৷

muted autoplay পরিবর্তনটি DOM-এ তৈরি নয় এমন একটি video উপাদানের সাথে play() ব্যবহার করাও সম্ভব করবে, উদাহরণস্বরূপ WebGL প্লেব্যাক চালানোর জন্য

play() পদ্ধতিটি একটি প্রতিশ্রুতিও প্রদান করে , যা নিঃশব্দ প্রোগ্রাম্যাটিক প্লেব্যাক সক্ষম কিনা তা পরীক্ষা করতে ব্যবহার করা যেতে পারে। simpl.info/video/scripted এ এর ​​একটি উদাহরণ রয়েছে।

পরিবর্তন কেন?

Android এ Chrome এর পূর্ববর্তী সংস্করণগুলিতে অটোপ্লে অক্ষম করা হয়েছিল কারণ এটি বিঘ্নিত হতে পারে, ডেটা-ক্ষুধার্ত এবং অনেক ব্যবহারকারী এটি পছন্দ করেন না

অটোপ্লে অক্ষম করার ফলে ডেভেলপারদের অ্যানিমেটেড জিআইএফ, সেইসাথে <canvas> এবং <img> হ্যাকগুলির মতো বিকল্পগুলিতে চালিত করার অনিচ্ছাকৃত প্রভাব ছিল। এই কৌশলগুলি পাওয়ার খরচ, কর্মক্ষমতা, ব্যান্ডউইথের প্রয়োজনীয়তা, ডেটা খরচ এবং মেমরি ব্যবহারের ক্ষেত্রে অপ্টিমাইজ করা ভিডিওর চেয়ে অনেক খারাপ। ভিডিও অ্যানিমেটেড জিআইএফ-এর তুলনায় উচ্চ মানের প্রদান করতে পারে, অনেক ভালো কম্প্রেশন সহ: গড়ে প্রায় 10 গুণ এবং সর্বোত্তমভাবে 100 গুণ পর্যন্ত। জাভাস্ক্রিপ্টে ভিডিও ডিকোডিং সম্ভব , তবে এটি ব্যাটারির শক্তিতে একটি বিশাল ড্রেন।

নিম্নলিখিতগুলির তুলনা করুন - প্রথমটি একটি ভিডিও এবং দ্বিতীয়টি একটি অ্যানিমেটেড GIF:

ক্লিপ ভিডিও চলছে।

তারা দেখতে বেশ একই রকম, কিন্তু ভিডিওটির আকার 200KB এর কম এবং অ্যানিমেটেড GIF 900KB-এর বেশি।

ক্রোম এবং অন্যান্য ব্রাউজার বিক্রেতারা ব্যবহারকারী ব্যান্ডউইথ সম্পর্কে অত্যন্ত সতর্ক। অনেক ব্যবহারকারীর জন্য অনেক প্রসঙ্গে উচ্চ ডেটা খরচ প্রায়ই দুর্বল সংযোগের চেয়ে অ্যাক্সেসে একটি বড় বাধা। সমাধানের ব্যাপকতার পরিপ্রেক্ষিতে, নিঃশব্দ অটোপ্লে এমন কিছু নয় যা ব্লক করা যেতে পারে, তাই ভাল API এবং ডিফল্ট অফার করা প্ল্যাটফর্মটি করতে পারে সেরা।

ওয়েব ক্রমবর্ধমান মিডিয়া কেন্দ্রিক . ডিজাইনার এবং বিকাশকারীরা ভিডিও ব্যবহার করার জন্য নতুন এবং অপ্রত্যাশিত উপায়গুলি খুঁজে চলেছে — এবং তারা প্ল্যাটফর্ম জুড়ে সামঞ্জস্যপূর্ণ আচরণ চায়, উদাহরণস্বরূপ যখন একটি ডিজাইন উপাদান হিসাবে ব্যাকগ্রাউন্ড ভিডিও ব্যবহার করে৷ নিঃশব্দ অটোপ্লে মোবাইল এবং ডেস্কটপ উভয় ক্ষেত্রেই এই ধরনের কার্যকারিতা সক্ষম করে৷

সূক্ষ্ম পয়েন্ট

  • অ্যাক্সেসযোগ্যতার দৃষ্টিকোণ থেকে, অটোপ্লে বিশেষভাবে সমস্যাযুক্ত হতে পারে। অ্যান্ড্রয়েডে Chrome 53 এবং তার উপরে অটোপ্লে সম্পূর্ণরূপে অক্ষম করার জন্য একটি সেটিং প্রদান করে: মিডিয়া সেটিংস থেকে, অটোপ্লে নির্বাচন করুন।
  • এই পরিবর্তনটি audio উপাদানকে প্রভাবিত করে না: Android-এ Chrome-এ অটোপ্লে এখনও অক্ষম রয়েছে, কারণ মিউট করা অটোপ্লে অডিওর জন্য খুব বেশি অর্থবহ নয়।
  • ডেটা সেভার মোড সক্রিয় থাকলে কোনো অটোপ্লে নেই। ডেটা সেভার মোড সক্ষম থাকলে, মিডিয়া সেটিংসে অটোপ্লে অক্ষম করা হয়৷
  • নিঃশব্দ অটোপ্লে যেকোনো দৃশ্যমান নথি, iframe বা অন্য কোনো দৃশ্যমান ভিডিও উপাদানের জন্য কাজ করবে।
  • মনে রাখবেন যে নতুন আচরণের সুবিধা নিতে, আপনাকে muted পাশাপাশি autoplay যোগ করতে হবে: simpl.info/video/muted এর সাথে simpl.info/video তুলনা করুন।

সমর্থন

  • নিঃশব্দ অটোপ্লে iOS 10 এবং পরবর্তীতে Safari দ্বারা সমর্থিত।
  • অটোপ্লে, নিঃশব্দ হোক বা না হোক, ইতিমধ্যেই ফায়ারফক্স এবং ইউসি ব্রাউজার দ্বারা অ্যান্ড্রয়েডে সমর্থিত: তারা কোনো ধরনের অটোপ্লে ব্লক করে না।

আরও খোঁজ