ভিডিও কর্মক্ষমতা

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

যাইহোক, ওয়েবে সাধারণত ছবিগুলিই একমাত্র মিডিয়া টাইপ দেখা যায় না। ভিডিও হল আরেকটি জনপ্রিয় মিডিয়া টাইপ যা প্রায়ই ওয়েব পেজে ব্যবহৃত হয়। সম্ভাব্য কিছু অপ্টিমাইজেশান দেখার আগে, প্রথমে <video> উপাদানটি কীভাবে কাজ করে তা বোঝা গুরুত্বপূর্ণ।

ভিডিও সোর্স ফাইল

মিডিয়া ফাইলগুলির সাথে কাজ করার সময়, আপনি আপনার অপারেটিং সিস্টেমে ( .mp4 , .webm , এবং অন্যান্য) যে ফাইলটিকে চিনতে পারেন তাকে একটি ধারক বলা হয়৷ একটি পাত্রে এক বা একাধিক স্ট্রীম থাকে। বেশিরভাগ ক্ষেত্রে, এটি ভিডিও এবং অডিও স্ট্রিম হবে।

আপনি একটি কোডেক ব্যবহার করে প্রতিটি স্ট্রিম সংকুচিত করতে পারেন। উদাহরণস্বরূপ, একটি video.webm একটি WebM কন্টেইনার হতে পারে যেখানে VP9 ব্যবহার করে সংকুচিত একটি ভিডিও স্ট্রীম এবং Vorbis ব্যবহার করে সংকুচিত একটি অডিও স্ট্রিম থাকতে পারে।

কন্টেনার এবং কোডেকগুলির মধ্যে পার্থক্য বোঝা সহায়ক, কারণ এটি আপনাকে উল্লেখযোগ্যভাবে কম ব্যান্ডউইথ ব্যবহার করে আপনার মিডিয়া ফাইলগুলিকে সংকুচিত করতে সাহায্য করে, যা সামগ্রিকভাবে পৃষ্ঠা লোডের সময় কমিয়ে দেয়, সেইসাথে একটি পৃষ্ঠার সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) এর সম্ভাব্য উন্নতি করে, যা একটি ব্যবহারকারী-কেন্দ্রিক মেট্রিক এবং তিনটি মূল ওয়েব ভাইটালের মধ্যে একটি।

ভিডিও ফাইল কম্প্রেস করার একটি উপায় FFmpeg ব্যবহার করে:

ffmpeg -i input.mov output.webm

পূর্ববর্তী কমান্ড—যদিও এটি FFmpeg ব্যবহার করার সময় যতটা মৌলিক হয়— input.mov ফাইলটি নেয় এবং ডিফল্ট FFmpeg বিকল্পগুলি ব্যবহার করে একটি output.webm ফাইল আউটপুট করে। পূর্ববর্তী কমান্ডটি একটি ছোট ভিডিও ফাইল আউটপুট করে যা সমস্ত আধুনিক ব্রাউজারে কাজ করে। FFmpeg অফার করে ভিডিও বা অডিও বিকল্পগুলি টুইক করা আপনাকে ভিডিওর ফাইলের আকার আরও কমাতে সাহায্য করতে পারে। উদাহরণস্বরূপ, আপনি যদি একটি GIF প্রতিস্থাপন করার জন্য একটি <video> উপাদান ব্যবহার করেন, তাহলে আপনার অডিও ট্র্যাকটি সরানো উচিত:

ffmpeg -i input.mov -an output.webm

আপনি যদি জিনিসগুলিকে আরও কিছুটা পরিবর্তন করতে চান তবে পরিবর্তনশীল বিটরেট এনকোডিং ব্যবহার না করে ভিডিওগুলি সংকুচিত করার সময় FFmpeg -crf পতাকা অফার করে। -crf এর অর্থ হল ধ্রুবক হার ফ্যাক্টর । এটি একটি সেটিং যা কম্প্রেশনের স্তরকে সামঞ্জস্য করে এবং একটি নির্দিষ্ট পরিসরের মধ্যে একটি পূর্ণসংখ্যা গ্রহণ করে তা করে।

কোডেক যেমন H.264 এবং VP9 -crf পতাকা সমর্থন করে, তবে এর ব্যবহার নির্ভর করে আপনি কোন কোডেক ব্যবহার করছেন তার উপর। আরও তথ্যের জন্য, H.264-এ ভিডিও এনকোড করার জন্য ধ্রুবক হার ফ্যাক্টর সম্পর্কে পড়ুন, সেইসাথে VP9-এ ভিডিও এনকোড করার সময় ধ্রুবক গুণমান সম্পর্কে পড়ুন।

একাধিক ফরম্যাট

ভিডিও ফাইলগুলির সাথে কাজ করার সময়, একাধিক ফর্ম্যাট নির্দিষ্ট করা ব্রাউজারগুলির জন্য একটি ফলব্যাক হিসাবে কাজ করে যা সমস্ত আধুনিক ফর্ম্যাট সমর্থন করে না৷

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

যেহেতু সমস্ত আধুনিক ব্রাউজার H.264 কোডেক সমর্থন করে , তাই MP4 লিগ্যাসি ব্রাউজারগুলির জন্য ফলব্যাক হিসাবে ব্যবহার করা যেতে পারে। WebM সংস্করণটি নতুন AV1 কোডেক ব্যবহার করতে পারে, যেটি এখনও ব্যাপকভাবে সমর্থিত নয় , বা আগের VP9 কোডেক, যা AV1 এর চেয়ে ভালো সমর্থিত , কিন্তু সাধারণত AV1 এর পাশাপাশি কম্প্রেস করে না।

poster বৈশিষ্ট্য

একটি ভিডিওর পোস্টার ইমেজ <video> এলিমেন্টে poster অ্যাট্রিবিউট ব্যবহার করে যোগ করা হয়, যা ব্যবহারকারীদের ইঙ্গিত দেয় যে প্লেব্যাক শুরু হওয়ার আগে ভিডিওর বিষয়বস্তু কী হতে পারে:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

স্বয়ংক্রিয় চালু

HTTP আর্কাইভ অনুসারে, ওয়েব জুড়ে 20% ভিডিওতে autoplay বৈশিষ্ট্য অন্তর্ভুক্ত থাকে। autoplay ব্যবহার করা হয় যখন একটি ভিডিও অবিলম্বে চালানো উচিত—যেমন যখন একটি ভিডিও ব্যাকগ্রাউন্ড হিসাবে বা অ্যানিমেটেড GIF-এর প্রতিস্থাপন হিসাবে ব্যবহার করা হয়।

অ্যানিমেটেড GIFগুলি খুব বড় হতে পারে, বিশেষ করে যদি তাদের জটিল বিবরণ সহ অনেকগুলি ফ্রেম থাকে৷ অ্যানিমেটেড জিআইএফ-এর জন্য বেশ কয়েকটি মেগাবাইট ডেটা ব্যবহার করা অস্বাভাবিক নয়, যা আরও গুরুত্বপূর্ণ সংস্থানগুলির জন্য ব্যান্ডউইথের জন্য ভাল ব্যয় করা একটি উল্লেখযোগ্য ড্রেন হতে পারে। আপনার সাধারণত অ্যানিমেটেড ইমেজ ফরম্যাট এড়ানো উচিত, কারণ এই ধরনের মিডিয়ার জন্য <video> সমতুল্য অনেক বেশি কার্যকর।

যদি ভিডিও অটোপ্লে করা আপনার ওয়েবসাইটের প্রয়োজন হয়, তাহলে আপনি সরাসরি <video> এলিমেন্টে autoplay অ্যাট্রিবিউট ব্যবহার করতে পারেন:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

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

ব্যবহারকারী-সূচিত প্লেব্যাক

সাধারণত, HTML পার্সার <video> উপাদানটি আবিষ্কার করার সাথে সাথে ব্রাউজার একটি ভিডিও ফাইল ডাউনলোড করা শুরু করে। আপনার যদি <video> উপাদান থাকে যেখানে ব্যবহারকারী প্লেব্যাক শুরু করে, আপনি সম্ভবত ভিডিওটি ডাউনলোড করা শুরু করতে চান না যতক্ষণ না ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট করেন।

<video> এলিমেন্টের preload অ্যাট্রিবিউট ব্যবহার করে আপনি ভিডিও রিসোর্সের জন্য কি ডাউনলোড করা হয়েছে তা প্রভাবিত করতে পারেন:

  • preload="none" সেট করা ব্রাউজারকে জানায় যে ভিডিওর কোনো বিষয়বস্তু প্রিলোড করা উচিত নয়।
  • preload="metadata" সেট করা শুধুমাত্র ভিডিও মেটাডেটা নিয়ে আসে, যেমন ভিডিওর সময়কাল এবং সম্ভবত অন্যান্য সারসরি তথ্য।

preload="none" সেট করা সম্ভবত সবচেয়ে কাঙ্খিত ক্ষেত্রে যদি আপনি এমন ভিডিও লোড করছেন যেগুলির জন্য ব্যবহারকারীদের প্লেব্যাক শুরু করতে হবে৷

আপনি একটি poster ইমেজ যোগ করে এই ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন। এটি ব্যবহারকারীকে ভিডিওটি সম্পর্কে কিছু প্রসঙ্গ দেয়। অতিরিক্তভাবে, পোস্টার ইমেজটি যদি আপনার LCP উপাদান হয়, তাহলে আপনি fetchpriority="high" সহ <link rel="preload"> ইঙ্গিত ব্যবহার করে poster ছবির অগ্রাধিকার বাড়াতে পারেন :

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

এম্বেড

ভিডিও সামগ্রীকে দক্ষতার সাথে অপ্টিমাইজ করা এবং পরিবেশন করার সমস্ত জটিলতার প্রেক্ষিতে, YouTube বা Vimeo-এর মতো উত্সর্গীকৃত ভিডিও পরিষেবাগুলিতে সমস্যাটি অফলোড করতে চাওয়া অর্থপূর্ণ৷ এই ধরনের পরিষেবাগুলি আপনার জন্য ভিডিওগুলির ডেলিভারি অপ্টিমাইজ করে, কিন্তু তৃতীয় পক্ষের পরিষেবা থেকে একটি ভিডিও এম্বেড করা কার্যক্ষমতার উপর তার নিজস্ব ধরণের প্রভাব ফেলতে পারে, কারণ এমবেড করা ভিডিও প্লেয়ারগুলি প্রায়শই জাভাস্ক্রিপ্টের মতো অনেক অতিরিক্ত সংস্থান পরিবেশন করতে পারে৷

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

ভিডিও ডেমো

নিজের জ্ঞান যাচাই করুন

একটি অভিভাবক <video> উপাদানের ভিতরে <source> > উপাদানের ক্রম শেষ পর্যন্ত কোন ভিডিও সংস্থান ডাউনলোড করা হয়েছে তা নির্ধারণ করে না ।

সত্য।
আবার চেষ্টা কর.
মিথ্যা।
সঠিক!

<video> উপাদানটির poster অ্যাট্রিবিউট একজন LCP প্রার্থী হিসেবে বিবেচিত হয়।

সত্য।
সঠিক!
মিথ্যা।
আবার চেষ্টা কর.

পরবর্তী: ওয়েব ফন্ট অপ্টিমাইজ করুন

নির্দিষ্ট রিসোর্স প্রকার অপ্টিমাইজ করার আমাদের কভারেজের পরেরটি হল ফন্ট। আপনার ওয়েবসাইটের ফন্টগুলি অপ্টিমাইজ করা এমন কিছু যা প্রায়শই উপেক্ষা করা হয়, কিন্তু এটি আপনার ওয়েবসাইটের সামগ্রিক লোড গতি এবং LCP এবং Cumulative Layout Shift (CLS) এর মতো মেট্রিক্সের উপর উল্লেখযোগ্য প্রভাব ফেলতে পারে।