hls.js
v1.5.18
HLS.JS هي مكتبة JavaScript التي تنفذ عميل HTTP Live Streaming. يعتمد على HTML5 الفيديو والملحقات MediaSource للتشغيل.
إنه يعمل عن طريق نقل تيار النقل MPEG-2 وتيارات AAC/MP3 في شظايا ISO BMFF (MP4). يتم تنفيذ Transmuxing بشكل غير متزامن باستخدام عامل ويب عندما يكون متاحًا في المتصفح. يدعم HLS.JS أيضًا HLS + FMP4 ، كما تم الإعلان عنه خلال WWDC2016.
يعمل HLS.JS مباشرةً فوق عنصر HTML <video> القياسي.
تتم كتابة HLS.JS في ECMASCRIPT6 ( *.js ) و typeScript ( *.ts ) (SuperSet المكتوبة بقوة من ES6) ، ونقلها في ECMASCRIPT5 باستخدام Babel ومترجم TypeScript.
يستخدم Rollup لبناء حزمة التوزيع وخدمة بيئة التنمية المحلية.
للحصول على تفاصيل حول تنسيق HLS ومعاني هذه العلامات ، راجع https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis
#EXT-X-STREAM-INF:<attribute-list> <URI>#EXT-X-MEDIA:<attribute-list>#EXT-X-SESSION-DATA:<attribute-list>#EXT-X-SESSION-KEY:<attribute-list> اختيار نظام المفاتيح والتحويل المسبق#EXT-X-START:TIME-OFFSET=<n>#EXT-X-CONTENT-STEERING:<attribute-list> توجيه المحتوى#EXT-X-DEFINE:<attribute-list> بديل متغير ( NAME,VALUE,QUERYPARAM ) #EXTM3U (تجاهل)#EXT-X-INDEPENDENT-SEGMENTS (تجاهل)#EXT-X-VERSION=<n> (يتم تجاهل القيمة)#EXTINF:<duration>,[<title>]#EXT-X-ENDLIST#EXT-X-MEDIA-SEQUENCE=<n>#EXT-X-TARGETDURATION=<n>#EXT-X-DISCONTINUITY#EXT-X-DISCONTINUITY-SEQUENCE=<n>#EXT-X-BITRATE#EXT-X-BYTERANGE=<n>[@<o>]#EXT-X-MAP:<attribute-list>#EXT-X-KEY:<attribute-list> ( KEYFORMAT="identity",METHOD=SAMPLE-AES يدعم فقط مع شرائح MPEG-2 TS)#EXT-X-PROGRAM-DATE-TIME:<attribute-list>#EXT-X-START:TIME-OFFSET=<n>#EXT-X-SERVER-CONTROL:<attribute-list>#EXT-X-PART-INF:PART-TARGET=<n>#EXT-X-PART:<attribute-list>#EXT-X-SKIP:<attribute-list> Delta Playlists#EXT-X-RENDITION-REPORT:<attribute-list>#EXT-X-DATERANGE:<attribute-list> metadata#EXT-X-DEFINE:<attribute-list> استيراد واستبدال المتغير ( NAME,VALUE,IMPORT,QUERYPARAM )#EXT-X-GAP (تتخطى شرائح الفجوة وقطع الغيار. تتخطى تشغيل برنامج غير محدد يحتوي فقط على محتوى الفجوة وليس بديلاً مناسبًا. انظر #2940)دعم الميزة المتوفرة ولكن في عداد المفقودين:
#EXT-X-PRELOAD-HINT:<attribute-list> (انظر #5074)للحصول على قائمة كاملة بالمشكلات ، راجع "الأولويات العليا" في علامة تبويب تخطيط الإصدار والتراكم. يعتمد دعم برنامج الترميز على بيئة وقت التشغيل (على سبيل المثال ، ليس كل المتصفحات على نفس نظام التشغيل تدعم HEVC).
#EXT-XI-FRAME-STREAM-INF -frame media files filesREQ-VIDEO-LAYOUT في التصفية أو الاختيار المتغيرSAMPLE-AES مع FMP4 ، AAC ، MP3 ، VTT ... شرائح (MPEG-2 TS فقط)require من وقت تشغيل node.jsيمكنك طلب هذه المكتبة بأمان في العقدة ولن يحدث شيء على الإطلاق . يتم تصدير كائن وهمية بحيث لا يلقي طلب المكتبة خطأ. HLS.JS غير قابل للاتصال في Node.js. انظر #1841 لمزيد من التفاصيل.
أولاً ، الخروج من المستودع وتثبيت التبعيات المطلوبة
git clone https://github.com/video-dev/hls.js.git
cd hls.js
# After cloning or pulling from the repository, make sure all dependencies are up-to-date
npm install ci
# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# After making changes run the sanity-check task to verify all checks before committing changes
npm run sanity-checkسيستضيف خادم DEV الملفات على المنفذ 8000. بمجرد بدء تشغيله ، يمكن العثور على العرض التوضيحي على http: // localhost: 8000/demo/.
قبل تقديم العلاقات العامة ، يرجى الاطلاع على إرشادات المساهمة الخاصة بنا. انضم إلى المناقشة حول Slack عبر الفيديو dev.org في #HLSJS للحصول على التحديثات والأسئلة حول التطوير.
قم ببناء جميع النكهات (مناسبة لـ Prod-Mode/CI):
npm install ci
npm run build
فقط القطع الأثرية وضع التصحيح:
npm run build:debug
بناء ومشاهدة (إعدادات DEV مخصصة حيث ستحتاج إلى استضافة من خلال خادم آخر - على سبيل المثال في وحدة/مشروع فرعي)
npm run build:watch
نكهة محددة فقط (التكوينات المعروفة هي: Debug ، Dist ، Light ، Light Dist ، Demo):
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
ملاحظة: تم تصميم التكوين "التجريبي" دائمًا.
ملاحظة: لا تتضمن ملفات hls.light.*.js بالإضافة إلى ذلك ، لا تتوفر الأنواع التالية في بناء الضوء:
AudioStreamControllerAudioTrackControllerCuesInterfaceEMEControllerSubtitleStreamControllerSubtitleTrackControllerTimelineControllerCmcdControllerRun Linter:
npm run lint
قم بتشغيل Linter مع وضع الإصلاح التلقائي:
npm run lint:fix
قم بتشغيل Linter مع أخطاء فقط (لا تحذيرات)
npm run lint:quiet
قم بتشغيل أجمل إلى رمز التنسيق
npm run prettier
قم بتشغيل الاختيار نوعًا للتحقق من أنواع TypeScript
npm run type-check
قم بإجراء جميع الاختبارات في وقت واحد:
npm test
تشغيل اختبارات الوحدة:
npm run test:unit
قم بتشغيل اختبارات الوحدة في وضع الساعة:
npm run test:unit:watch
تشغيل الاختبارات الوظيفية (التكامل):
npm run test:func
يمكن العثور على نظرة عامة على تصميم هذا المشروع ، وحداته ، والأحداث ، ومعالجة الأخطاء هنا.
ملاحظة يمكنك الوصول إلى مستندات لإصدار معين باستخدام "https://github.com/video-dev/hls.js/tree/deployments"
https://hlsjs.video-dev.org/demo
https://hlsjs-dev.video-dev.org/demo
ابحث عن الالتزام على https://github.com/video-dev/hls.js/tree/deployments.
HLS.JS متوافق فقط مع المستعرضات التي تدعم ملحقات MediaSource (MSE) API مع مدخلات "الفيديو/MP4" من نوع MIME.
HLS.JS مدعوم في:
وعد polyfill مطلوب في المتصفحات في عداد المفقودين دعم الوعد الأصلي.
يرجى الملاحظة:
تحتوي متصفحات Safari (iOS و iPados و MacOS) على دعم HLS مدمج من خلال عنوان URL "Tag" العادي "Tag". راجع المثال أدناه (باستخدام HLS.JS) لتشغيل اكتشاف الميزات المناسب والاختيار بين استخدام HLS.JS أو دعم HLS المدمج أصلاً.
عندما لا يكون للمنصة دعم MediSource أو HLS الأصلي ، لا يمكن للمتصفح تشغيل HLS.
ضع في اعتبارك أنه إذا كانت القصد من ذلك هو دعم HLS على منصات متعددة ، إلى جانب تلك المتوافقة مع HLS.JS ، يجب أن تتم دعم تدفقات HLS بصرامة لمواصفات RFC8216 ، خاصةً إذا تم دعم التطبيقات وأجهزة التلفزيون الذكية والمربعات المحددة.
ابحث عن مصفوفة دعم لـ MediaSource API هنا: https://developer.mozilla.org/en-us/docs/web/api/mediasource
يتم تضمين بنيات معبأة مع كل إصدار. أو تثبيت HLS.JS كاعتماد على مشروعك:
npm install --save hls.jsتتوفر قناة الكناري أيضًا إذا كنت تفضل العمل خارج فرع التطوير (Master):
npm install hls.js@canary
تشمل مباشرة dist/hls.js أو dist/hls.min.js في علامة البرنامج النصي على الصفحة. يعطي هذا الإعداد الأولوية للتشغيل HLS.JS MSE على دعم المتصفح الأصلي لتشغيل HLS في HTMLMediAelements:
< script src =" https://cdn.jsdelivr.net/npm/hls.js@1 " > </ script >
<!-- Or if you want the latest version from the main branch -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
< video id =" video " > </ video >
< script >
var video = document . getElementById ( 'video' ) ;
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' ;
if ( Hls . isSupported ( ) ) {
var hls = new Hls ( ) ;
hls . loadSource ( videoSrc ) ;
hls . attachMedia ( video ) ;
}
// HLS.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using HLS.js.
else if ( video . canPlayType ( 'application/vnd.apple.mpegurl' ) ) {
video . src = videoSrc ;
}
</ script > للتحقق من دعم المتصفح الأصلي أولاً ثم العودة إلى HLS.JS ، قم بتبديل هذه الشرطية. انظر هذا التعليق لفهم بعض المقايضات.
< script src =" https://cdn.jsdelivr.net/npm/hls.js@1 " > </ script >
<!-- Or if you want the latest version from the main branch -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
< video id =" video " > </ video >
< script >
var video = document . getElementById ( 'video' ) ;
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' ;
//
// First check for native browser HLS support
//
if ( video . canPlayType ( 'application/vnd.apple.mpegurl' ) ) {
video . src = videoSrc ;
//
// If no native HLS support, check if HLS.js is supported
//
} else if ( Hls . isSupported ( ) ) {
var hls = new Hls ( ) ;
hls . loadSource ( videoSrc ) ;
hls . attachMedia ( video ) ;
}
</ script > غالبًا ما يدفع ترميز HLS لملف الفيديو الأصلي وقت الإطار الأول قليلاً. إذا كنت تعتمد على وجود مطابقة دقيقة لأوقات الإطار بين الفيديو الأصلي ودفق HLS ، فأنت بحاجة إلى حساب هذا:
let tOffset = 0 ;
const getAppendedOffset = ( eventName , { frag } ) => {
if ( frag . type === 'main' && frag . sn !== 'initSegment' && frag . elementaryStreams . video ) {
const { start , startDTS , startPTS , maxStartPTS , elementaryStreams } = frag ;
tOffset = elementaryStreams . video . startPTS - start ;
hls . off ( Hls . Events . BUFFER_APPENDED , getAppendedOffset ) ;
console . log ( 'video timestamp offset:' , tOffset , { start , startDTS , startPTS , maxStartPTS , elementaryStreams } ) ;
}
}
hls . on ( Hls . Events . BUFFER_APPENDED , getAppendedOffset ) ;
// and account for this offset, for example like this:
const video = document . querySelector ( 'video' ) ;
video . addEventListener ( 'timeupdate' , ( ) => setTime ( Math . max ( 0 , video . currentTime - tOffset ) )
const seek = ( t ) => video . currentTime = t + tOffset ;
const getDuration = ( ) => video . duration - tOffset ;لمزيد من أمثلة التضمين و API ، انظر Docs/API.MD.
يجب تسليم جميع موارد HLS مع رؤوس CORS التي تسمح بطلبات GET طلبات.
يتم التحكم في الفيديو من خلال HTML <video> عنصر HTMLVideoElement ، والأحداث وعناصر التحكم في واجهة المستخدم الاختيارية ( <video controls> ).
يدمج اللاعبون التاليون HLS.JS لتشغيل HLS:
 | |||
| CDN77 | |||
مصنوع من Gramk ، يلعب HLS من شريط العناوين وروابط M3U8
تم إصدار HLS.JS بموجب ترخيص Apache 2.0
