How to integrate third party video player in lightning app

We need to integrate videojs player hosted on a public S3 folder in the lightning app. Can anyone help us with how to integrate it?

hi @techseria , in general I would say that importing external dependencies as ES6 modules (and bundling them up) has the preference, whenever possible.

Otherwise from a pure Lightning perspective there’s nothing against adding a script tag to the body and loading a remote library like that. Your mileage may vary depending on how and where you plan to deploy your App, though.

If you’re self hosting your App you are completely free to inject script tags (on the fly even) - as long as it’s supported by the target device. If you deploy on a distribution platform (for example the Metrological store), some restrictions may apply to what you can and cannot add to the document.

Hi @michiel

Thanks a lot for your comment. We just started building TV app in lighting. Our majority TV apps are built on React Native.

Can you guide us from where we can get documentation for lightning? As of now we have 2 or 3 github sample code and based on that we started building app along with learning.

Great! Welcome to Lightning then :slight_smile:
I suggest to start out with: LightningJS.io - Documentation and take it from there :slight_smile:

Hi @techseria,

Agree with @michiel , take a look at the documentation and see if it answers some of your questions.

There is a lot to be said about players in Lightning Apps - here we go.

Lightning SDK VideoPlayer

The Lightning SDK already includes a VideoPlayer plugin that you can use to play content; you can find some information in the documentation but also here. We always suggest to try to use the VideoPlayer plugin to play content, as it is a simple wrapper on top of the browser’s video tag. It can be configured to support HLS or DASH content - you can check out some code examples here and here.

Other player compatibility

If you really want to use an external player, please be aware that some devices/STBs run browsers that are not able to render HTML - they can only render the canvas and the video. Some external players rely on DOM manipulations that will not work on these devices, so please take that into consideration.

External JS script tags

As for how to include the player in your project, like @michiel said try to include it as a JS module.
If that is not possible and you need to include it as an external JS script, then there is something else you need to be aware: if your app is intended to be uploaded to the Metrological distribution network so that it can be used by operators around the world, then:

  • You will need to inject the script tag via JS instructions. This happens because, when you upload your project to the Metrological distribution network, you cannot send any HTML file with the externalJS script tag. As such, the script can only be injected as part of the app’s JS initialisation flow.
  • When you exit the app, you will need to manually remove the script tag and any window global scope added by the script.

On the other hand, if you intend to build the app and host it yourself outside of the Metrological environment, then you might not need to worry about this.

Validation

Many development teams that are new to Lightning assume that STBs have the same capabilities as a regular computer browser, but this is not true. You will find in this forum a lot of content on this subject, but STBs are much more limited devices and it is a good practice to validate if your app idea, or the code you have so far, actually works in an STB. In this case, you are welcome to ask for Metrological’s help by contacting our Help Desk. Specifically, you can create an App concepts and concept validation ticket, and we will do a quick sanity check to make sure the app works as you might expect.

I hope this was helpful.
Best regards,
Mauro