チュートリアル: ビデオをアップロードするエクスペリエンスのカスタマイズ

最終更新日: 2010年9月27日

適用対象: SharePoint Server 2010

この記事の内容
ページおよびメディア Web パーツのアップロード
非表示の Silverlight コントロール
MediaTest.aspx テスト ページ
<object> タグと extractionControl
[サムネイルの設定] ボタン
PreviewImageURL、フレームの幅、フレームの高さのフィールド

このトピックは、ビデオ共有サイトを作成しカスタマイズする方法を学ぶための、5 部構成のチュートリアルの第 3 部です。

ユーザーがビデオを表示する表示フォームを作成した次の手順として、ビデオをアップロードするエクスペリエンスをカスタマイズします。このチュートリアルでは、ビデオのサムネイル画像を自動的に抽出するコントロールを実装する方法を示します。Microsoft SharePoint Server 2010 にデフォルトで含まれているコードでは、ビデオのサムネイル画像にユーザーが手動で URL を入力する必要がありますが、ここで紹介するのはより効率的なアップロードの実装です。

このチュートリアルでは、3 つのタスクについて説明します。

1. [アイテム編集フォーム] ページを作成して、それに MediaWebPart オブジェクトを追加します。カスタマイズ可能なフォームがアップロード ページになります。これはユーザーがビデオの [プロパティの表示] をクリックしたときに表示されるフォームと同じです。

2. ページに非表示の Microsoft Silverlight コントロールを追加します。非表示の Microsoft Silverlight アプリケーションを追加することにより、MediaWebPart オブジェクトからのサムネイル画像を適切な画像形式に変換します。

3. ECMAScript (JavaScript、JScript) を使用して、[Set Thumbnail] ボタンを追加します。ユーザーが [Set Thumbnail] をクリックすると、MediaWebPart オブジェクトのための JavaScript オブジェクト モデルが適切なフレームをキャプチャし、[Thumbnails] ライブラリにサムネイル画像を格納するためにページ上の Silverlight アプリケーションを呼び出し、自動的にビデオのサムネイル画像の URL を設定して、フォーム上の [PreviewImageUrl] フィールドを非表示にします。

前提条件

注意
このチュートリアルでは、Silverlight の知識が必要になります。Microsoft SharePoint 2010 Software Development Kit (SDK) には、ここで示した関数を実行する Silverlight ソリューションのためのコード サンプルが含まれます。インラインのコード例は、例示のためのみに示すものであり、ユーザーの実際のコードにそのまま使用しないでください。

「チュートリアル: ビデオ サイトを作成する」トピックの手順を完了してください。

ページおよびメディア Web パーツのアップロード

「チュートリアル: ビデオ サイトを作成する」に説明されているように、[ビデオ] ライブラリに [アイテム編集フォーム] を作成し、それに MediaWebPart オブジェクトを追加するために、Microsoft SharePoint Designer 2010 を使用します。

SharePoint Designer で編集フォームを作成するには

1. Microsoft SharePoint Designer 2010 を開始して、次に SharePoint サイトに移動します。

2. 左の [ナビゲーション] ウィンドウの [リストとライブラリ] をクリックして、次に [ビデオ] ライブラリを選択します。

3. [新規作成] をクリックして、[新しいリスト フォームの作成] ダイアログ ボックスを開きます。

4. [新しいリスト フォームの作成] ダイアログ ボックスで、表 1 のように設定を指定します。

   表 1. [新しいリスト フォームの作成] ダイアログ ボックスの設定

   設定	値
   フォームの種類	アイテム編集フォーム
   選択した種類の既定フォームとして設定	Yes
   使用するコンテンツ タイプ	ビデオ

5. [フォーム] セクションで、新しく作成されたフォームを右クリックし、[詳細モードでファイルを編集] を選択します。

カスタマイズできる新しい表示フォームが表示されます。これは、ユーザーがビデオの [プロパティの表示] をクリックしたときに表示されるデフォルトのフォームです。[タイトル] フィールドと [PreviewImageURL] フィールドは、新たにアップロードするビデオでは、通常は空白になります。

重要
ビデオの URL パスを取得し、ビデオ アップロード ページのための MediaWebPart オブジェクトを作成することの詳細については、チュートリアル: ビデオ サイトを作成するのトピックの [非表示データ フォーム Web パーツ] セクションを参照してください。編集フォームにメディア プレーヤーを追加するには、「メディア Web パーツの追加」の手順を繰り返します。

非表示の Silverlight コントロール

カスタム Silverlight コントロールは、MediaWebPart オブジェクトの現在のフレームからのサムネイル画像ファイルの抽出とアップロードを管理します。要約すると、このコードは、変換およびアップロード中に使用されるパラメーターを取得し設定する、単一の JavaScript メソッドを提供し、アップロードされたそれぞれのサムネイル画像のファイル名を返します。このコードは、画像抽出が正常に終了できる可能性を向上するために、ファイル名にランダムな文字を追加します。

/* convertAndUploadThumbnail: Parameters:
         *  - sImageAsEncodedBitmap: The bitmap generated by the media player.
         *  - nWidth: The width of the thumbnail image.
         *  - nHeight: The height of the thumbnail image.
         *  - sFileNameToUse: The name of the file to use (without the file extension) 
         *  - sWebUrl: The URL of the Web to which the thumnbnail image should be uploaded.
         *  - sServerRelativeListUrl: The server-relative URL of the list where the thumbnail should be uploaded.
         *  Returns: 
         *  The file name of the uploaded thumbnail, constructed by adding a random character to
         *  sFileNameToUse and appending the file extension.
         *  (This is not the full URL; this is only the name of the leaf.)
         */

ヒント
ダウンロードした SharePoint 2010 SDK の C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples フォルダーに、完全な Silverlight サムネイル画像抽出のコード サンプルがあります。

カスタム コントロールの中核的なロジックは [MainPage.xaml.cs] ファイルにあります。このコードは、MediaWebPart オブジェクトが提供するサムネイル画像を .jpg ファイル形式に変換します。このコードは、指定した場所に .jpg ファイルをアップロードするために SharePoint クライアント側オブジェクト モデルを使用します。

Visual Studio 2010 プロジェクトによって生成される重要なファイルは、実行可能ファイルを含む単一のファイル ExtractThumbnail.xap です。.xap ファイルを展開するには、サイトの [スタイル ライブラリ] にそれをアップロードします。

スタイル ライブラリに XAP ファイルをアップロードするには

1. SharePoint サイトに移動して、任意のページを開きます。

2. [すべてのサイト コンテンツ] をクリックして、次に [スタイル ライブラリ] をクリックします。

3. .xap ファイルをアップロードするには、[ドキュメント] タブで、[ドキュメントのアップロード] をクリックします。

4. .xap ファイルを発行し、すべてのユーザーがアクセスできるように、メジャー バージョンとして承認します。

MediaTest.aspx テスト ページ

Visual Studio 2010 プロジェクトには 1 ページでアプリケーションをテストできる MediaTest.aspx テスト ページが含まれます。(MediaTest.aspx ページに指定された URL に) プロジェクトが生成した .xap ファイルをアップロードした後で、任意の SharePoint ドキュメント ライブラリにページをアップロードし、次にそれをブラウザで表示します。

<object> タグと extractionControl

アップロード ページに Silverlight アプリケーションを利用可能にするには、SharePoint Designer 2010 を使用してアプリケーションを読み込み、extractionControl などの既知の ID で [<div>] ステートメントにそれをラップする [<object>] タグを追加します。以前にアップロードした .xap ファイルの URL で、source パラメーターの URL 値を置換します。

<div id="extractionControl">
//The user sets the width and height. For debugging purposes, the control displays text stating whether
//the upload succeeded or failed. To suppress debugging messages, set the width and height to very small 
// values.
// <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="30px" id="ExtractControlSilverlight">
  <param name="source" value="http://<server>/Style%20Library/ExtractThumbnail.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" /> 
// Markup is emitted if the user does not have Silverlight installed. The HTML renders an image link 
// suggesting that they download Silverlight.
  <a href="https://go.microsoft.com/fwlink/?linkid=149156&clcid=0x411" style="text-decoration:none">
   <img src="https://go.microsoft.com/fwlink/?linkid=108181&clcid=0x411" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
    </object>
</div>

Silverlight 抽出コントロールにプログラムよりアクセスする方法は、チュートリアル: ビデオ サイトを作成するに示した MediaWebPart オブジェクトへのアクセスに似ています。つまり、アップロード ページからアクセスします。Silverlight 抽出コントロールを取得するページに、JavaScript オブジェクトとして JavaScript 関数を挿入します。

function getExtractorControl() 
{
var control = document.getElementById("extractionControl").childNodes[0];
return control.Content.MainPage;
}

[サムネイルの設定] ボタン

次のような JavaScript コードを、理想的にはメディア プレーヤー コードの近くに追加することにより、ページにボタン要素を追加します。<input onclick="captureThumbnailAndSetMetadata();" type="button" value="Set Thumbnail"/>

このボタンの背後の JavaScript ボタンが、Silverlight コントロールが使用するためのパラメーターを抽出します。

表 2. ECMAScript ボタンのパラメーター

Silverlight コントロールがサムネイル コントロールをアップロードした後で、JavaScript コードは、表 3 に指定したプロパティ値に設定されたデータを使用します。

表 3. プロパティ値のデータ

表 3 のフィールドにコードが返した値を挿入するとき、JavaScript 関数は、フォームに含まれるすべての入力フィールドをプログラミングにより順に探し、適切なフィールドを見つけたときに正しい値を挿入します。

function captureThumbnailAndSetMetadata()
{
//Get the media player and extraction control.
var mediaPlayerObj = getMediaPlayer();
var slExtractorControl = getExtractorControl();

//Get the natural height and width of the video from the object model for the media player.
var nHeight = mediaPlayerObj.NaturalVideoHeight;
var nWidth = mediaPlayerObj.NaturalVideoWidth;

//Calculate the actual height and width of the thumbnail image based on the natural versus current aspect ratio.
var naturalAspectRatio = nWidth/nHeight;

var originalHeight = 225;  //This value must match the height of the media player on the page.
var originalWidth = 300; //This value must match the width of the media player on the page.
var originalAspectRatio = originalWidth/originalHeight;

var thumbnailWidth;
var thumbnailHeight;

if (originalAspectRatio > naturalAspectRatio)
{
thumbnailHeight = originalHeight;
thumbnailWidth = originalHeight * naturalAspectRatio;
}
else
{
thumbnailWidth = originalWidth;
thumbnailHeight = thumbnailWidth/naturalAspectRatio-1; 
}
//Finished computing the thumbnail height and width.

//Get the current frame from the media player.
var sThumbnail = mediaPlayerObj.CaptureCurrentFrame();

//Get the file name to start with from the media player.
var sFileName = (document.getElementsByName('mediaTitle'))[0].innerText;

//Calls the Extractor Control, which returns the file name of the actual thumbnail.
//Replace <server> with the name of your server and update folder parameters as needed.
var sThumbnailFileName = slExtractorControl.convertAndUploadThumbnail(sThumbnail, thumbnailWidth, thumbnailHeight, sFileName, "http://<server>/", "/Video Thumbnails");
//Begin setting the relevant metadata.
var sThumbnailUrl = "http://<server>/Video Thumbnails/"+sThumbnailFileName;

//Get the input fields in a single array to set the URL.
var sInputFields = document.getElementsByTagName('input');

//Loop through all the input fields and look for the fields we want to set.
var i;
for (i=0; i<(sInputFields.length);i++)
{
//Indicates that the preview image URL is found.
if (sInputFields[i].title == 'Preview Image URL')
{
sInputFields[i].value=sThumbnailUrl; 
}

//Indicates that the frame width is found.
if (sInputFields[i].title == 'Frame Width')
{
sInputFields[i].value=thumbnailWidth;
}

// Indicates that the frame height is found.
if (sInputFields[i].title == 'Frame Height')
{
sInputFields[i].value=thumbnailHeight;
}
} 
}

PreviewImageURL、フレームの幅、フレームの高さのフィールド

[プレビュー イメージの URL]、[フレーム幅]、[フレーム高] フィールドを非表示にし、ユーザーが UI から手動で値を入力あるいは変更できないようにします。フィールドを非表示にするには、Microsoft SharePoint Designer 2010 の [デザイン ビュー] を使用して、それらのフィールドを含む表のそれぞれの行で、関連する <tr> 要素を検索し、その style 属性を style=display:none に設定します。この設定は、フィールドがユーザーに表示されないようにしますが、ecmascriptshort オブジェクト モデルを使用して設定できるように、ページにフィールドを残します。

次の手順

チュートリアル: カスタマイズされたホーム ページとコンテンツ クエリ Web パーツ XSL を作成する

関連項目

タスク

[方法] ECMAScript を使用して MediaWebPart オブジェクトを設定する

概念

チュートリアル: ビデオ共有サイトの作成とカスタマイズ

デジタル資産管理プログラミング モデル