ওয়েব ও HTML5 প্লেব্যাক

Universal Player, যাচাই করা Shaka, PHP, ASP.NET Core, স্বয়ংক্রিয় DRM নির্বাচন ও নিরাপদ সমস্যা নির্ণয় দিয়ে DRM-X 6.0 সুরক্ষিত ওয়েব প্লেব্যাক ইন্টিগ্রেট করুন।

Markdown দেখুন সরাসরি চালানো যায় এমন উদাহরণহালনাগাদ 2026-10-26

UI কাস্টমাইজেশন, প্যারামিটারের ডিফল্ট মান এবং জীবনচক্রের উদাহরণের জন্য PLAYER-UI-CONFIGURATION.md পড়ুন। প্লেয়ারের নিজস্ব পপআপ প্যানেল অস্বচ্ছ; সাবটাইটেল ও ওয়াটারমার্কের অস্বচ্ছতা আলাদাভাবে নির্ধারণ করা হয়।

Published Content ID DRM-X Web Player-এ কাজ করার পরে Web SDK 1.2.0-beta.7 ব্যবহার করুন। ওয়েবসাইটের নিজস্ব লগইন ও দেখার নিয়ম থাকবে। সম্পূর্ণ ব্যাকএন্ড ইন্টিগ্রেশন কিট দিয়ে শুরু করে নিচের কম্পোনেন্ট যোগ করুন।

প্রথমে সম্পূর্ণ উদাহরণ ব্যবহার করুন#

ওয়েব প্যাকেজে সর্বশেষ স্থানীয় Universal Player JavaScript ও টাইপ ঘোষণা, যাচাই করা Shaka, চালানো যায় এমন PHP অ্যাপ ও ASP.NET Core উদাহরণ এবং ইন্টিগ্রেশনের README রয়েছে। প্রোডাকশন পেজ DRM-X CDN থেকে Shaka ও Universal Player লোড করতে পারে; পর্যালোচনা, উন্নয়ন ও নিয়ন্ত্রিত বিকল্পের জন্য প্যাকেজে বর্তমান স্থানীয় ফাইলও থাকে।

সার্ভারে Site ID, Site Key ও Access Key সেট করুন।
বিশ্বস্ত ফাইল সুরক্ষাকারী ডিস্ক নির্ধারণ করুন Content ID এবং নাম দেওয়া নিয়ম।
নমুনা লগ- ইন পরিবর্তন করুন এবং আপনার ব্যবসার যুক্তিতে উপস্থিত সিদ্ধান্ত নিন ।

ক্লায়েন্টের ন্যূনতম দায়িত্ব#

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>

এই কম্পোনেন্টের আগে সম্পূর্ণ কিট থেকে যাচাইকৃত Shaka রানটাইম ও বর্তমান Universal Player স্ক্রিপ্ট লোড করুন। দর্শক Play চাপলে এটি আপনার প্রমাণীকৃত এন্ডপয়েন্ট কল করে। এন্ডপয়েন্ট দর্শকের সেশন ও দেখার অনুমতি যাচাই করে, বিশ্বস্ত কনটেন্ট ও নীতি বেছে Contract v1 তৈরি করে এবং Cache-Control: no-store দিয়ে ফেরত দেয়।

ব্রাউজার দ্বারা নিরাপত্তা পছন্দসই নয়আপনার ব্যাকএন্ড প্রমাণীকৃত ব্যবহারকারী ও বিশ্বস্ত ক্যাটালগের পরিচয় থেকে DRM-X Content ID ও পলিসি টেমপ্লেট নির্ধারণ করে।

স্বয়ংক্রিয় DRM আচরণ#

Windows Microsoft Edge আগে PlayReady চেষ্টা করে। যাচাইকৃত পথ প্লেব্যাকের আগে ব্যর্থ হলে Auto সীমিতভাবে Widevine-এ যেতে পারে।
Chrome সমর্থিত Android ব্রাউজার ব্যবহার ব্যবস্থা Widevine.
iPhone ও iPad-এর Safari নেটিভ HLS FairPlay ব্যবহার করে। সমর্থিত macOS Safari-এ সম্ভব হলে যাচাইকৃত Shaka MSE FairPlay অগ্রাধিকার পায়, নেটিভ HLS বিকল্পসহ।
সামঞ্জস্যপূর্ণ Huawei ব্রাউজার যাচাই করা WisePlay প্রক্রিয়া এবং স্বয়ংক্রিয়ভাবে মান বাছার সতর্ক পদ্ধতি ব্যবহার করে।

প্রোডাকশনে দেওয়ার আগে যাচাইয়ের তালিকা#

সব কাজ কর HTTPS এবং রাখা Access Keyসার্ভারের গোপন জিনিষ.
ব্যাক-আপ প্রাপ্ত প্রতিক্রিয়া Cache-Control: no-store.
localStorage-এ ম্যানিফেস্ট URL, টোকেন বা সেশনের প্রতিক্রিয়া স্থায়ীভাবে সংরক্ষণ করবেন না।
সংবেদনশীল তথ্য সরানো বিস্তারিত লগ শুধু ইচ্ছাকৃতভাবে চালু করুন এবং সীমিত সময় রাখুন; লাইসেন্সের বাইট বা অনুমোদনের তথ্য লিখবেন না।
প্রকৃত ডিভাইসে Windows Edge, macOS Safari, iPhone/iPad Safari, Android এবং বিজ্ঞাপনে সমর্থিত বলা প্রতিটি ধরনের ডিভাইস পরীক্ষা করুন।

Web SDK

একটি Web Component দিয়ে HTML5 প্লেব্যাক#

<script
  src="https://drm-x6-cdn.1aicloud.com/shaka-player-5.2.4-drmx.2-6557ae581f1c.js"
  integrity="sha384-QzxDZ19XaYAL308fvtVjFjUX9RpRxtSfEZ1k1lm8FsRuML1MgNEORVMCtmToCFb8"
  crossorigin="anonymous"></script>
<script
  src="https://drm-x6-cdn.1aicloud.com/drmx-universal-player-1.2.0-beta.8-26bbb1dfef2c.js"
  integrity="sha384-tnp3UFe+6ZU/QKoKQq2zU8Z3J7BX+GI1/L+Z3Y8+AmJkYI3+owP6e+A4npzWIFdA"
  crossorigin="anonymous"></script>

<drmx-universal-player
  content-id="course-12-lesson-4"
  content-type="vod"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>

ব্রাউজার শুধু আপনার একই অরিজিনের প্রমাণীকৃত endpoint-এ অনুরোধ করে। Auto উপযুক্ত সমর্থিত DRM ও নিবন্ধিত DASH/HLS ম্যানিফেস্ট বেছে নেয়। বিটরেট, অডিওর ভাষা/চ্যানেল, সাবটাইটেল, Picture-in-Picture, পূর্ণপর্দা ও প্লেব্যাকের গতি বাছার কন্ট্রোল অন্তর্ভুক্ত থাকে।

ব্যবহার করা হচ্ছে Shaka; ভিডিও.js, বিটোভিন অথবা অন্যান্য EME প্লেয়ার

ব্যাকএন্ড থেকে Contract v1 নিয়ে manifestUrl লোড করুন। Authorization: Bearer {drmLicenseToken} শুধু DRM লাইসেন্স ও FairPlay সার্টিফিকেট অনুরোধে দিন। চ্যালেঞ্জ ও লাইসেন্সের অস্বচ্ছ বাইট হুবহু রাখুন। শেষে ফেরত দেওয়া মুক্তির রুট ব্যবহার করুন।

Universal Player-এর প্লেলিস্ট ও অভিন্ন কন্ট্রোল#

Web ও Android একই গাঢ় প্যানেল ও ছোট নীল কন্ট্রোল ব্যবহার করে। পরের/আগের, এলোমেলো, এক/সব পুনরাবৃত্তি ও বাতিলযোগ্য স্বয়ংক্রিয় অগ্রগতি আছে। প্রতি আইটেমে নতুন অনুমোদন চাওয়া হয়। অধ্যায় ও প্রতিলিপি আসে কনটেন্ট ক্যাটালগ থেকে।

গতি, ঘুমের টাইমার, সাবটাইটেল, অনুমোদিত মান, অডিও ভাষা, সেশন বুকমার্ক ও A–B লুপ আছে। Web-এ শর্টকাট, দর্শকভিত্তিক ঐচ্ছিক স্থানীয় পুনরায় শুরু, প্রতিলিপি খোঁজা ও সমর্থিত PiP আছে। Android নেটিভ Widevine অফলাইন ডাউনলোড ও নবায়ন রাখে। অন্য পর্দায় কাস্ট ও ডিভাইসভিত্তিক অগ্রগতি মেলাতে আলাদা ইন্টিগ্রেশন লাগে।

পেশা ও এন্টারপ্রাইজ লোগো সেটিংস

ব্র্যান্ডিং ভিডিওর ওপর দেখানো হয় না। Web-এ ডান-ক্লিক বা Settings → About player-এ অনুমোদিত লোগো, তথ্য ও সংস্করণ দেখুন। গোল সেটিংস ও গাঢ় মেনু Android-এর সঙ্গে এক। Web পূর্ণপর্দায় প্লেলিস্ট বাছাইও আছে।

বিশ্বস্ত ব্যাকএন্ডে playerBranding-কে {"mode":"hidden"} বা {"mode":"custom","logoUrl":"https://your-site.example/logo.png","label":"Your brand"} দিন। সক্রিয় Professional বা Enterprise যাচাই হয়। অন্য প্ল্যানে {"mode":"default"}; অনুমতিহীন কাস্টম/লুকানো অনুরোধে 403 ফেরে। এটি নিরাপত্তা ওয়াটারমার্ক থেকে আলাদা।

PHP ডাউনলোডে বদলানো যায় এমন প্লেলিস্ট ও ব্র্যান্ডিং আছে। Android ZIP-এ কলব্যাক উদাহরণ আছে। প্লেলিস্ট অনুমোদন ব্যাকএন্ডে রাখুন; কোনো প্লেয়ারে API ক্লায়েন্টের প্রমাণীকরণ তথ্য ঢোকাবেন না।

শুধু ফোনের জন্য ঐচ্ছিক 1080p সীমা#

Web SDK 1.2.0-beta.4-এ ফোনের ঐচ্ছিক সীমা আছে। আগের UHD আচরণ রাখতে মান সেট করবেন না। প্রথম Play-এর আগে কনফিগার করুন:

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session"
  mobile-max-height="1080">
</drmx-universal-player>

// Equivalent component option; retained for subsequent playlist items:
await component.play({mobileMaximumHeight: 1080});
// Remove the option before a new playback:
await component.play({mobileMaximumHeight: null});

// Low-level API, for a video element you own:
await DrmXUniversalPlayer.start({
  video, contentId: 'your-published-content-id',
  sessionEndpoint: '/api/drmx/playback-session',
  mobileMaximumHeight: 1080
});

বিকল্পটি শনাক্ত করা ফোনেই প্রযোজ্য। ট্যাবলেট, ডেস্কটপ ও TV আগের সর্বোচ্চ সীমা রাখে। শনাক্তকরণ ব্রাউজারের ইঙ্গিত ও user-agent-এর বিকল্প পদ্ধতি ব্যবহার করে; পর্দার প্রস্থ রেজল্যুশন ঠিক করে না। হোস্ট ডিভাইসের ধরন জানলে device-class="phone" বা deviceClass: "phone" ব্যবহার করুন। অন্য মান হলো auto, tablet, desktop ও tv। ব্রাউজারের শ্রেণিবিভাগ শুধু সহায়ক তথ্য।

SDK অনুমোদনের আগে কম platformCapabilities.maximumHeight পাঠায়। এন্ডপয়েন্টকে এটি পাঠাতে বা আরও কমাতে হবে। ফেরত দেওয়া সীমা অনুরোধের চেয়ে বেশি হতে পারবে না। ঘোরানো, পূর্ণপর্দা, পুনরায় চেষ্টা ও প্লেলিস্ট বদলের পরও Auto ও হাতে বাছা মান অনুমোদিত সীমায় থাকবে। স্বাক্ষরিত DRM নীতি ও ডিকোডার সীমা ফল আরও কমাতে পারে। মান 144 থেকে 4320-এর পূর্ণসংখ্যা হতে হবে; মান না দেওয়া বা null এই ঐচ্ছিক সীমা বন্ধ করে।

Safari-এর জন্য ফিল্টার করা HLS দরকার

ব্যাকএন্ডকে সেশন-সংযুক্ত nativeHlsQuality.autoUrl এবং কেবল উপযুক্ত ভিডিও সংস্করণের মানের URL ফেরত দিতে হবে, সঙ্গে অডিও ও সাবটাইটেল গ্রুপ রাখতে হবে। বর্তমান সম্পূর্ণ PHP নমুনায় এটি আছে। সীমাহীন HLS মাস্টার রেখে শুধু সংখ্যার সীমা কমালে ব্যান্ডউইথ বাঁচে না। SDK বাড়ানো সীমা অথবা প্রয়োজনীয় বিবরণ ছাড়া সীমিত FairPlay উত্তর প্রত্যাখ্যান করে। অন্য ব্যাকএন্ডে বিকল্প চালুর আগে একই চুক্তি বাস্তবায়ন করুন।

নেটিভ SDK বিকল্প

Apple Universal Player 1.0.0-beta.1 mobileMaximumHeight: 1080 গ্রহণ করে এবং শুধু নেটিভ ফোন শ্রেণিতে প্রয়োগ করে। এন্ডপয়েন্টকে ফিল্টার করা মাস্টার দিতে হবে, যা মিডিয়া লোডের আগে যাচাই হয়। Android 1.0.0-beta.1-এ WidevineCapabilities.playbackCapabilities-এর মধ্যে mobileMaximumHeight = 1080 দিন; ফোনে clientPlatform = "android", অন্য শ্রেণিতে স্পষ্টভাবে android-tablet বা android-tv ব্যবহার করুন। নতুন ডাউনলোডে একই ধরনের অফলাইন সামর্থ্যসীমা দিন। পুরোনো ডাউনলোড বজায় থাকে।

ইন্টিগ্রেশন যাচাই করুন

1080p, তার নিচের সংস্করণ ও UHD-সহ উৎস প্যাকেজ করুন। সীমা না দিলে চলে নিশ্চিত করুন।
ফোনে 1080 চালু করুন। অনুমোদনের সীমা, ফিল্টার করা মাস্টার, Auto/ম্যানুয়াল মেনু ও ডিকোড করা ভিডিওর মাপ দেখুন। কোনো অনুমোদিত নির্বাচন 1080p ছাড়াবে না।
সিক, মান বদল, অডিও, সাবটাইটেল, বিজ্ঞাপন ও প্লেলিস্টের পরের আইটেম পরীক্ষা করুন। প্লেব্যাক থামিয়ে সেশন মুক্ত হয়েছে নিশ্চিত করুন।
ডেস্কটপ ও ট্যাবলেটে একই বিকল্প দিন: শুধু ফোনের সীমা ওগুলোর সীমা কমাবে না। বর্তমান নীতি বা ডিভাইসের সীমা বহাল থাকে।

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

iPhone Safari-এ একই পূর্ণপর্দার কন্ট্রোল#

Web SDK 1.2.0-beta.4 পূর্ণপর্দায় Web Player-এর কন্ট্রোল রাখে, PHP বিজ্ঞাপন পেজেও। iPhone-এ সমর্থিত হলে এলিমেন্টের পূর্ণপর্দা ব্যবহার করে, নইলে পেজের মধ্যে প্লেয়ার বড় করে। ব্রাউজারের বার দেখা যেতে পারে। iPhone-এর আলাদা ভিডিও প্লেয়ারে যায় না। সব প্ল্যাটফর্মে মান, অডিও ভাষা ও সাবটাইটেলের জন্য একই সেটিংস মেনু ব্যবহার করুন।

অডিও ও সাবটাইটেলের নির্বাচন বর্তমান ট্র্যাকের অবস্থা দেখায় এবং নেটিভ HLS পরিবর্তন কার্যকর করলে হালনাগাদ হয়। CC বন্ধ করে আবার চালু করলে শেষ নির্বাচিত সাবটাইটেলের ভাষা থাকে। বিজ্ঞাপন চললে আলাদা কন্ট্রোল থাকে; কনটেন্ট চলা শুরু হলে স্বাভাবিক কন্ট্রোল ফিরে আসে।

মান, ভাষা ও বিজ্ঞাপন পরীক্ষা করুন#

সরাসরি ট্যাপ বা ক্লিক দিয়ে প্লেব্যাক শুরু করুন। ব্রাউজারের অটোপ্লে ও শব্দের নিয়ম বহাল থাকে।
সেটিংস খুলে বর্তমান মান, অডিও ও সাবটাইটেল দেখুন। Auto অনুমোদিত মানের স্তর ব্যবহার করে; হাতে নির্বাচন করে অনুমোদনের সীমা বাড়ানো যায় না।
অডিও ও সাবটাইটেলের ভাষা বেছে CC বন্ধ করে আবার চালু করুন। লেবেল সক্রিয় ট্র্যাক দেখায় এবং সাবটাইটেলের ভাষা থাকে নিশ্চিত করুন।
iPhone Safari ও Edge-এ পূর্ণপর্দায় যান। Web Player একই কন্ট্রোল রাখে; iPhone পেজের মধ্যে বড় হতে পারে এবং ব্রাউজার বার দেখা যেতে পারে।
বিজ্ঞাপন থাকলে কনটেন্টের আগে, মাঝে ও পরে বিরতি পরীক্ষা করুন, মান বদলসহ। PHP বিজ্ঞাপন পেজ পরীক্ষার জায়গা দেয়। অন্তর্ভুক্ত নমুনা বিজ্ঞাপন ও Google IMA আলাদা মোড; প্রতিটি সমর্থিত ব্রাউজারে বাছা সেবা লোড হয় নিশ্চিত করুন।

ব্যান্ডউইথের বিকল্পের জন্য শুধু ফোনের ঐচ্ছিক 1080p সীমা দেখুন। আগের UHD রাখতে মান সেট করবেন না। রেজল্যুশন সীমা স্থির বিটরেট বা শতকরা সাশ্রয় নিশ্চিত করে না।