Documentation

Working With Vue

Get started with Vue

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.

Scope of support

We support the following environment for using Radiant Media Player with Vue framework:

  • Vue 3+

While it is possible that Radiant Media Player would work with previous versions of Vue, those versions have not been tested by us.

Creating our sample Vue app

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.

Installing Radiant Media Player in a Vue 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/7.11.5/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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2022 Radiant Media Player. All Rights Reserved.