简介HTML5的标签已经被目前大多数主流浏览器所支持，包括还未正式发布的IE9也声明将支持标签，利用浏览器原生特性嵌入视频有很多好处，所以很多开发者想尽快用上，但是真正使用前还有些问题要考虑，尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题，Google几个月前发布的开源视频编码VP8有望能解决这一问题，另外Google还发布了开放网络媒体项目WebM，旨在帮助开发者为开放网络制作出世界级媒体格式，Opera, Firefox, Chrome和IE9都将支持VP8，而且Flash Player也将可以播放VP8，这就意味着我们很快就可以只制作一个版本的视频然后在所有主流浏览器上播放了。另外一个主要的问题就是如何构建自定义的HTML5播放器，这是目前Flash Player的优势所在，利用Flash的IDE所提供的接口可以很方便的构建一个个性化的视频播放器，那HTML5的标签要怎样才能实现呢？这个问题就是本文所要解决的！我们将开发一个HTML5视频播放器的jQuery插件，并且可以很方便的进行自定义，将分为以下几个部分：1.视频控制工具条2.视频控制按钮3.打包成jQuery插件4.外观和体验5.自定义皮肤视频控制工具条做为一个专业的web开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致(consistent)，但是通过下面的图可以看到目前各个浏览器提供的视频控制工具条外观各不相同：那就没办法了，我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。视频控制按钮基本的视频控制工具条要包含一个播放/暂停按钮，一个进度条，一个计时器和一个音量控制按钮，我们将这些按钮放在元素下面，并用一个div作为父容器： 00:00 复制代码 注意，我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。打包成jQuery插件创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下： $.fn.gVideo = function(options) { // build main options before element iteration var defaults = { theme: 'simpledark', childtheme: '' }; var options = $.extend(defaults, options); // iterate and reformat each matched element return this.each(function() { var $gVideo = $(this); //create html structure //main wrapper var $video_wrap = $('').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme); //controls wraper var $video_controls = $('00:00'); ($video_controls); コードをコピー これはこの記事には含まれていないため、上記のスクリプトでは説明の範囲内です。 jQuery を使用してビデオ コントロール ツールバーの要素を動的に作成します。 次に、イベントをバインドするために、対応する要素を取得する必要があります: //新しく作成された要素を取得します var $video_container = $gVideo.parent ('.ghinda-video-player'); var $video_controls = $('.ghinda-video-controls', $video_container); var $ghinda_play_btn = $('. ghinda-video-play', $ video_container); var $ghinda_video_seek = $('.ghinda-video-seek', $video_container); var $ghinda_video_timer = $('.ghinda-video-timer', $video_container); var $ghinda_volume = $('.ghinda-volume-slider', $video_container); var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container); $ video_controls.hide();コントロールを非表示にしておきます コードをコピーします ここでは、className を通じて取得します。まず、すべてのリソースが読み込まれるまでツールバーを非表示にします: var gPlay = function() { (); $gVideo.bind('play', function() { $ghinda_play_ btn.addClass('ghinda-paused-button'); $ghinda_play_btn.removeClass( 'ghinda-pa used-button '); }); $gVideo.bind('ended', function() { $ghinda_play_btn.removeClass('ghinda-paused-button'); }); コードをコピー ほとんどのブラウザでは、ビデオを右クリックすると独立したメニューが表示され、ユーザーがこの右クリック メニューを通じてビデオを制御すると、カスタム コントロールと競合します。ビデオプレーヤー自体の「再生」、「一時停止」、「終了」イベントをバインドし、イベントハンドラー関数で再生/一時停止ボタンを処理し、ボタンのスタイルを制御する必要があります。 進行状況バーのドラッグ ブロックを作成するには、jQuery UI の Slider コンポーネントを使用します。 var createSeek = function() { video_duration = $gVideo.attr('duration'); 最大 : video_duration 、アニメーション：true、slide：function（）{seeksliding = true;コードをコピーご覧のとおり、ここでは、ビデオのreadyStateプロパティをループして比較することによって、ビデオが準備完了であるかどうかを判断する再帰関数を作成しました。そうでない場合、ビデオの長さを取得できず、ビデオが準備完了のときにスライダーを作成できません。準備ができたら、スライダーを初期化し、コントロール ツールバーを表示します。次に、video 要素の timeupdate イベントをバインドしてタイマー関数を実装します。 (秒/60 ) var s=Math.floor(秒-(m*60)) var currenttime = $gVideo.attr('currentTime'); if(!seeksliding) $ghinda_video_seek.slider('value', currenttime); $ghinda_video_timer.text(gTimeFormat(currenttime)) }; $gVideo.bind('timeupdate', seenUpdate ); コードをコピーします ここでは、seekUpdate 関数を使用してビデオの currentTime 属性値を取得し、gTimeFormat 関数を呼び出してフォーマットし、現在の再生時刻を取得します。ボリューム コントロールのコントロールについては、引き続き jQuery UI のスライダー コンポーネントを使用し、カスタム関数を使用してミュートを実現し、ミュート機能をキャンセルします。 $ ghinda_volume.slider ({ Value: 1, ) 向け方向：、範囲： "min"、‐ ‐ ‐ −------ - - - - - - - - - 経由で - - ‐ ‐ ‐オフ、から）;ボリュームミュート'); $ghinda_volume.slider('value', '0'); .addClass('ghinda-volume-mute'); }; }; $ghinda_volume_btn.click(ミュート音量); コードをコピー 最後に、独自のカスタム ビデオ コントロール ツールバーを構築したら、ブラウザのデフォルト ツールバーが削除されるように、 タグの control 属性を削除する必要があります。 OK、プラグイン関数が完了しました。メソッドを呼び出します: $('video').gVideo(); コードをコピー これにより、ページ上のすべてのビデオ要素にプラグインが適用されます。 外観と経験 さて、ここからはさらに興味深い部分ですが、それはプレイヤーの外観と経験です。プラグイン機能が完成したら、ちょっとしたCSSでスタイルを簡単にカスタマイズできるので、みんなでCSS3を使って実装していきます。 まず、プレーヤーのメインコンテナにいくつかのスタイルを追加します。 .ghinda-video-player { 使用する 使用する 使用する スルー スルー スルー スルー スルー オフ オフ ‐ ‐ ‐ ‐ ‐ および ‐ へ#61625d; -Moz-Border-Radius: 5px; / * FF1+ * / -MS-Border-Radius: 5px; / * IE Future Proofing * / / / # 313131, #000000) /* FF3.6 */ background-image: -webkit-gradient(linear,left top,leftbottom,color); -停止(0 , #313131),color-stop(1, #000000)); /* Saf4+, Chrome */ box-shadow: inset 0 15px 35px #535353; /一時停止してミュート/ミュートボタンをキャンセルすると、非常に良い効果が追加されますサスペンション効果: {{ 表示: ブロック; 高さ: 22 ピクセル; マージン - 右: 15 ピクセル;背景: url(../images/play-icon .png）-moz-transition：0.2s ease-firefox * : すべて 0.2 秒イーズインアウト; / * Safari および Chrome * / 遷移: すべて 0.2 秒イーズインアウト 背景: url(../images/pause-icon.png) ; } コードをコピー ビデオの再生ステータス (再生中/一時停止) に応じて再生/一時停止ボタンのスタイルを追加および削除する前述の JavaScript コードを注意深く読むと、.ghinda-paused-button が .ghinda-video-play background プロパティを書き換える必要がある理由が理解できるでしょう。 。 今度はスライダーの番です。プログレスバーとボリュームコントロールスライダーの実装は、jQuery UI の Slider コンポーネントを使用します。このコンポーネント自体は、jQuery UI に対応する CSS ファイルで定義されています。スライディング ブロックとプレーヤーのその他のコントロールの外観、およびプレーヤーの外観がそのスタイルで一律に書き換えられます。高さ: 15 ピクセル0px; —webkit-border-radius:10px ; #d5d5d5); 背景画像: -webkit-gradient (linear,left top,leftbottom,color-stop() 0、#e6e6e6 ),color-stop(1, #d5d5d5)); .ghinda-video-seek .ui-slider-handle.ui-state-hover { 背景: #fff; } 。 ghinda-video-seek .ui-slider-range { background-image：-moz-linear-gradient（top、＃4cbae8、＃39a2ce）;左上、左下、カラーストップ(0、#4cbae8)、カラーストップ(1、#39a2ce));ボックスシャドウ、ボックス-シャドウ: インセット 0 -3px 3px #39a2ce; ボックスシャドウ: インセット 0 -3px 3px #39a2ce現時点では、ボリューム コントロール スライダーは常にボリューム ボタンの横に表示されますが、この効果を実現するには、マウスがボリューム ボタンの上にあるときに、ボリューム コントロール スライダーが動的に表示されるように変更する必要があります。良い選択です: .ghinda-volume-box { height: 30px; -moz-transition: all 0.1s easy-in -out; /* Firefox */ - ms-transition: すべて 0.1 秒 easy /* IE の将来性 * Safari と Chrome */ 遷移: すべて 0.1 秒 easy-in-out; height: 135px; padding-top: 5px; } .ghinda-volume-slider { Visibility: hidden; moz-transition: all 0.1 /* Firefox */ -ms-transition: すべて 0.1 秒のイーズインアウト; /* IE の将来性保証 */ -o-transition: すべての 0.1 秒のイーズインアウト; /* Opera */ -webkit-transition:すべて 0.1 秒イーズインアウト */ 遷移: すべて 0.1 秒イーズインアウト } .ghinda-volume-box:hover .ghinda-volume-slider; { 位置: 相対; 可視性: 表示; 不透明度: 1; } コードをコピー いくつかの基本的な CSS プロパティと CSS3 によって提供される新しいプロパティを使用して、新しいプレーヤーの外観を作成しました。次のように: カスタムスキン プラグインを作成するときにいくつかのデフォルトオプションを定義していることに気づいたかもしれません。これらは、プラグインを呼び出すときに必要に応じて便利です。カスタムスキン。 ここでは、テーマがすべてのコントロールのスタイル定義の完全なセットであるという説明を示します。子テーマは、プラグインを呼び出すときに、これら 2 つのオプションまたはいずれかを同時に指定できます。 $ ('video'). gvideo ({ childtheme: 'Smalldark' }); : 概要 HTML5 ビデオ、JavaScript、CSS3 を使用してカスタマイズされたビデオ プレーヤーを作成するのは非常に簡単です。 JavaScript を使用してツールバー機能を実装し、外観とエクスペリエンスを CSS3 に任せることで、強力で使いやすいカスタマイズされたソリューションを実現します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
