একটি ওয়েব পৃষ্ঠায় মিডিয়া যোগ করার বিভিন্ন উপায় আছে। পূর্বে আপনি স্ট্যান্ডার্ড <video> ট্যাগ ব্যবহার করতে শিখেছেন। এই নিবন্ধে আপনি উপলব্ধ কয়েকটি মিডিয়া ফ্রেমওয়ার্ক (বা লাইব্রেরি) সম্পর্কে শিখবেন যা আপনি ডিফল্ট HTML5 ভিডিও প্লেয়ারের আচরণ প্রসারিত বা প্রতিস্থাপন করতে ব্যবহার করতে পারেন।
মিডিয়া ফ্রেমওয়ার্কগুলি মালিকানা এবং ওপেন সোর্স উভয় প্রকারেই আসে এবং তাদের মূলে রয়েছে API-এর একটি সেট যা বিভিন্ন কন্টেইনার ফর্ম্যাট এবং ট্রান্সমিশন প্রোটোকলের জন্য অডিও এবং/অথবা ভিডিও প্লেব্যাক সমর্থন করে। একটি ভাল কাঠামোর একটি মডুলার আর্কিটেকচার রয়েছে এবং এটি পরিষ্কার এবং বিশদ ডকুমেন্টেশন সরবরাহ করে। আদর্শভাবে এটি সেট আপ এবং ব্যবহার করা তুলনামূলকভাবে সহজ হওয়া উচিত। আপনি নিজেকে জিজ্ঞাসা করতে পারেন, "যদি HTML5 ভিডিও প্লেয়ার ইতিমধ্যেই বেশিরভাগ বৈশিষ্ট্য সরবরাহ করে তবে আমি কেন একটি কাঠামো বা লাইব্রেরি ব্যবহার করব?" এটি একটি মহান প্রশ্ন, এর খনন করা যাক.
ফ্রেমওয়ার্ক ব্যবহার করার সুবিধা
বেশিরভাগ পরিস্থিতিতে যা একটি মৌলিক ওয়েব পৃষ্ঠার প্রয়োজনের বাইরে, আপনি আপনার সামগ্রী পরিবেশন করার জন্য একটি মিডিয়া কাঠামো ব্যবহার করতে চান৷ যদি না আপনি অফলাইন প্লেব্যাক, স্ট্রিমিং, অ্যানালিটিক্স, পিকচার-ইন-পিকচার, প্রিভিউ থাম্বনেইল, এমবেডিং এবং মনিটাইজেশন যেমন ফিল রেট অপ্টিমাইজেশান, অ্যাড শিডিউলিং, বা হেডার বিডিংয়ের মতো একটি সমৃদ্ধ বৈশিষ্ট্য সেট তৈরি এবং বজায় রাখতে প্রস্তুত না হন। আপনি সম্ভবত একটি বিদ্যমান সমাধান যে জটিলতা অফলোড করা উচিত.
মিডিয়া ফ্রেমওয়ার্কগুলি এখানেই আসে৷ তারা আপনাকে বৈশিষ্ট্যগুলির একটি সেট এবং শর্তগুলি সরবরাহ করে যেখানে আপনি সেই বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন এবং তারপরে আপনাকে সিদ্ধান্ত নিতে হবে কোন কাঠামোটি আপনার প্রকল্পের জন্য সঠিক। পরবর্তী প্রবন্ধে আমরা আলোচনা করব কিভাবে আমরা অফলাইন স্ট্রিমিং সহ একটি PWA তৈরি করেছি যা বেশ কিছু জটিল বৈশিষ্ট্য প্রয়োগ করে। স্পয়লার সতর্কতা, এটি অনেক কাজ ছিল এবং এখনও একটি উত্পাদন প্রস্তুত সমাধান থেকে দূরে। নিজেকে মাথা ব্যাথা বাঁচান এবং একটি কাঠামো ব্যবহার করুন।
এখানে বেছে নেওয়ার জন্য অনেকগুলি বিকল্প রয়েছে, আপাতত এই নিবন্ধটি তিনটির উপর ফোকাস করবে, যেগুলি হল Shaka Player , JW Player , এবং Video.js ৷
শাকা প্লেয়ার
ডকুমেন্টেশন অনুসারে, গুগলের শাকা প্লেয়ার হল অভিযোজিত মিডিয়ার জন্য একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি। এটি প্লাগইন ব্যবহার না করে একটি ব্রাউজারে অভিযোজিত মিডিয়া ফরম্যাট (যেমন DASH এবং HLS ) চালায়। পরিবর্তে, শাকা প্লেয়ার ওপেন ওয়েব স্ট্যান্ডার্ড মিডিয়াসোর্স এক্সটেনশন এবং এনক্রিপ্ট করা মিডিয়া এক্সটেনশন ব্যবহার করে।
শাকা প্লেয়ার ইনডেক্সডডিবি ব্যবহার করে অফলাইন স্টোরেজ এবং মিডিয়া প্লেব্যাক সমর্থন করে। বিষয়বস্তু যেকোনো ব্রাউজারে সংরক্ষণ করা যেতে পারে। লাইসেন্সের সঞ্চয়স্থান ব্রাউজার সমর্থনের উপর নির্ভর করে।
শাকা প্লেয়ার ডকুমেন্টেশন সাইটে মৌলিক ব্যবহারের জন্য নির্দেশাবলী রয়েছে। যাইহোক, সংক্ষেপে শাকা প্লেয়ার ব্যবহার করার জন্য আপনাকে প্রথমে একটি ভিডিও বা অডিও উপাদান সহ একটি HTML পৃষ্ঠা তৈরি করতে হবে। তারপরে আপনার অ্যাপ্লিকেশনের জাভাস্ক্রিপ্টে আপনি পলিফিলস ইনস্টল করুন এবং ব্রাউজার সমর্থনের জন্য পরীক্ষা করুন। ব্রাউজারটি শাকা প্লেয়ারের জন্য সমর্থন নিশ্চিত করার পরে একটি স্ক্রিপ্ট মিডিয়া উপাদান মোড়ানোর জন্য একটি প্লেয়ার অবজেক্ট তৈরি করবে, ত্রুটিগুলি শুনবে, তারপর একটি ম্যানিফেস্ট ফাইল লোড করবে। সেখান থেকে শাকা প্লেয়ার দায়িত্ব নেবে।
শাকার সাথে আপনাকে আপনার মিডিয়া ফাইলগুলিকে হোস্ট এবং এনকোড করতে হবে। একটি মিডিয়া সার্ভার তৈরি করা খুব বেশি জটিল নয়, তবে এনকোডিং/ট্রান্সকোডিং মিডিয়া সময়সাপেক্ষ এবং জটিল হতে পারে। আপনি সম্ভবত এই অংশটিকে একটি পরিষেবাতে অফলোড করতে চান যেমন Zencoder , Amazon Elastic Encoder , বা Google Transcoder API পুনরাবৃত্ত কাজগুলিকে স্বয়ংক্রিয় করতে এবং প্রক্রিয়াটিকে গতি বাড়ানোর জন্য৷
শাকা প্লেয়ারের সবচেয়ে বড় বিষয় হল শাকা প্যাকেজার নামক DASH এবং HLS প্যাকেজিং এবং এনক্রিপশনের জন্য সত্যিই একটি দুর্দান্ত সরঞ্জাম এবং মিডিয়া প্যাকেজিং SDK রয়েছে। এটি অনলাইন স্ট্রিমিংয়ের জন্য মিডিয়া সামগ্রী প্রস্তুত এবং প্যাকেজ করতে পারে, যা আপনি মিডিয়া রূপান্তর এবং মিডিয়া এনক্রিপশনে আগে শিখেছিলেন।
জেডব্লিউ প্লেয়ার
আপনি যদি হোস্টিং এবং এনকোডিং/ট্রান্সকোডিং পরিষেবা প্রদান করে এমন একটি বিকল্প খুঁজছেন তাহলে আপনি JW Player- এর দিকে তাকাতে পারেন, কিন্তু মনে রাখবেন যে JW Player হল মালিকানাধীন সফ্টওয়্যার। মানে, প্ল্যাটফর্ম বা রোডম্যাপের উপর আপনার খুব বেশি নিয়ন্ত্রণ নেই। একটি মৌলিক বিনামূল্যের সংস্করণ রয়েছে যেখানে ভিডিওগুলি একটি জলছাপ এবং একটি বাণিজ্যিক সংস্করণ সহ প্রদর্শিত হয়৷
JW Player MPEG-DASH (শুধুমাত্র প্রদত্ত সংস্করণ), ডিজিটাল রাইটস ম্যানেজমেন্ট (DRM) (Vualto সহ), ইন্টারেক্টিভ বিজ্ঞাপন, ইন্টারফেসের কাস্টমাইজেশন এবং এম্বেডের সাথে স্ট্রিমিং সমর্থন করে। একটি ভাল নথিভুক্ত API এবং SDK আছে. যাইহোক, আপনি যদি আপনার মিডিয়া হোস্ট করার জন্য একটি দ্রুত এবং বিনামূল্যের উপায় খুঁজছেন তবে ইউটিউব ভিডিওগুলি এম্বেড করা সাধারণত আপনার সেরা বিনামূল্যের বিকল্প হতে চলেছে।
Video.js
তাদের ওয়েবসাইট অনুসারে, Video.js একটি HTML5 বিশ্বের জন্য গ্রাউন্ড আপ থেকে তৈরি করা হয়েছে। এটি HTML5 ভিডিও এবং আধুনিক স্ট্রিমিং ফরম্যাট যেমন DASH এবং HLS, সেইসাথে YouTube এবং Vimeo সমর্থন করে। এটি ডেস্কটপ এবং মোবাইল ডিভাইসে ভিডিও প্লেব্যাক সমর্থন করে এবং CSS-ভিত্তিক স্কিনগুলির সাথে সর্বত্র ভাল দেখায়।
Video.js ব্যবহার করার কয়েকটি উপায় আছে, কিন্তু সবচেয়ে সহজ হল Fastly দ্বারা প্রদত্ত বিনামূল্যের CDN সংস্করণটি ব্যবহার করা। আপনি শুরু করার পৃষ্ঠায় প্লেয়ারকে কীভাবে সেট আপ করবেন সে সম্পর্কে আরও শিখতে পারেন। Video.js একটি অত্যন্ত শক্তিশালী ভিডিও প্লেয়ার, এবং অনেকটা শাকা প্লেয়ারের মতোই আপনাকে আপনার ভিডিও হোস্ট এবং এনকোড করতে হবে। যাইহোক, প্লাগইন সিস্টেমের মধ্যে একটি পার্থক্য হল যেখানে আপনি Video.js প্লেয়ারে YouTube ভিডিও প্লে করার মতো জিনিসগুলি করতে পারেন, যা কাস্টমাইজ করা যায়।
অন্যান্য ফ্রেমওয়ার্ক
অনেকগুলি বিভিন্ন ফ্রেমওয়ার্ক এবং লাইব্রেরি উপলব্ধ রয়েছে, এই নিবন্ধটি কেবল সেখানে যা আছে তার উপর স্ক্র্যাচ করে। একটি ফ্রেমওয়ার্ক নির্বাচন করার সময় আপনাকে বিবেচনা করা উচিত যে প্রকল্পের জন্য আপনার কী বৈশিষ্ট্যগুলি প্রয়োজন এবং আপনি কীভাবে আপনার মিডিয়া হোস্ট এবং এনকোড বা ট্রান্সকোড করার পরিকল্পনা করছেন। আপনার কি প্রি-রোল বিজ্ঞাপন বা অন্যান্য নগদীকরণ কৌশল প্রয়োজন? আপনার মিডিয়া কি অফলাইনে পাওয়া যাবে? আপনার বাজেট কত বড় বা ছোট? অথবা অন্য কোন সংখ্যা বিবেচনা. আপনার গবেষণা করুন এবং পরামর্শের জন্য আপনার নেটওয়ার্কের লোকেদের জিজ্ঞাসা করুন। আরও কয়েক ডজন অন্যান্য দুর্দান্ত বিকল্প রয়েছে এবং আপনি কোনও পছন্দ করার আগে আপনার দলের জন্য উপযুক্ত একটি বেছে নিতে কিছু সময় নিন এবং প্রকল্পের জীবনচক্র চলাকালীন বজায় রাখার জন্য অপ্রয়োজনীয় প্রযুক্তিগত ঋণ বা জটিলতা তৈরি করা এড়ান।
এর পরে, আপনি PWA সম্পর্কে শিখবেন অফলাইন স্ট্রিমিং এর সাথে যেটি আমরা প্রদর্শন করার জন্য তৈরি করেছি যে কীভাবে প্রধান চ্যালেঞ্জগুলি মোকাবেলা করতে হয় যেগুলি আপনার নিজস্ব সমাধানগুলিকে শুধুমাত্র HTML5 ভিডিও অবজেক্ট ব্যবহার করে ভারী উত্তোলন পরিচালনা করার জন্য কাঠামো ছাড়াই ব্যবহার করে।