Video and Dynamic Pages

Hi Everyone!

I have been struggling for a few days to find the best combinations of components for my company’s subscription educational video service outside of the Wix Video option – which won’t work based on what you will see below. Here’s what I have so far:

  • a video library hosted in AWS’s S3 and distributed through Cloudfront URL’s
    • files in both .mp4 and HLS format
  • a dynamic page connected to a dataset that inlcludes several fields which are mostly text based and one field that I have setup as URL where I plan to put these links I’ve created
    I have tried to embed the javascript player - Playable ( https://wix.github.io/playable/ ) in the dynamic page in order to play the videos, but I have the problem of not knowing how to use the same video player fixed on the page while changing the video source on every subsequent page (via the link from database/dataset).
    I am up for any good suggestions - even different video players (like Wix’s) or other suggestions that would make this workflow easier. Each of the video players that were available in the Wix Market would not let me use these links dynamically, as far as I can tell. The reason I would like to use dynamic pages is because we have several pieces of data that go along with each video and we ultimately will have about 650 videos so having to recreate each page sounds daunting and I know there must be a way to make this work!

Thank you in advance!
Jim Szewc
Cohesion Education

Hello Jim,

  1. Add a video upload element from the Wix Editor to the page - like so

  1. There are two ways you can proceed now.

Either the way you are doing now using a URL and setting the src property to the URL for the item via code.

let url = $w('#dynamicRepeater).getCurrentItem().videoField;

$w('#uploadVideo').src = url;

PS. You would put this in the onDatasetReady event.


Or changing the field in the database to be of type video and connecting the video without code - like so

Best,
Majd

Thank you so much for the response Majd! A tried this verbatim and also with what I thought I needed to replace and I didn’t have much luck. First of all, when I add the Wix Video - Video Upload single player, I don’t have the option to connect to a dataset. Maybe I’m missing something? As for the first option using WIX Code, I replaced the following:
(‘#dynamicRepeater’) with (‘dynamicDataset’)
videoField with URL (the name of the field in my collection with URL’s for my CloudFront videos)

I added the onReady code based on what I found in WixCode:
$w(“#dynamicDataset”).onReady( () => { console.log(“The dataset is ready”); } );
let url = $w(’ #dynamicDataset ).getCurrentItem().url; $w(’ #uploadVideo ').src = url;

I’m not sure what I did wrong, but any help would be much appreciated!

Hello,

Make sure developer tools is turned on, as for the second point:

I was mistaken, apologies, the correct way to set the source is with videoUrl as seen here:
https://www.wix.com/code/reference/$w.Video.html#videoUrl

Try it out and let me know if this works,
Majd

I can’t believe i haven’t figured this out yet! I have tried bringing in several different javascript and HTML video players and still have no luck. I know I am just missing something simple. Again, I have a videoUrl field in my data collection that is attached to a dynamic page. I’d like the video source, the URL to change with each different page as I have a URL in the collection for each. I’ve tried the suggestions above but nothing seems to bring my video to the screen. Maybe it’s the player? The code?

Here’s what I have in code:

$w.onReady(() => {
$w(“#dynamicDataset”).onReady(() => {
let url = $w(‘#dynamicDataset’).getCurrentItem().videoUrl;
$w(‘#html3’).src = url;

ON the player side I have (this is just the code for one of them, although if I could make Wix video player work I would.

Any additional help would be much appreciated!

Jim

The second way does not work when there is no video url in the content manager. The Wix default video will play instead of not showing anything! - Could anyone advise how to remove the default wix video when there is no video url on the dynamic page please?