このレッスンでは、ビデオプレーヤーを作成します。このため、モデリングにはCSS3を使用し、機能にはライブラリ「MediaElement.js」を使用します。 MediaElement.jsは、FlashおよびSilverlightを使用してMediaElement HTML5 APIをシミュレートする古いブラウザーで動作するHTML5オーディオおよびビデオプレーヤーです。
デモオプション
ソースファイル
ステップ1-MediaElement.jsをダウンロードする
まず、 「MediaElement.js」をダウンロードして解凍する必要があります。 「build」フォルダーから、次の3つのファイルが必要です。
- flashmediaelement.swf
- mediaelement-and-player.min.js
- silverlightmediaelement.xap
これら3つのファイルを1つのディレクトリにコピーし、このフォルダーに「js」という名前を付けます。
ステップ2-HTMLマークアップ
次に、jQueryライブラリーへのリンクを設定する必要があります。 次に、スクリプト「mediaelement-and-player.min.js」をリンクに追加し、CSSファイルを追加します。
<head> <title>Video Player</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="css/style.css" media="screen"> </head>
動画プレーヤーを作成するには、新しいHTML5動画タグが必要です。 次に、このタグにビデオの幅と高さ、および「カバー」という属性を追加します。 ユーザーが再生ボタンをクリックするまで、ビデオが開始する前に表紙（画像）を表示できます。
<video width="640" height="267" poster="media/cars.png"> <source src="media/cars.mp4" type="video/mp4"> </video>
次に、コントロールボタンに次のコードを追加し、いくつかの設定を設定する必要があります。
- alwaysShowControls-常にコントロールボタンを表示するか、ホバリング時にのみ表示します
- videoVolume-ボリュームスライダー
- 機能：['playpause'、 'progress'、 'volume'、 'fullscreen'] -ビデオコントロールボタン
「MediaElement.js」公式ドキュメント
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('video').mediaelementplayer({ alwaysShowControls: true, videoVolume: 'horizontal', features: ['playpause','progress','volume','fullscreen'] }); }); // ]]></script>
ステップ3-基本スタイル
いくつかのスタイルを追加することから始めましょう。
.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span, .mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border: none; outline: none; }
次に、ビデオブロックの全体的なスタイルを設定します。 すべてのCSSプロパティを使用して、ビデオブロックのレイアウトを作成します。 これにより、ビデオ自体に特別なスタイルは作成されません。すべての要素を適切な場所に配置するだけです。
.mejs-container { position: relative; background: #000000; } .mejs-inner { position: relative; width: inherit; height: inherit; } .me-plugin { position: absolute; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed, .mejs-embed body, .mejs-mediaelement { width: 100%; height: 100%; } .mejs-embed, .mejs-embed body { margin: 0; padding: 0; overflow: hidden; } .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-background, .mejs-mediaelement, .mejs-poster, .mejs-overlay { position: absolute; top: 0; left: 0; } .mejs-poster img { display: block; }
ステップ4-コントロールユニット
プレーヤーの中央に大きな再生ボタンを追加しましょう。
.mejs-overlay-play { cursor: pointer; } .mejs-inner .mejs-overlay-button { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat; }
下からのビデオでブロックを配置し、高さを34pxに設定し、背景色を追加します。 RGBAを使用して背景を透明にすることをお勧めしますが、RGBAは古いブラウザーではサポートされていないため、RGBも追加します。 次に、共通のスタイルとスプライト画像でいくつかのコントロールボタンを設定します。
.mejs-container .mejs-controls { position: absolute; width: 100%; height: 34px; left: 0; bottom: 0; background: rgb(0,0,0); background: rgba(0,0,0, .7); } .mejs-controls .mejs-button button { display: block; cursor: pointer; width: 16px; height: 16px; background: transparent url(../img/controls.png); }
ステップ5-ビデオ制御ボタン
次に、コントロールユニットの各ボタンの位置を変更し、すべてのボタンの幅と高さを設定し、背景画像の位置を変更する必要があります。
.mejs-controls div.mejs-playpause-button { position: absolute; top: 12px; left: 15px; } .mejs-controls .mejs-play button, .mejs-controls .mejs-pause button { width: 12px; height: 12px; background-position: 0 0; } .mejs-controls .mejs-pause button { background-position: 0 -12px; } .mejs-controls div.mejs-volume-button { position: absolute; top: 12px; left: 45px; } .mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button { width: 14px; height: 12px; background-position: -12px 0; } .mejs-controls .mejs-unmute button { background-position: -12px -12px; } .mejs-controls div.mejs-fullscreen-button { position: absolute; top: 7px; right: 7px; } .mejs-controls .mejs-fullscreen-button button, .mejs-controls .mejs-unfullscreen button { width: 27px; height: 22px; background-position: -26px 0; } .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }
ステップ6-ボリュームスライダー
ボリュームスライダーのスタイルを設定し、場所を変更してから、角の丸い幅と高さの値を追加します。
.mejs-controls div.mejs-horizontal-volume-slider { position: absolute; cursor: pointer; top: 15px; left: 65px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { width: 60px; background: #d6d6d6; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; width: 0; top: 0; left: 0; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { height: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
ステップ7-インジケーターの表示
コントロールユニットの上部に表示インジケータを配置し、各状態の背景色（フルスケールと読み込み時間）を追加します。 幅を0に設定します。これは、ムービーのダウンロード時に自動的に更新されます。
.mejs-controls div.mejs-time-rail { position: absolute; width: 100%; left: 0; top: -10px; } .mejs-controls .mejs-time-rail span { position: absolute; display: block; cursor: pointer; width: 100%; height: 10px; top: 0; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-total { background: rgb(152,152,152); background: rgba(152,152,152, .5); } .mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgb(0,0,0); background: rgba(0,0,0, .3); } .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }
ステップ8-表示用のマーカーと時間インジケーター
この時点で、マウスをポイントしたときに現在の時刻を表示するビューバーとツールチップのマーカーを追加します。 次に、それらに位置を与え、背景画像を追加し、幅と高さを設定し、いくつかの活版印刷スタイルを追加する必要があります。
.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute; cursor: pointer; width: 16px; height: 18px; top: -3px; background: url(../img/handle.png); } .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; width: 33px; height: 23px; top: -26px; margin-left: -17px; background: url(../img/tooltip.png); } .mejs-controls .mejs-time-rail .mejs-time-float-current { position: absolute; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #666666; text-align: center; } .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }
ステップ9-CSS3グラデーション
表示スケールと音量コントロールで使用される緑のCSS3グラデーションを追加するだけです。
.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: #82d344; background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); background: linear-gradient(top, #82d344 0%, #51af34 100%); }
デモオプション
ソースファイル