Unique JS Video Player for Each Record?

API & Customization Ask Developers
1

Hi All,

I've been struggling with this for a while now. I am trying to add a JS video player to each of my records - each player requires some unique information so that they show different video URL's, and different thumbnails.

I have managed to make it work (to en extent) on the following link:

https://bouncepost.knack.com/demo-portal#demo-masters-copy/

This uses the following code to lazy load the script:

KnackInitAsync = function ($, callback) {
 // REQUIRED: Explicitly include jQuery
 window.$ = $;
 // Load the file from wherever it is hosted
 LazyLoad.js(['https://content.jwplatform.com/libraries/d6WRU5FT.js'], function () {
 console.log('Loaded external files!');
 callback();
 });
};

I am then using the following code in a text formula field to create a Unique video for each record:

<div id="dynamic{Clip ID}"></div>
<script type="text/javascript">
var playerInstance = jwplayer("dynamic{Clip ID}");
var videourl = "https://s3-eu-west-1.amazonaws.com/bounce-website-assets/demo/MP4/{File Name}.mp4";
var thumbnail = "https://s3-eu-west-1.amazonaws.com/bounce-website-assets/demo/Thumbnails/{File Name}.0000000.png";
playerInstance.setup({file: videourl,image: thumbnail});
</script>

The problem I have - Because I have <script> tags inside my text formula fields, it pretty much breaks the backend design view of knack. And I am quite often not able to add the field text formula field onto table views or details views.

My question is, am I able to dynamically create a unique script for each record and only run the JS on the app side so it loads all the video players using an event handler?

Many thanks in advance!!

Richard