ECMAScript を使用して MediaWebPart オブジェクトを設定する
最終更新日: 2010年4月19日
適用対象: SharePoint Server 2010
デジタル資産管理 (DAM) には、ECMAScript (JavaScript、JScript) クライアント オブジェクト モデルを使用して構成できるリッチ メディア プレーヤー オブジェクトがあります。Silverlight でサポートされている ECMAScript (JavaScript、JScript) オブジェクト モデルと相互運用するカスタム コードを記述することによって、既定の Microsoft Silverlight 2.0 メディア プレーヤーを自動化できます。
次のコードでは、ユーザーが UI を使用して変更できる多数のプロパティを自動的に取得し、設定するスクリプト実行可能なメディア プレーヤー インターフェイスを作成します。ユーザーが変更できるプロパティには以下のものがあります。
メディア ファイルのタイトル。
表示モード。
自動再生設定とループ再生設定をオンとオフのどちらに設定するか。
テーマの場所。
プレビュー イメージ。
選択されるオーディオ ファイルまたはビデオ ファイル。
Microsoft SharePoint Designer 2010 または Microsoft Visual Studio 2010 で類似のファイルを作成できます。
このトピックには、ECMAScript (JavaScript、JScript) オブジェクト モデルがメディア プレーヤーに提供した構成可能なオプションをテストするために必要な Silverlight コントロールと ECMAScript (JavaScript、JScript) オブジェクト モデルの実装を含んでいるサンプル .aspx ページ用のコードが記載されています。
リッチ メディア プレーヤーのテスト例
次のサンプルでは、ECMAScript (JavaScript、JScript) オブジェクト モデルがリッチ メディア プレーヤーに提供する機能とプロパティをテストするために使用できる .aspx ページを示します。ほとんどのサンプルを作成するには、1 つ以上のビデオ ファイルとプレビュー イメージ ファイルをホストしているサーバーにアクセスできる必要があります。サンプルでは、ユーザーが指定したビデオ ファイルを再生し、ユーザーが指定したプレビュー イメージを読み込みます。これらの種類は、mediaplayer.js ファイルにあります。
表 1 に、サンプルで使用する構成可能な ECMAScript (JavaScript、JScript) オブジェクト モデルのプロパティを示します。
表 1. ECMAScript プロパティ
プロパティ |
説明 |
---|---|
string MediaTitle {get;set} |
対象のメディア ファイルのタイトルを取得および設定します。 |
string DisplayMode { get; set; } |
表示モード (インライン表示、重ね配置、または全画面表示) を取得および設定します。 |
bool AutoPlay { get; set; } |
対象のメディア ファイルを自動的に再生するかどうかを取得および設定します。 |
bool Loop { get; set; } |
対象のメディア ファイルを繰り返し再生するかどうかを取得および設定します。 |
string TemplateSource { get; set; } |
XAML テンプレートのソースを取得および設定します。このソースは、テーマとしてメディア プレーヤーに適用できます。 |
string PreviewImageSource { get; set; } |
プレビュー イメージのソース ファイルが配置されている URL を取得および設定します。 |
string MediaSource { get; set; } |
メディア ソース ファイルが配置されている URL を取得および設定します。 |
string EmbedText { get; } |
メディア ファイルを読み込むときにビデオに埋め込まれているテキストを取得します。 |
void Play(); |
メディア ファイルを再生します。 |
void Pause(); |
メディア ファイルを一時停止します。 |
void Stop(); |
メディア ファイルを停止します。 |
string Duration { get; } |
メディア ファイルの継続時間を秒単位で取得します。 |
long DurationMilliseconds { get; } |
メディア ファイルの継続時間をミリ秒単位で取得します。 |
string Position { get; set; } |
メディア ファイルの継続時間の位置を秒単位で取得および設定します。 |
long PositionMilliseconds { get; set; } |
メディア ファイルの継続時間の位置をミリ秒単位で取得および設定します。 |
リッチ メディア プレーヤー オブジェクトを構成するには
[再生モードの設定] リスト ボックスで再生モードを選択します。
Microsoft SharePoint Designer 2010 を起動します。[ファイル] メニューで [新規作成] をクリックし、ページを作成します。
次のコードをコピーして、新しいページに貼り付けます。
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> <head> <title>SilverLight Media Player Sample Page</title> <script type="text/javascript" src="/_layouts/mediaplayer.js"></script> <script type="text/javascript"> //Gets the media player. function getMediaPlayer() { var p = document.getElementById("MediaPlayerHost") var obj = p.getElementsByTagName("object"); return obj[0].Content.MediaPlayer; } //Initialize the media player object and set values for its properties. Customize MediaUrlField and PreviewURLField values for your local environment. function init() { var serverStr = window.location.href; serverStr = serverStr.substr(7); serverStr = serverStr.substr(0, serverStr.indexOf("/")); document.getElementById("MediaURLField").value = "http://" + serverStr + "/documents/test.wmv"; document.getElementById("PreviewURLField").value = "http://" + serverStr + "/documents/test.jpg"; document.getElementById("TitleField").value = "API Test Page"; document.getElementById("TemplateURLField").value = "http://" + serverStr + "/Style%20Library/XAML/AlternateMediaPlayer.xaml"; } //Set properties of the media player, including media URL, preview image URL, template URL, title, autoplay, whether to repeat, and default display mode. function SetMediaSource() { var elm = document.getElementById("MediaURLField"); var p = getMediaPlayer(); p.MediaSource = elm.value; } function SetPreviewImageSource() { var elm = document.getElementById("PreviewURLField"); var p = getMediaPlayer(); p.PreviewImageSource = elm.value; } function SetMediaTitle() { var elm = document.getElementById("TitleField"); var p = getMediaPlayer(); p.MediaTitle = elm.value; } function SetTemplateSource() { var elm = document.getElementById("TemplateURLField"); var p = getMediaPlayer(); p.TemplateSource = elm.value; } function SetAutoPlay() { var elm = document.getElementById("autoPlayCB"); var p = getMediaPlayer(); p.AutoPlay = elm.checked; } function SetLoop() { var elm = document.getElementById("loopCB"); var p = getMediaPlayer(); p.Loop = elm.checked; } function SetDisplayMode() { var elm = document.getElementById("DisplayModeSelect"); var p = getMediaPlayer(); p.DisplayMode = elm.value; } //Sets back the time of the media being played by 5000 milliseconds (5 seconds). function BackFive() { var p = getMediaPlayer(); var pos = p.PositionMilliseconds; pos -= 5000; /*5 seconds*/ p.PositionMilliseconds = pos; ShowPosition(); ShowPositionMilliseconds(); } //Plays media set in the MediaURLField. function Play() { var p = getMediaPlayer(); p.Play(); } //Pauses media. function Pause() { var p = getMediaPlayer(); p.Pause(); } //Stops media. function Stop() { var p = getMediaPlayer(); p.Stop(); } //Sets forward the time of the media being played by 5000 milliseconds (5 seconds). function ForwardFive() { var p = getMediaPlayer(); var pos = p.PositionMilliseconds; pos += 5000; /*5 seconds*/ p.PositionMilliseconds = pos; ShowPosition(); ShowPositionMilliseconds(); } //Sets back the time of the media being played by 5000 milliseconds (5 seconds). function ShowEmbedText() { var p = getMediaPlayer(); var elm = document.getElementById("EmbedHost"); if(elm.innerText != undefined) { elm.innerText = p.EmbedText; } else { elm.textContent = p.EmbedText; } } //Shows the total duration (in minute:second format) of the selected media. function ShowDuration() { var p = getMediaPlayer(); var elm = document.getElementById("DurationHost"); if(elm.innerText != undefined) { elm.innerText = p.Duration; } else { elm.textContent = p.Duration; } } //Shows the total duration (in milliseconds) of the selected media. function ShowDurationMilliseconds() { var p = getMediaPlayer(); var elm = document.getElementById("DurationMillisecondsHost"); if(elm.innerText != undefined) { elm.innerText = p.DurationMilliseconds; } else { elm.textContent = p.DurationMilliseconds; } } //By default, gets the position in minutes and seconds of the selected media based on internal text; otherwise, gets the position in minutes and seconds of the selected media based on metadata. function ShowPosition() { var p = getMediaPlayer(); var elm = document.getElementById("PositionHost"); if(elm.innerText != undefined) { elm.innerText = p.Position; } else { elm.textContent = p.Position; } } // By default, gets the position in milliseconds of the selected media based on internal text; otherwise, gets the position in milliseconds of the selected media based on metadata. function ShowPositionMilliseconds() { var p = getMediaPlayer(); var elm = document.getElementById("PositionMillisecondsHost"); if(elm.innerText != undefined) { elm.innerText = p.PositionMilliseconds; } else { elm.textContent = p.PositionMilliseconds; } } </script> <style> .propertyVal { background-color: cornsilk; font-weight: bolder; } </style> <head> <!--[if gte mso 9]><![endif]--> </head> <body style="{font: 10pt, sans-serif;}"> <div> <div> //Sets test controls with user-specified values. <form> <input type="text" id="MediaURLField"> <a href="javascript:SetMediaSource();">Set Media Source</a><br> <input type="text" id="PreviewURLField"> <a href="javascript:SetPreviewImageSource();">Set Preview Image Source</a><br> <input type="text" id="TitleField"> <a href="javascript:SetMediaTitle();">Set Media Title</a><br> <input type="text" id="TemplateURLField"> <a href="javascript:SetTemplateSource();">Set Template Source</a><br> <input type="checkbox" id="autoPlayCB"> <a href="javascript:SetAutoPlay();">Set Auto Play</a><br> <input type="checkbox" id="loopCB"> <a href="javascript:SetLoop();">Set Loop</a><br> <select id="DisplayModeSelect"> <option>Overlay</option> <option selected="true">Inline</option> <option>Fullscreen</option> </select><a href="javascript:SetDisplayMode();">Set Display Mode</a><br><br> <a href="javascript:Play();">Play</a> <a href="javascript:Pause();">Pause</a> <a href="javascript:Stop();">Stop</a> <a href="javascript:BackFive();">Back 5</a> <a href="javascript:ForwardFive();">Forward 5</a><br><br> <a href="javascript:ShowEmbedText();">Show EmbedText</a> Embed Text:<span id="EmbedHost" class="propertyVal"></span><br> <a href="javascript:ShowDuration();">Show Duration</a> Duration:<span id="DurationHost" class="propertyVal"></span><br> <a href="javascript:ShowPosition();">Show Position</a> Position:<span id="PositionHost" class="propertyVal"></span><br> <a href="javascript:ShowDurationMilliseconds();">Show DurationMilliseconds</a> DurationMilliseconds:<span id="DurationMillisecondsHost" class="propertyVal"></span><br> <a href="javascript:ShowPositionMilliseconds();">Show PositionMilliseconds</a> PositionMilliseconds:<span id="PositionMillisecondsHost" class="propertyVal"></span><br> </form> </div> <div id="MediaPlayerHost"> <script> { init(); var MediaURL = document.getElementById("MediaURLField").value; var PreviewURL = document.getElementById("PreviewURLField").value; var MediaTitle = document.getElementById("TitleField").value; var AutoPlay = document.getElementById("autoPlayCB").checked; var Loop = document.getElementById("loopCB").checked; mediaPlayer.createMediaPlayer( document.getElementById('MediaPlayerHost'), 'MediaPlayerHost', '500px', '333px', { displayMode:'Inline', mediaTitle:MediaTitle, mediaSource:MediaURL, previewImageSource:PreviewURL, autoPlay:AutoPlay, loop:Loop, mediaFileExtensions:'wmv;wma;avi;mpg;mp3;', silverlightMediaExtensions:'wmv;wma;mp3;' }); } </script> </div> </div> </body> </html>
ファイルを .aspx ファイルとして保存します。
このファイルを SharePoint Designer 2010 で開きます。
[Set Media File] フィールドに、メディア プレーヤーで再生するビデオ ファイルの URL を入力します。
注意
メディア プレーヤーは、オーディオ ファイルとビデオ ファイルを再生できます。例として、この手順ではビデオ ファイルを使用します。
[Set Preview Image Source] フィールドに、ビデオをプレビューするときにメディア プレーヤーで表示するイメージ ファイルの URL を入力します。
[Set Media Title] フィールドに、ビデオ ファイルのフレンドリ名を入力します。
[Set Template Source] フィールドに、メディア プレーヤーに適用する XAML ファイルが格納されているテンプレート ライブラリの場所の URL を入力します。
ファイルを自動再生する場合は、[Set Auto Play] チェック ボックスをオンにします。
[再生モードの設定] リスト ボックスで再生モードを選択します。
[重ね配置] を選択すると、メディア プレーヤーは最大化され、開いている他のすべてのウィンドウの前に表示されます。
[インライン] を選択すると、メディア プレーヤーは現在の .aspx ページ上にインラインで読み込まれます。
[全画面表示] を選択すると、メディア プレーヤーは全画面表示モードで読み込まれます。