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

[アーティクル]
09/18/2014

最終更新日: 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 ページ上にインラインで読み込まれます。
- [全画面表示] を選択すると、メディアプレーヤーは全画面表示モードで読み込まれます。

次の方法で共有

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

リッチメディアプレーヤーのテスト例

リッチメディアプレーヤーオブジェクトを構成するには

関連項目

参照

概念

その他の技術情報

その他のリソース

次の方法で共有

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

リッチ メディア プレーヤーのテスト例

リッチ メディア プレーヤー オブジェクトを構成するには

関連項目

参照

概念

その他の技術情報

その他のリソース

リッチメディアプレーヤーのテスト例

リッチメディアプレーヤーオブジェクトを構成するには