Data-binding options:

• disabled
• fullScreenButtonVisible
• showControlsOnHover

Example:

In this example, the ViewModel is defined specifically for use with the video player. It has disabled, fullScreenButtonVisible and showControlsOnHover properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them. The video player in this example shows the full screen button and displays player controls when a user hovers over the video.

Create a ViewModel:

var viewModel = function () {         
   var self = this;         
   self.disabled = ko.observable(false);         
   self.fullScreenButtonVisible = ko.observable(true); 
   self.showControlsOnHover = ko.observable(true);
};

Create View with Bound Controls:

<video controls="controls" id="vid1" width="720" height="486" data-bind="wijvideo: { 
    disabled: disabled, 
    fullScreenButtonVisible: fullScreenButtonVisible, 
    showControlsOnHover: showControlsOnHover }">
        <source src="http://cdn.wijmo.com/movies/wijmo.theora.ogv"
            type='video/ogg; codecs="theora, vorbis"'>                 
        <source src="http://cdn.wijmo.com/movies/wijmo.mp4video.mp4" 
            type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>     
</video>

See Also

Widgets

Concepts

Reference