ビデオ プレゼンテーションは、どの製品ページにも最適です。プレゼンテーションを使用すると、訪問者に長い文章を読ませることなく、製品の機能を紹介できます。ただし、動画を作成する以外に、動画を手動で変換し、サイトに表示するフラッシュ プレーヤーを見つける (またはコーディングする) 必要があります。
他に考えられる方法は、youtube などの動画共有サイトにアップロードすることですが、プレーヤーをデザインに組み込むのは難しいでしょう。
幸いなことに、YouTube はこの問題の解決策を提供してくれます。それは、独自のカスタム コントロールを作成してスタイルを設定できるクロムレス プレーヤー (通常の埋め込み可能なプレーヤーの簡易版) です。このようにして、ビデオをページにすばやく安全に組み込む方法と、必要に応じて自由にカスタマイズする方法の両方が得られます。
アイデア
今日は、YouTube のクロムレス プレーヤーを使用する jQuery プラグインを作成します。 、および独自の最小限のコントロール セットを作成し、デザインとの完全な統合を可能にします。サポートされているコントロールには、再生/一時停止/再生ボタンと、クリック可能なプログレス バーが含まれます。
プラグインは、YouTube の gdata API を使用して、ビデオの埋め込みが許可されているかどうかを判断し、タイトル、説明、タグ、スクリーンショットなど、プラグインの改善に使用できるビデオに関する広範な情報を取得します。
プラグインを使用して動画を埋め込むのは非常に簡単です:
// Embed a video into the #player div:
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
// Chaining is also supported:
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
.youTubeEmbed('http://www.youtube.com/watch?v=AsdfFdwlzdAw');
埋め込みビデオの幅を指定することもできます (高さはアスペクト比に応じて自動的に計算されます)。進行状況バーを無効にすることもできます:
$('#player').youTubeEmbed({
video : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
width : 600, // Height is calculated automatically
progressBar : false // Hide the progress bar
});
上のダウンロード ボタンからプラグインを入手して、最初のステップから始めてください。
ステップ 1 - XHTML
私たちのプラグインは、ページに SWF ファイルを埋め込むために jQuery SWFObject に依存しています。以下に、両方のプラグインによって生成された結合マークアップを示します。
youtube-player.html
<div class="flashContainer" style="width: 640px; height: 360px;">
<object height="360" width="640" id="video_26ELpS3Wc4Q" type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
<param value="always" name="allowScriptAccess">
<param value="transparent" name="wmode">
<param value="video_id=26ELpS3Wc4Q&playerapiid=26ELpS3Wc4Q"
name="flashvars">
<param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
name="movie">
</object>
<div class="controlDiv play"></div>
<div class="progressBar">
<div class="elapsed"></div>
</div>
</div>.flashContainerDiv ページ上の各ビデオのプラグインによって動的に作成されます。 SWFObject によって生成された埋め込みコード .controlDiv が取り込まれます。 (再生/一時停止ボタンとして機能) とプログレス バー。
前述のように、プレーヤー自体の挿入は SWFObject プラグインによって処理されます。ブラウザに応じて、オブジェクトのいずれかを出力できます 要素、または非標準の埋め込み IE の要素。これにより負担が軽減され、YouTube の API のクエリやプレーヤー コントロールの構築などのタスクに集中できるようになります。
ステップ 2 - jQuery
プラグインのコードは youTubeEmbed-jquery-1.0.js にあります ファイル。ただし、使用する前に、jQuery SWFObject プラグインと最後に script.js とともに、最新バージョンの jQuery ライブラリをページに含める必要があります。 、デモ ページに 2 つのビデオを挿入し、プレビュー フォームの送信を処理します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.swfobject.1-1-1.min.js"></script>
<script src="youTubeEmbed/youTubeEmbed-jquery-1.0.js"></script>
<script src="script.js"></script>
プレーヤー プラグインのコードを掘り下げる前に、YouTube の gdata API からのサンプル レスポンスを見てみましょう。再生時間、アクセス制御 (どちらもプラグインによって使用されます)、およびタイトル、説明、タグ、スクリーンショットなどのあらゆる種類の追加データなど、ビデオに関する多くの有用な情報を提供できます。
JSON レスポンスのサンプル
{
"id": "u1zgFlCw8Aw",
"uploaded": "2008-03-05T01:22:17.000Z",
"updated": "2010-07-23T01:02:42.000Z",
"uploader": "GoogleDevelopers",
"category": "People",
"title": "The YouTube API: Upload, Player APIs and more!",
"description": "Listen to the YouTube APIs and Tools team talk about...",
"tags": ["youtube", "launch", "api", "engineering"],
"thumbnail": {
"sqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/default.jpg",
"hqDefault": "http://i.ytimg.com/vi/u1zgFlCw8Aw/hqdefault.jpg"
},
"player": {
"default": "http://www.youtube.com/watch?v=u1zgFlCw8Aw",
"mobile": "http://m.youtube.com/details?v=u1zgFlCw8Aw"
},
"content": {
"1": "rtsp://v4.cache5.c.youtube.com/CiILE..",
"5": "http://www.youtube.com/v/u1zgFlCw8Aw?f..",
"6": "rtsp://v3.cache4.c.youtube.com/CiILENy73.."
},
"duration": 259,
"location": "san bruno, ca",
"rating": 4.3,
"likeCount": "119",
"ratingCount": 144,
"viewCount": 251024,
"favoriteCount": 164,
"commentCount": 118,
"accessControl": {
"syndicate": "allowed",
"commentVote": "allowed",
"rate": "allowed",
"list": "allowed",
"comment": "allowed",
"embed": "allowed",
"videoRespond": "allowed"
}
}
この応答オブジェクトのすべてのフィールドは、 データ のプロパティとして利用できます 変数 (data.fieldname ）。プラグインを変更して、YouTube の動画ページへのリンクを含むタイトルを表示したり、動画の評価を表示したりすることができます。
それでは、スクリプトのソース コードを直接見てみましょう。
youTubeEmbed-jquery-1.0.js - パート 1
(function($){
$.fn.youTubeEmbed = function(settings){
// Settings can be either a URL string,
// or an object
if(typeof settings == 'string'){
settings = {'video' : settings}
}
// Default values
var def = {
width : 640,
progressBar : true
};
settings = $.extend(def,settings);
var elements = {
originalDIV : this, // The "this" of the plugin
container : null, // A container div, inserted by the plugin
control : null, // The control play/pause button
player : null, // The flash player
progress : null, // Progress bar
elapsed : null // The light blue elapsed bar
};
try{
settings.videoID = settings.video.match(/v=(\w+)/)[1];
// safeID is a stripped version of videoID,
// ready for use as a JavaScript function name
settings.safeID = settings.videoID.replace(/[^a-z0-9]/ig,'');
} catch (e){
// If the url was invalid, just return the "this"
return elements.originalDIV;
}
// Fetch data about the video from YouTube's API
var youtubeAPI = 'http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc';
$.get(youtubeAPI,{'q':settings.videoID},function(response){
var data = response.data;
if(!data.totalItems || data.items[0].accessControl.embed!="allowed"){
// If the video was not found, or embedding is not allowed;
return elements.originalDIV;
}
// data holds API info about the video:
data = data.items[0];
settings.ratio = 3/4;
if(data.aspectRatio == "widescreen"){
settings.ratio = 9/16;
}
settings.height = Math.round(settings.width*settings.ratio);
まず、スクリプトを関数として $.fn に追加して、スクリプトを jQuery プラグインとして定義します。 物体。コードを読みやすくするために、コントロールやプログレスバーの div など、ページのすべての要素を elements という構造に配置しました。 .
id を抽出した後 ビデオの (?v= の後の一意の 11 文字シーケンス パラメータ)、YouTube の gdata API に JSONP リクエストを送信します。そのようなビデオが存在するかどうか、およびそのビデオへの埋め込みが許可されているかどうかに応じて、アスペクト比の計算を進めます。ビデオの高さは、この比率を使用して幅に掛けることによって計算されます。
youTubeEmbed-jquery-1.0.js - パート 2
// Creating a container inside the original div, which will
// hold the object/embed code of the video
elements.container = $('<div>',{className:'flashContainer',css:{
width : settings.width,
height : settings.height
}}).appendTo(elements.originalDIV);
// Embedding the YouTube chromeless player
// and loading the video inside it:
elements.container.flash({
swf : 'http://www.youtube.com/apiplayer?enablejsapi=1&version=3',
id : 'video_'+settings.safeID,
height : settings.height,
width : settings.width,
allowScriptAccess:'always',
wmode : 'transparent',
flashvars : {
"video_id" : settings.videoID,
"playerapiid" : settings.safeID
}
});
// We use get, because we need the DOM element
// itself, and not a jquery object:
elements.player = elements.container.flash().get(0);
// Creating the control Div. It will act as a ply/pause button
elements.control = $('<div>',{className:'controlDiv play'})
.appendTo(elements.container);
// If the user wants to show the progress bar:
if(settings.progressBar){
elements.progress = $('<div>',{className:'progressBar'})
.appendTo(elements.container);
elements.elapsed = $('<div>',{className:'elapsed'})
.appendTo(elements.progress);
elements.progress.click(function(e){
// When a click occurs on the progress bar, seek to the
// appropriate moment of the video.
var ratio = (e.pageX-elements.progress.offset().left)/elements.progress.outerWidth();
elements.elapsed.width(ratio*100+'%');
elements.player.seekTo(Math.round(data.duration*ratio), true);
return false;
});
}
コードの 2 番目の部分では、 SWFObject を使用します。 YouTube クロムレス プレーヤーの埋め込みコードを生成するプラグイン。動画の ID が flashvar として渡されるため、プレーヤーは動画を直接読み込むことができます。 safeID 変数 (videoid の JavaScript セーフ バージョン) が id の値になります 生成されるオブジェクト要素のパラメータ。このようにして、後で document.getElementById('video_'+settings.safeID) を実行して DOM 要素を取得できます。 YouTube プレーヤーを制御するメソッド (再生、一時停止など) へのアクセスを取得します。
youTubeEmbed-jquery-1.0.js - パート 3
var initialized = false;
// Creating a global event listening function for the video
// (required by YouTube's player API):
window['eventListener_'+settings.safeID] = function(status){
var interval;
if(status==-1) // video is loaded
{
if(!initialized)
{
// Listen for a click on the control button:
elements.control.click(function(){
if(!elements.container.hasClass('playing')){
// If the video is not currently playing, start it:
elements.control.removeClass('play replay').addClass('pause');
elements.container.addClass('playing');
elements.player.playVideo();
if(settings.progressBar){
interval = window.setInterval(function(){
elements.elapsed.width(
((elements.player.getCurrentTime()/data.duration)*100)+'%'
);
},1000);
}
} else {
// If the video is currently playing, pause it:
elements.control.removeClass('pause').addClass('play');
elements.container.removeClass('playing');
elements.player.pauseVideo();
if(settings.progressBar){
window.clearInterval(interval);
}
}
});
initialized = true;
}
else{
// This will happen if the user has clicked on the
// YouTube logo and has been redirected to youtube.com
if(elements.container.hasClass('playing'))
{
elements.control.click();
}
}
}ビデオ プレーヤーを制御できるようにするには、特定のイベント (再生の停止、ビデオの準備など) が発生したときに通知を受ける必要があります。通常、これは、そのようなイベントが発生するたびにプレーヤーによって実行されるコールバック関数を渡す必要があることを意味します。
残念ながら、フラッシュはグローバル スコープで定義されている場合にのみ関数を実行でき、プラグイン内で定義されている関数を認識できません。ただし、一意の名前 (safeID を使用) を持つ関数を作成することにより、 )、ウィンドウに明示的に追加する これを実現できるオブジェクト。この小さなトリックがなければ、プラグインは機能しません。
youTubeEmbed-jquery-1.0.js - パート 4
if(status==0){ // video has ended
elements.control.removeClass('pause').addClass('replay');
elements.container.removeClass('playing');
}
}
// This global function is called when the player is loaded.
// It is shared by all the videos on the page:
if(!window.onYouTubePlayerReady)
{
window.onYouTubePlayerReady = function(playerID){
document.getElementById('video_'+playerID).addEventListener('onStateChange','eventListener_'+playerID);
}
}
},'jsonp');
return elements.originalDIV;
}
})(jQuery);
コードの前のセクションで作成したイベント リスニング関数は、addEventListener を使用してプレーヤーにアタッチされています。 方法。 「stateChange」が発生するたびに呼び出されます
それでは、プラグインの使用方法を見てみましょう。
script.js
$(document).ready(function(){
$('#player').youTubeEmbed('http://www.youtube.com/watch?v=u1zgFlCw8Aw');
/*
//You can alternatively pass an object:
$('#player').youTubeEmbed({
video : 'http://www.youtube.com/watch?v=u1zgFlCw8Aw',
width : 600, // Height is calculated automatically
progressBar : false // Hide the progress bar
});
*/
});
youTubeEmbed() を呼び出すだけです。 メソッドに渡して、文字列または構成オブジェクトのいずれかを渡します。文字列が渡された場合、YouTube 動画の URL と見なされます。オブジェクトを渡す場合は、 ビデオ を渡していることを確認してください 正しいビデオ URL を持つプロパティ。
ステップ 3 - CSS
最後に、プレーヤーにいくつかの CSS スタイルを適用する必要があります。プレーヤー コントロールのデザインを変更し、プレーヤー ウィンドウでの配置方法を定義します。
youTubeEmbed-jquery-1.0.css
.flashContainer{
/* Setting the container to relative positioning
so we can center the control div */
position:relative;
overflow:hidden;
}
.progressBar{
display:none;
position:absolute;
width:auto;
height:8px;
left:20px;
right:105px;
bottom:20px;
background-color:#141414;
overflow:hidden;
cursor:pointer;
/* A light CSS3 bottom highlight */
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
.progressBar .elapsed{
position:absolute;
width:0;
height:100%;
background-color:#1fa2f6;
border-right:1px solid #49AFF0;
}
.controlDiv{
/* Centering the control div */
position:absolute;
width:120px;
height:120px;
cursor:pointer;
top:50%;
left:50%;
margin:-60px 0 0 -60px;
}
.controlDiv.play{
background:url('img/play.png') no-repeat center center;
}
.controlDiv.replay{
background:url('img/replay.png') no-repeat center center;
}
.controlDiv.pause{
background:url('img/pause.png') no-repeat -99999px;
}
.flashContainer:hover .controlDiv.pause{
background-position:center center;
}
/* Only show the progress bar when the video is playing */
.flashContainer.playing:hover .progressBar{
display:block;
}プレーヤーの外観をカスタマイズするには、上記の色の値を変更するだけです。また、再生/一時停止ボタンを使用して png ファイルを編集することもできます。明らかに、これはデフォルトの YouTube プレーヤーの外観を変更するよりもはるかに簡単です。また、不要なクロムをすべて取り除き、最も重要なもの、つまりビデオを残します。
これでカスタム YouTube プレーヤー プラグインが完成しました!
このチュートリアルは気に入りましたか?下のコメント欄であなたの考えを共有してください。
