KO Video バインディング

データバインディングのオプション：

disabled
fullScreenButtonVisible
showControlsOnHover

例：

この例では、ビデオプレーヤーと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、fullScreenButtonVisible、および showControlsOnHover プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。この例のビデオプレーヤーには全画面ボタンが表示され、ユーザーがビデオ上にマウスポインタを移動すると、プレーヤーコントロールが表示されます。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.fullScreenButtonVisible = ko.observable(true); self.showControlsOnHover = ko.observable(true); };

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<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>

ビューのマークアップ

コードのコピー

<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>

関連トピック

参照