Vue.js
Quick Start | Integrate SDK to Radiant Media Player(RMP) via Vue.js
Include player script
In public/index.html
file, add RMP
as an external library.
<head>
...
<script src="https://cdn.radiantmediatechs.com/rmp/9.6.8/js/rmp.min.js"></script>
</head>
Include config script
In index.html
, append config script file to the tail part of <head>
tag.
<head>
...
<script src="https://sdkjs.fusioncdn.com/{CLIENT_ID}-mlysdk.js"></script>
</head>
Install SDK
Install the bundled package.
npm install @mlytics/p2sp-sdk
Install babel plugin
Install the latest babel plugin.
npm install @babel/plugin-proposal-private-methods --save-dev
Update babel.config.js
file to your project's root directory. Then, paste the following code:
module.exports = {
...
plugins: [
'@babel/plugin-proposal-private-methods'
]
}
Bind SDK
Add RMP
into our SDK. To do this, use RadiantMPHlsPlugin.register()
from SDK module. Here's an example showing how you could register the RMP
:
import {RadiantMPHlsPlugin} from '@mlytics/p2sp-sdk/driver/peripheral/player/rmp/streaming/hls/bundle';
RadiantMPHlsPlugin.register(window.RadiantMP);
Initialize SDK
When page is loading, call driver.initialize()
first. Here's an example showing how you could initialize SDK with JavaScript.
<template>
<Player />
</template>
<script>
import {driver} from '@mlytics/p2sp-sdk/driver/peripheral/player/rmp/streaming/hls/bundle';
import Player from './components/Player.vue';
export default {
name: 'App',
components: {
Player
},
beforeMount() {
driver.initialize();
}
};
</script>
Create player adapter
In order to use SDK to download the video, we need to build the RMP
instance by SDK RMP
Plugin.
Call driver.extensions.RadiantMPHlsPlayerPlugin.create()
to build a player adapter, passing the same arguments as you would when creating a RMP
instance.
You may receive RMP
instance by calling adapter.player
. Here's an example showing how you could create player adapter with JavaScript.
<template>
<div id="video" style="width: 100%; maxWidth: 800px"></div>
</template>
<script>
import {driver} from '@mlytics/p2sp-sdk/driver/peripheral/player/rmp/streaming/hls/bundle';
export default {
name: 'Player',
data() {
return {
player: null
}
},
mounted() {
const adapter = driver.extensions.RadiantMPHlsPlayerPlugin.create(video, {
elementID: 'video',
playerOptions: {
src: {
hls: '{PLAYLIST_URL}'
},
licenseKey: '{LICENSE_KEY}',
autoplay: true,
width: 640,
height: 360
}
});
this.player = adapter.player;
},
beforeUnmount() {
if (this.player) {
this.player.dispose();
}
}
};
</script>
After video played, you can check out streaming analytics at our portal.
Full example
See Demo
Updated 5 months ago