এইচটিএমএল 5 দিয়ে আপনার ওয়েবসাইটে ভিডিও যুক্ত করা হচ্ছে

তার ব্লগ প্রথম জন্য পিসি প্রো , ওয়েব ডেভেলপার আয়ান ডেভলিন এইচটিএমএল 5 দিয়ে কীভাবে আপনার ভিডিওতে ভিডিও এম্বেড করবেন তা প্রকাশ করে

ক্রোম থেকে ফায়ার টিভিতে castালাই

সম্ভবত HTML5 এর সবচেয়ে বড় এবং সর্বাধিক আলোচিত বৈশিষ্ট্যটি এম্বেড করা ভিডিও। বর্তমানে আপনার ওয়েবসাইটে ভিডিও সামগ্রী যুক্ত করার একমাত্র পদ্ধতি হ'ল ফ্ল্যাশ, কুইকটাইম বা রিয়েলপ্লেয়ারের মতো তৃতীয় পক্ষের প্লাগইন with এইচটিএমএল 5 এবং ভিডিও উপাদানটির ভোর হওয়ার সাথে সাথে ভিডিও সমর্থনটি ওয়েব ব্রাউজার দ্বারা পরিচালিত হওয়া এবং তৃতীয় পক্ষের কোনও সমর্থন প্রয়োজনের বাইরে চলে যাওয়ার সাথে পরিবর্তিত হবে।

বেশ কয়েকটি ওয়েব ব্রাউজার ইতিমধ্যে এইচটিএমএল 5 এর জন্য সমর্থন সরবরাহ করে। আপনি কীভাবে আপনার সাইটে প্লাগইন-মুক্ত ভিডিও এবং আপনার মুখোমুখি সমস্যাগুলি এম্বেড করতে পারেন তা এখানে আমরা প্রকাশ করতে যাচ্ছি।

ফাইলের ধরণ এবং ব্রাউজারের সামঞ্জস্য

শুরুতে, আমরা সংক্ষেপে বিভিন্ন HTML ফাইলগুলিতে সমর্থিত বিভিন্ন ভিডিও ফাইলের প্রকারগুলি একবারে দেখব। এগুলি হ'ল থিওরা ওজিজি এবং এইচ .264 (। এমপি 4)। বিভিন্ন ব্রাউজার বিভিন্ন ধরণের সমর্থন করে এবং কিছু কিছু একেবারেই সমর্থন করে না। নিম্নলিখিত সারণি এটি ইঙ্গিত করে:

কোডেক এবং অন্যান্য প্রযুক্তিগত সমস্যা

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

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

আপনি যদি ভাবছেন যে কীভাবে, আপনি আপনার ভিডিও ফাইলগুলিকে ওজিতে রূপান্তর করতে পারেন (আপনি থিওরা ওজিজি টাইপ সম্পর্কে আরও জানতে পারেন থিয়োরকুকবুক ) ফাইলগুলি ব্যবহার করে মিরো ভিডিও রূপান্তরকারী ।

ভিডিও উপাদান এবং কোডেকগুলি সম্পর্কে আরও গভীরতার তথ্যের জন্য, শীর্ষে যান HTML এ ডুব দিন: ওয়েবে ভিডিও মার্ক পিলগ্রিম দ্বারা।

এইচটিএমএল 5 কোড

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

উপাদান

ভিডিও উপাদানটিতে নিম্নলিখিত বৈশিষ্ট্য থাকতে পারে:

এ থেকে এটি দেখা যায় যে একা ভিডিও উপাদান ব্যবহার করে আপনার ওয়েবসাইটটিতে কোনও ওজিজি ভিডিও এম্বেড করা কতটা সহজ:

সত্যিই এটি আছে।

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

কারও বাষ্প ইচ্ছার তালিকাটি কীভাবে দেখতে পাবেন see

উপাদান

উত্স উপাদান নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

দ্রষ্টব্য: উত্স উপাদানটি অকার্যকর এবং এর একটি শুরুর ট্যাগ রয়েছে তবে কোনও ক্লোজিং ট্যাগ নেই

উত্স উপাদান সম্পর্কে সর্বাধিক দরকারী জিনিসটি হ'ল আমরা এটিকে বিভিন্ন ফাইল প্রকারের স্ট্যাকের জন্য ব্যবহার করতে পারি, ব্রাউজারটি প্রতিটি এটি চেষ্টা করতে সক্ষম করে যতক্ষণ না এটি এটি খেলতে পারে finds

ব্যবহার এবং একসাথে

ভিডিও উপাদানটির মধ্যে বিভিন্ন ধরণের ভিডিওগুলি স্ট্যাক করার জন্য, আমরা কোডটি নিম্নরূপে প্রবেশ করি:

উপরের কোডটি এখন ইন্টারনেট এক্সপ্লোরার ব্যতীত সমস্ত ব্রাউজারে কাজ করবে যা উপরে বর্ণিত বার্তাটি প্রদর্শন করবে।

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

আপনার মধ্যে ধারালো ছুরিগুলি এখন লক্ষ্য করা যাবে যে আমরা এই স্ট্যাকিংটির সুবিধা নিতে পারি এবং নীচের কোডটি ব্যবহার করে আপনি এই ভিডিও বার্তাটি দেখতে পাচ্ছেন না বলে দুঃখিত হিসাবে পরিবর্তে নীচে ফ্ল্যাশ (বা অন্য কোনও প্লাগইন) এ ফ্যালব্যাক পেতে পারি can :
type='video/ogg'

উপসংহার

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