Vue is a popular JavaScript progressive framework to build modern web user interfaces.
Radiant Media Player can easily be used in a Vue app - in this guide we will review how.
We support the following environment for using Radiant Media Player with Vue framework:
While it is possible that Radiant Media Player would work with previous versions of Vue, those versions have not been tested by us.
First you will need to install Vue:
npm init vue@latest
For the purpose of this guide we called our app "vue-project", so let's verify it is working as expected before adding our player:
cd vue-project npm install npm run dev
At http://localhost:3000/ we can now see the demo Vue 3 app.
In this guide we will install Radiant Media Player, cloud-player version, as an external library to our Vue project. More precisely we will install it as part of a Vue component so that the player only loads when that component is used.
First we open file src > components > HelloWorld.vue and we add our player container in the <template> section:
<template> ... <div id="rmp"></div> </template>
Always in the same file src > components > HelloWorld.vue we now add a <script> tag. In this <script> tag we will dynamically load our player and configure it in the
mounted hook of our component:
<script>
export default {
mounted() {
// When Radiant Media Player library is loaded we init our player
const _onLoadAppendPlayer = function () {
const elementID = 'rmp';
const src = {
hls: 'https://your-hls-url'
};
const settings = {
licenseKey: 'your-license-key',
src: src,
width: 640,
height: 360
};
const rmp = new RadiantMP(elementID);
rmp.init(settings);
};
// If Radiant Media Player library fails to load we do something
const _onErrorLog = function () {
console.log('could not load Radiant Media Player JavaScript file');
};
// We create our script tag to async load Radiant Media Player library and append it to <head>
const rmpScript = document.createElement('script');
rmpScript.src = 'https://cdn.radiantmediatechs.com/rmp/9.15.3/js/rmp.min.js';
rmpScript.async = true;
rmpScript.addEventListener('load', _onLoadAppendPlayer);
rmpScript.addEventListener('error', _onErrorLog);
document.head.appendChild(rmpScript);
}
}
</script>
We can now run npm run dev to check our application in a browser. You should now see Radiant Media Player in the demo Vue app now.
©2015-2024 Radiant Media Player. All Rights Reserved.