次の方法で共有

チュートリアル: MediaWebPart とビデオ サイト機能を追加する

  • [アーティクル]

最終更新日: 2010年4月19日

適用対象: SharePoint Server 2010

この記事の内容
メディア プレーヤー
埋め込みテキスト
ブックマーク
メディア プロパティと評価コントロール
コメントとメモ掲示板 Web パーツ
関連するビデオ

このトピックは、ビデオ共有サイトの作成とカスタマイズ方法について説明する 5 部構成のチュートリアルの 2 番目です。

前提条件

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

メディア プレーヤー

メディア プレーヤーを表示するページで参照を作成し、メディア プレーヤー オブジェクト モデルへの参照をそのページに追加して、指定した <div> タグ内のメディア プレーヤーを作成します。次に、インラインの ECMAScript (JavaScript、JScript) コードをメディア プレーヤーを表示するページに追加します。

メディア プレーヤーを、[アイテムを表示するフォーム] ページに追加するには

  1. Microsoft SharePoint Designer 2010 を開始し、「チュートリアル: ビデオ サイトを作成する」で作成した [アイテムを表示するフォーム] を [分割] ビューで開きます。

  2. MediaWebPart オブジェクトを表示するページで、<div> 参照を作成します。

    ヒントヒント

    たとえば、MediaPlayerHost の ID で <div> タグを作成するには、<div id="MediaPlayerHost"></div> をページに追加します。

  3. mediaplayer.jsJavaScript オブジェクト モデルへの参照をページに追加し、メディア プレーヤーを操作する関数をインポートします。例: <script type="text/javascript" src="/_layouts/mediaplayer.js"/>。

  4. インラインの JavaScript コードを、MediaWebPart オブジェクトを表示するページに追加します。

    //Get relevant parameters from the Data Form Web Part. 
var mediaTitleValue = (document.getElementsByName('TitleFieldValue'))[0].innerText;
var mediaUrlValue = (document.getElementsByName('UrlFieldValue'))[0].innerText;
var previewImageUrlValue = (document.getElementsByName('PreviewImageUrlFieldValue'))[0].innerText; 

//Create the media player.
mediaPlayer.createMediaPlayer(
document.getElementById('MediaPlayerHost'), //The <div> tag into which to insert the Silverlight object.
'MediaPlayerHost', // The ID attribute to assign to the "Object" element that will be inserted on the page and used to access the media player later.
'600px', // The width of the media player.
'450px', // The height of the media player.
    { // Parameters passed to the media player.
             displayMode:'Inline', //Display mode for the media player. For this scenario, we want "inline".
             mediaTitle:mediaTitleValue, //Title to set for the media player. Note reference to the mediaTitleValue variable created above.
             mediaSource:mediaUrlValue, //URL of the video. Note reference to the mediaUrlValue variable created above.
             previewImageSource:previewImageUrlValue, //URL for the preview image. Note reference to the previewImageUrlValue variable created above.
             autoPlay:true, //Whether the media player should start playing as soon as it is created.
             loop:false,  //Whether the video should "loop" when it reaches the end.
             mediaFileExtensions:'wmv;wma;avi;mpg;mp3;', //File extensions that the media player supports. Set these as they are shown here. 
             silverlightMediaExtensions:'wmv;wma;mp3;' //Set these as shown here. 
    },
    '', //Set to ''.
    false,  //Set to "false".
    '' //The function to call when the player is finished loading. '' means "do not call any function". 
    );

埋め込みテキスト

ここで、メディア プレーヤー オブジェクトは既に作成されています。そのメディア プレーヤー オブジェクトにアクセスするには、JavaScript オブジェクト モデルを使用できます。これを行うには、EmbedText プロパティの値を取得します。その値を使用して、メディア プレーヤー オブジェクトをターゲット ページまたはドキュメントに挿入できます。メディア プレーヤーをページに表示できる方法はいくつかありますが、Input テキスト ボックスはその 1 つのオプションです。

createMediaPlayer メソッドの呼び出し元は、メディア プレーヤーの作成が完了した後に呼び出すことのできる関数のポインターを、そのメソッドに渡すことができます。これは、メディア プレーヤーを使用するコードをページで実行する場合に役立ちます。この方法では、メディア プレーヤーが完全に読み込まれてからコードを呼び出すことができます。

  1. メディア プレーヤーを JavaScript オブジェクトとして取得するには、メディア プレーヤーを作成するときに指定した MediaPlayerHost ID パラメーターに基づく関数を使用します。

    Function getMediaPlayer()
   {
   var p=document.getElementById("MediaPlayerHost")
   var obj=p.getElementsByTagName("object");
   return obj[0].Content.MediaPlayer;
   }

  2. ページで EmbedText プロパティを設定し、そのプロパティを、メディア プレーヤー オブジェクトが作成されたときに自動で呼び出します。

    function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}

  3. createMediaPlayer を呼び出して、メディア プレーヤーが読み込まれたときに呼び出される関数名を含めます。getEmbedText 関数を使用して埋め込みテキストをページに表示するように、関数をセットアップします。

ブックマーク

実行時間の長いビデオ、多くの不連続セクションを持つビデオ、複雑性の高いビデオ、またはメタデータを含むビデオの場合、ブックマークを含めると便利です。ブックマークがクリックされると、メディア プレーヤーは、ページ上のビデオ内の定義された時間まで移動します。これは、DVD のチャプター間の移動に似ています。ブックマークをページに追加するには、Bookmarks フィールド ( 「チュートリアル: ビデオ サイトを作成する」トピックで説明されている DataFormWebPart オブジェクトの実装に既に含まれている) を使用できます。このチュートリアルでは、以下の形式のデータ値を持つ Bookmarks フィールドを使用します。

注意

中かっこに注意します。

注意

次のコードは、複数テキスト フィールド内のコードです。JavaScript ではありません。

{Bookmark1Time},{Bookmark1Title};
{Bookmark2Time},{Bookmark2Title};

たとえば、ブックマーク時間をそれぞれ 10 秒と 20 秒に設定する場合は、次のように記述します。

0:10,This bookmark will seek to ten seconds in the video;
0:20, This bookmark will seek to 20 seconds in the video.

ブックマーク リンクがクリックされたときに呼び出す関数を定義した後で、Bookmarks フィールドの値を抽出するためにページで実行する JavaScript コードを追加し、その値を使用して、JavaScript 関数を呼び出すリンクをレンダリングします。

[アイテムを表示するフォーム] へのブックマークを追加するには

  1. SharePoint Designer 2010 でページを開きます。

  2. ブックマークを表示する場所で、id 属性が bookmarkList に設定された <ul> タグ (<ul id="bookmarkList">) をページに追加します。

  3. 指定された位置までメディア プレーヤーをシークする JavaScript 関数を、ページに追加します。

    ヒントヒント

    個々のブックマーク リンクのために、この関数を後で使用します。

    		 
    function seekPlayer(posInSeconds)
{
var p = getMediaPlayer(); 
// The PositionMilliseconds parameter is a media player ECMAScript function found in mediaplayer.js.
   p.PositionMilliseconds = posInSeconds * 1000;
}

  4. ブックマークのリンク テキストをレンダリングするコードを JavaScript ページに追加します。

    //Get the bookmarks from the BookmarksFieldValue anchor tag. 
var bookmarks = (document.getElementsByName('BookmarksFieldValue'))[0].innerText;

//Strip out any <br> tags.
bookmarks = bookmarks.replace(/<br>/gi,"");

//While loop: Loops through bookmarks and processes as long as there are more bookmarks. 
//Temporary variables for the next position and title.
var nextPositionSeconds;
var nextTitle;
var bookmarksList = document.getElementById('bookmarksList');

//As long as there are more semi-colons, there are more bookmarks to process.
while(bookmarks.indexOf(";") != -1)
{

//Start building the position. Grab the substrings for the first minutes and seconds, and convert to seconds.
nextPositionSeconds = ( parseInt(bookmarks.substr(0,bookmarks.indexOf(':'))) * 60) + parseInt(bookmarks.substr(bookmarks.indexOf(':') + 1,bookmarks.indexOf(',')));

//Now trim the bookmarks string to remove the position.
bookmarks = bookmarks.substr(bookmarks.indexOf(',') + 1);

//Get the next title.
var nextTitle = bookmarks.substr(0,bookmarks.indexOf(';')); 

//Trim the bookmarks string to remove the title to prepare the code to loop again.
bookmarks = bookmarks.substr(bookmarks.indexOf(';') + 1);

//Add a link to the bookmarks list that seeks the player to the correct place.
bookmarksList.innerHTML = bookmarksList.innerHTML + '<li><a href=\"\" onclick=\"javascript:seekPlayer('+nextPositionSeconds+'); return false\">'+nextTitle+'</a></li>';
}

メディア プロパティと評価コントロール

メディア プロパティ セクションをページに追加するには、「チュートリアル: ビデオ サイトを作成する」トピックで説明されている手順を使用して、別の DataFormWebPart を追加します。ただし、これを非表示にしません。Web パーツをページの適切な場所に配置し、ユーザーに表示するフィールドを表示します。

ページに追加した元の DataFormWebPart オブジェクトを非表示にすることができます。「チュートリアル: ビデオ サイトを作成する」トピックでは、DataFormWebPart コントロールを削除するのではなく、非表示にしました。したがって、そのコントロールを抽出し、ページ上の目立つ場所 (ビデオの真下など) に移動できます。

評価コントロールを追加するには

  1. 評価コントロールを表示するページ上の適切な場所に <div> 要素を追加します。ratingsDiv など、認識可能な ID を使用します。

  2. コントロールを抽出する JavaScript コードを追加し、そのコードを開始と終了の <div> タグの間に配置します。

    var ratingsControl = document.getElementById(‘SPFieldAverageRating’).innerHTML;
var ratingsDiv = document.getElementById(‘ratingsDiv’);
ratingsDiv.innerHTML+=ratingsControl;
ratingsDiv.innerHTML+=ratingsControl;

コメントとメモ掲示板 Web パーツ

メモ掲示板 Web パーツをページに追加して、ビデオについてのコメントを残す機能をユーザーに提供できます。[挿入] メニューから [Web パーツ] を選択します。[メモ掲示板] Web パーツが、[Web パーツ] のリストに表示されます。[メモ掲示板] Web パーツがリストに含まれない場合は、[メモ掲示板] Web パーツを [Web パーツ ギャラリー] にインポートしてください。

メモ掲示板 Web パーツをインポートするには

  1. Windows エクスプローラーを開始し、チーム サイト、または [メモ掲示板] Web パーツを利用できる他のサイトに移動します。

  2. [サイトの設定] に移動します。

  3. [ギャラリー] セクションで [Web パーツ] をクリックします。

  4. Windows エクスプローラーを使用して、[ライブラリ] メニューから [開く] を選択します。次に、[socialComment.dwp Web パーツ] を自分のコンピューターにコピーします。

  5. 手順 2. と 3. を繰り返します。

  6. [socialComment.dwp Web パーツ] を [Web パーツ ギャラリー] にアップロードします。

メモ掲示板 Web パーツを追加するには

  • [挿入] メニューから [Web パーツ] を選択し、ユーザーがコメントを追加できるようにする場所に [メモ掲示板] Web パーツを追加します。

注意

[メモ掲示板] Web パーツを使用するには、[ユーザー プロファイル サービス アプリケーション] を有効にして、それをサーバーで使用できるようにします。サイトのすべてのユーザーに UseSocialFeatures プロファイル権限が必要です。

関連するビデオ

現在のビデオに対して提供された管理キーワードに基づいて、選択された一連のビデオを表示するようにページを構成できます。

  1. ビデオのキーワード プロパティをページの URL に強制的に挿入する JavaScript コードをページに追加します。このコードは、現在の URL に RelatedKeywords パラメーターがあるかどうかをチェックします。このパラメーターがない場合は、DataFormWebPart オブジェクトの Keywords() プロパティの値を使用して、ページを再度読み込みます。

    //Check whether the RelatedKeywords parameter is found in the URL;if necessary, reload the page with the query string. 
var relatedKeywordsParam = "RelatedKeywords";
var urlParams = window.location.search;

//Runs if the URL parameters do not include RelatedKeywords parameters.
if(urlParams.indexOf(relatedKeywordsParam) == -1) 
{
var keywordsValue = (document.getElementsByName('KeywordsFieldValue'))[0].innerText;
var newUrl = window.location.toString(); 
newUrl+= '&'+relatedKeywordsParam+'=' + keywordsValue;
window.location.replace(newUrl);
}

  2. SharePoint Designer 2010 の [挿入] メニューから [Web パーツ] を選択し、ContentByQueryWebPart オブジェクトのインスタンスをページに追加して、queryString クエリを含めます。Web パーツでは、RelatedKeywords パラメーターの値が使用されます。

  3. URL の queryStringparameters パラメーターを使用するように、クエリを構成します。コンテンツ クエリ Web パーツの新しい機能の 1 つは、URL 内のクエリ文字列パラメーターに基づいて、query パラメーターを動的に受け入れられることです。この機能を使用して、関連するビデオを管理できます。URL の RelatedKeywords プロパティ (JavaScript で設定するプロパティ) には、フィルターの対象となる管理キーワードが含まれるためです。

  4. [以下のリストからアイテムを表示する] の値を /Videos に設定します。

  5. [追加フィルター] セクションの [エンタープライズ キーワード] を [PageQueryString:RelatedKeywords] に設定します。

次の手順

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

関連項目

タスク

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

概念

デジタル資産の管理

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

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