HTML5 video controls are not working when using with knockout component

[engrsandeep]

Hi,

I have used HTML5 Video tag in component, There are 3 strange things happening

1. Video native controls do not work.
2. Not able to control video even from component model
3. If skip video then no video on page but its sound still comes.

Can you please provide any thought on this. its bit urgent for us.

Thank you.

[IanYates]

Questions:

1. Which browser(s)?
2. Are you able to try the video tag when it's not in a component, even if just temporarily on your page?
3. Do you have any of your component's view model code accessing the video tag?
4. Can you please post some of the html? I'm wondering how you're data-binding the video tag.

I don't know of Knockout doing anything special to make video work or not work so it may not even be a knockout issue - by that I mean your code could be broken anyway, or you're data-binding the video tag in such a way that if you wrote equivalent jquery to set the tag up it'd also be broken.

Knowing a bit more about your environment and how you're getting the video tag onto the page should help.

[engrsandeep]

1. I have tried google chrome, firefox.
2. Video tag working fine when its not in component or with any binding.
3. Yes i have view model to access video tag
4. Please find below html, I can share full example if you need to check

[engrsandeep]

<div id="content-container" class="page-bg" data-bind="css:templateName,bgImage:bgImage">
    <video id="introVideo" width="100%" height="100%" autoplay="autoplay" controls="controls" data-bind="visible:!isVideoEnded(),event:{ended:videoEnded}">
      <source src="data/images/intro.mp4" type="video/mp4"> </source>
    </video>
</div>

[IanYates]

Thanks for the code.

As a quick test, if you remove the data-bind attribute from the <video> tag, does it now work?

Can you stick <span data-bind="text: isVideoEnded() ? 'ended' : 'not ended'"></span> somewhere on the page (within the same $data scope) so that you can see if the visible binding is perhaps being triggered a bit too early?

I'd also stick a console.log(..) call in my videoEnded event handler so you can spot when it's being called.

(apologies if you've already tried the above)

[engrsandeep]

Yes, I have tried all the possible combinations, This work fine when i put outside of knockout component. Right now this is getting loaded inside knockout component. I will share a link with you shortly to check, if you like.

[IanYates]

So, you've tried it from within a component with the data-bind attribute taken away from the <video> tag?

Also, 3.Yes i have view model to access video tag - does this mean you have some javascript in your view model digging into the view to find the <video> tag and manipulating it? If so, what sort of code is that?

[engrsandeep]

<video id="introVideo" width="100%" height="100%" autoplay="autoplay" controls="controls" data-bind="visible:!isVideoEnded(),event:{ended:videoEnded}">

There was only 2-3 thing in view model. one is ended event listener, and one observable property isVideoEnded basically.

Anyway, i have solved problem by inserting video tag by jquery(don't wanted to use jQuery) in required element and it working fine.

I will create demo sample in sometime and share.