HTML
Quick Start | Integrate SDK to HLS.js via browser
Install HLS.js
Include the latest HLS.js
script.
We are currently supporting
HLS.js
of which version should bev1.5.7
or above.
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
Install SDK
Include the pre-built bundled scripts.
<script src="https://sdkjs.fusioncdn.com/{CLIENT_ID}-mlysdk.js"></script>
<script src="https://jsdelivr.fusioncdn.com/npm/@mlytics/p2sp-sdk@latest/bundle/driver.min.js"></script>
<script src="https://jsdelivr.fusioncdn.com/npm/@mlytics/p2sp-sdk@latest/bundle/peripheral/player/hlsjs-hls.min.js"></script>
Or include SDK with specific version as following script.
<script src="https://sdkjs.fusioncdn.com/{CLIENT_ID}-mlysdk.js"></script>
<script src="https://jsdelivr.fusioncdn.com/npm/@mlytics/p2sp-sdk@{SDK_VERSOIN}/bundle/driver.min.js"></script>
<script src="https://jsdelivr.fusioncdn.com/npm/@mlytics/p2sp-sdk@{SDK_VERSOIN}/bundle/peripheral/player/hlsjs-hls.min.js"></script>
Initialize SDK
To initialize SDK, we need to call mlysdk.driver.initialize()
first. Here's an example showing how you could initialize SDK with JavaScript.
const driver = mlysdk.driver.initialize();
Create player adapter
In order to use SDK to download the video, we need to build the HLS.js
instance by SDK HLS.js
Plugin.
Call driver.extensions.HlsjsHlsPlayerPlugin.create()
to build a player adapter.
You may receive HLS.js
instance by calling adapter.protocol
. Here's an example showing how you could create player adapter with JavaScript.
var src = 'PLAYLIST_URL';
var video = document.getElementById('video');
const adapter = driver.extensions.HlsjsHlsPlayerPlugin.create({
url: src,
element: video
});
const hls = adapter.protocol;
Now start the service and try to watch request logs in a browser. You could find that the domains in urls of .m3u8
and .ts
files, video player seeks for, would be one of the CDN domains in stream settings rather than the origin domain.
Full example
See Demo
Updated 4 months ago