KnockoutJS and VideoJS Not Working Together

svengeance commented 7 years ago

Description

Briefly describe the issue. When using a foreach loop on an array to spawn videos using VideoJS, the video no longer functions as expected. Included in the test case are Knockout-spawned videos with and without tags, as well as a normally-functioning video without a source tag, and 3 buttons to attempt to switch the sources of each.

Minimal Test Case: https://shifty.site/uploads/files/test.html

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

Create an array within a viewmodel from Knockout
Set up a loop through the array
Try to play the videos

Results

Expected

The video to work.

Actual

Video is stick and not able to be interacted with -- black screen with the play button.

Error output

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. Object { code: 4, message: "No compatible source was found for …" }

Additional Information

videojs

5.8.8

browsers

Firefox & Chrome

OSes

Windows

plugins

No

brandonocasey commented 7 years ago

Hi @SteveV0189! Is there any way that you can provide a reduced test case showing the issue in isolation? We have a starter template on JSBin for these kinds of things. It is hard to find out what is going on by just looking at the page.

svengeance commented 7 years ago

@BrandonOCasey http://jsbin.com/jeboxadano/1/edit?html,console,output

That's about as reduced as I can get it while still showing the functionality I'm missing that this library should theoretically provide.

Knockout doesn't render the

I've demonstrated that there are two separate errors when trying to use Knockout -- as you can see, one video errors out, saying "No compatible source was found for this media", and the other one (the second video) appears to load correctly, but the controls will not work, and manually calling .play() will not play the video.

The three buttons up top attempt to set the source to a .webm url. It works with the last video, which is loaded without Knockout.

Edit http://jsbin.com/yexiwigaru/1/edit?html,output I've also thrown in a regular HTML5

gkatsev commented 7 years ago

It looks like you need to move away from using data-setup and instead initialize the player manually. See https://github.com/videojs/video.js/blob/master/docs/guides/setup.md#manual-setup for more info.

svengeance commented 7 years ago

http://jsbin.com/lerajugobi/edit?html,console,output

Is there something in there that you see is incorrect? I still get a generic "Error: Videojs" in the console. This does look like the solution I need though, thank you!

Does it have anything to do with the tech being undefined?

svengeance commented 7 years ago

Fix was to initialize the video at the end of the script, after applying knockout's viewModel to the page. Thanks for the help guys!

http://jsbin.com/yogubaxatu/edit?html,console,output

videojs / video.js