ওয়েবের জন্য মৌলিক ভিডিও সহ চিত্রের বাইরে যাওয়া

বেসিক ভিডিও শিখুন। ব্যস্ততা বাড়ান।

Doug Sillars

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

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

তাই শুরু করা যাক!

<ভিডিও> ট্যাগ

এটা স্পষ্ট বলে মনে হচ্ছে, তাই না? ভিডিও যোগ করতে, আপনাকে <video> ট্যাগ যোগ করতে হবে, একটি উৎসের দিকে নির্দেশ করতে হবে, এবং তারপরে আপনি দৌড়ে যাবেন!

<video src="myVideo.mp4">

এবং, আপনি সঠিক. সর্বোচ্চ স্তরে, ওয়েবে একটি ভিডিও যোগ করার জন্য আপনার এটিই প্রয়োজন৷ কিন্তু ভিডিওর লেআউট এবং ডেলিভারি উন্নত করতে আপনি ভিডিও ট্যাগে যোগ করতে পারেন এমন অনেক বৈশিষ্ট্য রয়েছে।

<উৎস> ট্যাগ

সম্ভবত ওয়েবে ভিডিও ডেলিভারি উন্নত করার সর্বোত্তম উপায় হল ব্রাউজারে বিতরণ করা ফাইলগুলিকে অপ্টিমাইজ করা। এটি করার উপায় হল <source> ট্যাগ ব্যবহার করা:

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

এটি তিনটি পৃথক উৎস ফাইল উল্লেখ করে। ব্রাউজারটি শীর্ষে শুরু হয় এবং এটি ব্যবহার করতে পারে এমন প্রথম বিন্যাস এবং কোডেক বেছে নেয়। ভিডিও জগতে, ফাইল ফরম্যাট, যাকে সাধারণত কন্টেইনার বলা হয়, বিভিন্ন কোডেক দিয়ে সংরক্ষণ করা যেতে পারে, প্রতিটি আলাদা বৈশিষ্ট্য সহ। ( এ বিষয়ে আরও এখানে ।) উপরের উদাহরণে, প্রথম পছন্দ হল WebM ফরম্যাট ( যা VP8 বা VP9 কোডেক দিয়ে এনকোড করা যেতে পারে ), এবং বিশ্বব্যাপী ব্যবহারকারীদের 78% দ্বারা সমর্থিত (লেখার সময়)। দ্বিতীয় পছন্দ হল mp4 এর H.265 কোডেক, যা iOS এবং নতুন Macs- এ সমর্থিত। এই কোডেকগুলি নতুন এবং উন্নত ডেটা কম্প্রেশন রয়েছে, একই মানের ভিডিও প্রদান করার সময় পুরানো ভিডিও ফরম্যাটের মতো।

আমাদের তালিকার চূড়ান্ত পছন্দটি হল H.264 mp4, যা সমস্ত বিশ্বব্যাপী ব্যবহারকারীদের 92% সমর্থন করে, কিন্তু এটি একটি পুরানো ফর্ম্যাট, এবং যেমন, সাধারণত WebM বা H.265 ভিডিওগুলির থেকে অনেক বড়৷ একটি উদাহরণে, আপনি একটি দুই মিনিটের চলচ্চিত্রের পার্থক্য দেখতে পারেন:

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

প্রিলোড বৈশিষ্ট্য

কিছু ভিডিও স্থানীয়ভাবে ডাউনলোড এবং সংরক্ষণ করা না হওয়া পর্যন্ত ভিডিও প্লেব্যাক শুরু করতে পারে না। প্রিলোড অ্যাট্রিবিউট ব্যবহার করে, আপনি পৃষ্ঠা লোডে কতটা ভিডিও ডাউনলোড হবে তা নিয়ন্ত্রণ করতে পারেন। প্রিলোড অ্যাট্রিবিউটের জন্য তিনটি মান রয়েছে: auto , metadata , এবং none ।

প্রিলোড='অটো'

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

প্রিলোড='মেটাডেটা'

এটি Chrome এবং Safari-এ প্রিলোডের জন্য ডিফল্ট সেটিং। যখন 'metadata' ব্যবহার করা হয়, ভিডিওর প্রথম 3% ডাউনলোড হয়। যদিও এটি 'auto' সাথে সতর্কতা শেয়ার করে, ভিডিওর মাত্র 3% ডাউনলোড করলে পুরো ভিডিওর তুলনায় অনেক কম সার্ভার/ডেটা ব্যবহার খরচ হয়, যদিও ভিডিওর একটি অংশ দ্রুত ভিডিও স্টার্টআপের জন্য স্থানীয়ভাবে সংরক্ষণ করা হয় তা নিশ্চিত করে।

প্রিলোড = 'কোনোটি'

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

পোস্টার

আপনি একটি পোস্টার ইমেজ পেতে চাইতে পারেন যা ভিডিওটি প্লে শুরু হওয়ার আগে ভিডিও উইন্ডোতে প্রদর্শিত হয়:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

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

প্লেব্যাক নিয়ন্ত্রণ

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

নিঃশব্দ

muted বৈশিষ্ট্যের কারণে একটি নিঃশব্দ অবস্থায় প্লেব্যাক শুরু হয়। যদি কোনো নিয়ন্ত্রণ সরবরাহ না করা হয়, তাহলে এটি সম্পূর্ণরূপে প্লেব্যাকের জন্য নিঃশব্দ থাকবে। যদি এটি উদ্দেশ্য করা হয় তবে ভিডিও থেকে অডিও ট্র্যাকটি সরানোর অর্থ হতে পারে। এটি গ্রাহকের কাছে বিতরণ করা ভিডিও ফাইলের আকারকে আরও হ্রাস করে।

কন্টেইনার এবং কোডেকের মতো, অডিও ফাইল অপসারণ করা, যাকে ডেমুক্সিংও বলা হয়, এই নিবন্ধের সুযোগের বাইরে। আপনি মিডিয়া ম্যানিপুলেশন চিট শীটে নির্দেশাবলী পেতে পারেন।

লুপ

কন্টেন্ট লুপ করে এমন একটি ভিডিও ডেলিভার করতে (যেমন অ্যানিমেটেড GIF), loop অ্যাট্রিবিউট যোগ করুন। যেহেতু ভিডিও ফাইলগুলি সাধারণত অ্যানিমেটেড GIF গুলির থেকে অনেক ছোট হয়, এই প্রক্রিয়াটি আপনাকে ভিডিও ফাইলগুলির সাথে আপনার GIFগুলি প্রতিস্থাপন করতে দেয়৷

ভিডিও অটোপ্লে হচ্ছে

আপনি যদি আপনার ভিডিওটি অবিলম্বে প্লে করতে চান (উদাহরণস্বরূপ একটি ব্যাকগ্রাউন্ড ভিডিও, বা একটি ভিডিও যা একটি অ্যানিমেটেড GIF এর মতো লুপ হয়) আপনি autoplay বৈশিষ্ট্য যুক্ত করতে পারেন:

<video src="myVideo.mp4" playsinline autoplay>

এটি বলেছে, মোবাইল ব্রাউজারে একটি ভিডিও অটোপ্লে করার জন্য, muted বৈশিষ্ট্যটিও যোগ করতে হবে:

<video src="myVideo.mp4" playsinline autoplay muted>

উপসংহার

শুধুমাত্র আপনার ওয়েবসাইটে একটি ভিডিও যোগ করা আপনার গ্রাহকদের জন্য ব্যস্ততার একটি নতুন ক্ষেত্র যোগ করবে, তবে এটি গুরুত্বপূর্ণ যে আপনি সঠিকভাবে বিষয়বস্তু সরবরাহ করবেন - ভিডিওটির প্লেব্যাকটি নির্বিঘ্ন এবং স্টল ছাড়াই তা নিশ্চিত করা। <video> ট্যাগের অন্তর্নির্মিত বৈশিষ্ট্যগুলি ব্যবহার করে আপনার ওয়েবসাইট পরিদর্শনকারী প্রত্যেকের কাছে ত্রুটিহীন ভিডিও সরবরাহ করতে আপনাকে ব্যাপকভাবে সাহায্য করতে পারে।