3

I am trying to use HTML5 video tag with knockout.js, here is my code sample:

function AppViewModel() {
     this.courseUrl= ("http//www.google.com");
     this.vidUrl= ("/video/myvid.mp4");
};
var vm = new AppViewModel();
ko.applyBindings(vm);

Here is my html code:

<video id="my_video" width="1000" height="500" autoplay>
    <source data-bind="attr: { src : vidUrl }">
</video>
<a data-bind="attr: { href: courseUrl }">Visit google</a>

As you can see from my code I am using same kind of code for calling a href and src of video. My href line works fine whereas src doesn't load the specified video (or any video) and it doesn't give any error.

Please let me know if I am not doing anything correctly.

TEMP SOLUTION:

For now, I am using normal js code to load video, this code is inside knockout's viewmodel function. This way I will have access to data coming through knockout variables. I haven't tested this thoroughly, but its working for now. My code now changes as follow:

 function AppViewModel() {
     this.courseUrl= ("http//www.google.com");
     var video =document.getElementById('my_video');
     video.src = "/video/myvid.mp4";
};

and html code is as follow:

<video id="my_video" width="640" height="480"  autoplay>

</video>
ankmachine
  • 73
  • 4
  • The code looks fine. Any errors on console? 404 maybe for video. – Dandy Apr 01 '16 at 11:47
  • nope, its doesn't give any error. That's why I am stuck, i have no clue what is not working. I have tested the video path by giving the path directly to src of video, it works fine. But when i try to pass it from kockoutjs it doesn't work. – ankmachine Apr 04 '16 at 03:22
  • Interesting. I can [repro the issue](https://jsfiddle.net/dqsjftst/), would've expected an error shown in the console because the mp4 cannot be loaded from the jsfiddle domain. Have you tried if you're experiencing [this issue](http://stackoverflow.com/q/14404367/419956)? – Jeroen Apr 04 '16 at 06:00
  • no I am not facing that issue, i am working on chrome and i am not getting the error the user was getting in that issue. I was going through inspect page, it shows me this , this means its binding properly, just not displaying. Or am i wrong ? – ankmachine Apr 04 '16 at 07:57

0 Answers0