代码拉取完成，页面将自动刷新
Join the discussion on Slack#hlsjs
hls.js is a JavaScript library which implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.
It works by transmuxing MPEG-2 Transport Stream and AAC/MP3 streams into ISO BMFF (MP4) fragments. This transmuxing could be performed asynchronously using Web Worker if available in the browser. hls.js also supports HLS + fmp4, as announced during WWDC2016
hls.js does not need any player, it works directly on top of a standard HTML<video>element.
hls.js is written in ECMAScript6, and transpiled in ECMAScript5 using Babel.
API and code documention: http://video-dev.github.io/hls.js/docs/html
Find a more detailed library usage guide, use-cases and example here
https://video-dev.github.io/hls.js/demo
https://video-dev.github.io/hls.js/demo?canary=true
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// 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 throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
Video is controlled through HTML <video> element.
HTMLVideoElement control and events could be used seamlessly.
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
hls.js is (being) integrated in the following players:
made by gramk, plays hls from address bar and m3u8 links
No external JS libs are needed. Prepackaged build is included in the dist folder:
If you want to bundle the application yourself, use node
npm install hls.js
or for the version from master (canary)
npm install hls.js@canary
NOTE: hls.light.*.js dist files do not include subtitling and alternate-audio features.
Either directly include dist/hls.js or dist/hls.min.js
Or type
npm install --save hls.js
Optionally there is a declaration file available to help with code completion and hinting within your IDE for the hls.js api
npm install --save-dev @types/hls.js
hls.js is compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mimetypes inputs.
Find a support matrix of the MediaSource API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
As of today, it is supported on:
Please note: iOS Safari "Mobile" does not support the MediaSource API. Safari browsers have however built-in HLS support through the plain video "tag" source URL. See the example above (Getting Started) to run appropriate feature detection and choose between using Hls.js or natively built-in HLS support.
When a platform has neither MediaSource nor native HLS support, you will not be able to play HLS.
All HLS resources must be delivered with CORS headers permitting GET requests.
#EXTM3U#EXTINF#EXT-X-STREAM-INF (adaptive streaming)#EXT-X-ENDLIST (Live playlist)#EXT-X-MEDIA-SEQUENCE#EXT-X-TARGETDURATION#EXT-X-DISCONTINUITY#EXT-X-DISCONTINUITY-SEQUENCE#EXT-X-BYTERANGE#EXT-X-MAP#EXT-X-KEY (https://tools.ietf.org/html/draft-pantos-http-live-streaming-08#section-3.4.4)#EXT-X-PROGRAM-DATE-TIME (https://tools.ietf.org/html/draft-pantos-http-live-streaming-18#section-4.3.2.6)EXT-X-START:TIME-OFFSET=x (https://tools.ietf.org/html/draft-pantos-http-live-streaming-18#section-4.3.5.2)hls.js is released under Apache 2.0 License
Pull requests are welcome. Here is a quick guide on how to start.
git clone https://github.com/video-dev/hls.js.git
# setup dev environement
cd hls.js
npm install
# build dist/hls.js, watch file change for rebuild and launch demo page
npm run dev
# lint
npm run lint
.editorconfig file.dist/hls.js file in your PR. We'll take care of generating an updated build right before releasing a new tagged version.Click here for details.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手