クイックスタート

このクイックスタートでは、Web ページの作成、wijvideo ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。

メモ帳で、新しい HTML ページを作成するには、次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

CDN から最新の依存ファイルを参照するには、wijmo cdnを確認してください。これらを HTML ページの <head> タグ内に追加します。たとえば、次のようになります。

ドロップダウンからリファレンスをコピーして head タグ内に貼り付けます

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script>

<body> タグ内に、次のようにマークアップを追加します。<video> 要素はビデオウィジェットを作成し、その id オプションは 'vid1' に設定され、それを jQuery スクリプトに呼び出してウィジェットを初期化します。ここで、ビデオプレーヤーの高さと幅を設定し、ビデオ用のスペースをページに割り当てます。<source> 要素は２種類の代替フォーマットを設定します。ブラウザは最初に認識されたフォーマットを使用します。<video> 要素にテキストを追加し、HTML5 をサポートしないブラウザで表示することもできます。

ドロップダウンからマークアップをコピーして body タグ内に貼り付けます

マークアップ	コードのコピー
<video controls="controls" id="vid1" width="400" height="275"> <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"'> HTML5 is required to see this video. </video>

<head> タグ内の参照の下に、次のスクリプトを追加して jQuery ウィジェットを初期化します。

ユーザーがビデオをフルスクリーンに拡張できるボタンが非表示になります。
コントロールは、ユーザーがプレーヤーの上にマウスポインタを置いたときだけではなく、常に表示されるように設定されます。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。wijvideo ウィジェットは、次のように表示されます。生成ボタンを押下してビデオを生成できます。

関連トピック

参照