メディア プレーヤー

メディアの再生には、インライン (ページに埋め込まれている、または他のコントロールのグループを使用した) または専用の全画面エクスペリエンスを使用した、ビデオとオーディオの表示とリッスンが関与します。

ユーザーは、再生と一時停止、後へスキップ、前へスキップなどの基本的なコントロール セットを必要とします。これは、(メディア プレーヤーのボタン、コントロール バーの背景、コントロールの配置やレイアウトを含め) 必要に応じて変更できます。

Media player element with transport controls

重要

MediaPlayerElement は Windows 10 バージョン 1607 以降でのみ使用できます。 Windows 10 の以前のバージョン用にアプリを開発する場合は、代わりに MediaElement コントロールを使用する必要があります。 ここで推奨されている事項はすべて MediaElement にも適用されます。

これは適切なコントロールですか?

アプリでオーディオまたはビデオを再生する場合は、メディア プレーヤーを使います。 画像のコレクションを表示するには、フリップ ビューを使います。

推奨事項

メディア プレイヤーは淡色テーマと濃色テーマの両方をサポートしていますが、ほとんどのエンターテインメント シナリオでは、濃色テーマを使用することでエクスペリエンスが向上します。 暗い背景を使うと、(特に高感度条件では) コントラストが強調され、表示エクスペリエンスに影響を及ぼすコントロール バーが制限されます。

ビデオ コンテンツを再生する場合、インライン モードよりも全画面表示モードを促進することにより、専用の表示エクスペリエンスを使うことをお勧めします。 全画面表示エクスペリエンスが最適であり、インライン モードではオプションが制限されます。

画面領域がある場合や、10 フィート エクスペリエンス向けに設計する場合は、2 行のレイアウトを採用します。 このレイアウトでは、コンパクトな 1 行のレイアウトよりもコントロールの領域が多く確保され、10 フィート環境ではゲームパッドによる移動が簡単になります。

注意

10 フィート エクスペリエンス用にアプリケーションを最適化する方法の詳細については、 Xbox とテレビの設計 に関する記事を参照してください。

既定のコントロールはメディア再生に最適化されていますが、アプリに最適なエクスペリエンスを実現するために、必要なカスタム オプションをメディア プレーヤーに追加できます。 カスタム コントロールの追加について詳しくは、「カスタム トランスポート コントロールを作成する」をご覧ください。

メディア プレーヤーの作成

XAML で MediaPlayerElement オブジェクトを作成してアプリにメディアを追加し、オーディオやビデオ ファイルを指定する MediaSourceSource を設定します。

この XAML は MediaPlayerElement を作成し、その Source プロパティをアプリのローカルにあるビデオ ファイルの URI に設定するコードを示します。 ページが読み込まれると、MediaPlayerElement によって再生が開始します。 メディアがすぐに再生されないようにするには、AutoPlay プロパティを false に設定します。

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400" AutoPlay="True"/>

この XAML は、組み込みのトランスポート コントロールを有効化し、さらに AutoPlay プロパティを false に設定した MediaPlayerElement を作成します。

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400"
                    AutoPlay="False"
                    AreTransportControlsEnabled="True"/>

メディア トランスポート コントロール

MediaPlayerElement には、再生、停止、一時停止、音量、ミュート、シーク (進行状況)、字幕、オーディオ トラックの選択を処理する組み込みのトランスポート コントロールがあります。 これらのコントロールを有効にするには、AreTransportControlsEnabledtrue に設定します。 これらのコントロールを無効にするには、AreTransportControlsEnabledfalse に設定します。 トランスポート コントロールは、MediaTransportControls クラスで表されます。 トランスポート コントロールは、そのまま使用することも、さまざまな方法でカスタマイズすることもできます。 詳しくは、MediaTransportControls クラスのリファレンスと「Create custom transport controls」をご覧ください。

トランスポート コントロールは 1 行および 2 行のレイアウトをサポートします。 最初の例は、メディアのタイムラインの左側に再生/一時停止ボタンを配置した 1 行のレイアウトです。 このレイアウトは、インライン メディア再生とコンパクトな画面に適しています。

Example of MTC controls, single row

ほとんどの使用シナリオ (特に大きな画面) では、2 行のコントロールのレイアウト (下の図) をお勧めします。 このレイアウトでは、コントロールの領域がより多く確保されており、ユーザーが簡単にタイムラインを操作できます。

Example of MTC controls, double row

システム メディア トランスポート コントロール

MediaPlayerElement は、システム メディア トランスポート コントロールと自動的に統合されます。 システム メディア トランスポート コントロールは、キーボードのメディア ボタンなどのハードウェア メディア キーを押すとポップアップするコントロールです。 詳しくは、SystemMediaTransportControls をご覧ください。

MediaElement は、システム メディア トランスポート コントロールと自動的に統合されないため、自分で接続する必要があります。 詳しくは、「システム メディア トランスポート コントロール」をご覧ください。

メディア ソースを設定する

ネットワーク上のファイルまたはアプリに埋め込まれたファイルを再生する場合は、ファイルのパスを使用して Source プロパティを MediaSource に設定します。

ヒント インターネットからファイルを開くには、アプリのマニフェスト (Package.appxmanifest) でインターネット (クライアント) 機能を宣言する必要があります。 機能の宣言について詳しくは、「アプリ機能の宣言」をご覧ください。

次のコードでは、XAML で定義した MediaPlayerElementSource プロパティを、TextBox に入力したファイルのパスに設定してみます。

<TextBox x:Name="txtFilePath" Width="400"
         FontSize="20"
         KeyUp="TxtFilePath_KeyUp"
         Header="File path"
         PlaceholderText="Enter file path"/>
private void TxtFilePath_KeyUp(object sender, KeyRoutedEventArgs e)
{
    if (e.Key == Windows.System.VirtualKey.Enter)
    {
        TextBox tbPath = sender as TextBox;

        if (tbPath != null)
        {
            LoadMediaFromString(tbPath.Text);
        }
    }
}

private void LoadMediaFromString(string path)
{
    try
    {
        Uri pathUri = new Uri(path);
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

メディア ソースをアプリに埋め込まれたメディア ファイルに設定するには、ms-appx:/// で始まるパスで Uri を初期化し、その Uri で MediaSource を作成してから、Source をその Uri に設定します。 たとえば、Videos サブフォルダーにある video1.mp4 というファイルのパスは、ms-appx:///Videos/video1.mp4 のようになります。

次のコードは、XAML で以前に定義した MediaPlayerElementSource プロパティを ms-appx:///Videos/video1.mp4 に設定します。

private void LoadEmbeddedAppFile()
{
    try
    {
        Uri pathUri = new Uri("ms-appx:///Videos/video1.mp4");
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

ローカル メディア ファイルを開く

ローカル システムや OneDrive のファイルを開くには、FileOpenPicker を使ってファイルを取得し、Source を使ってメディア ソースを設定します。または、プログラムによってユーザーのメディア フォルダーにアクセスすることもできます。

アプリがユーザーの操作なしで、Music または Video フォルダーにアクセスする必要がある場合、たとえばユーザーのコレクションのすべての音楽ファイルやビデオ ファイルを列挙し、アプリで表示する場合は、音楽ライブラリおよびビデオ ライブラリ機能を宣言する必要があります。 詳しくは、「ミュージック、画像、およびビデオ ライブラリのファイルとフォルダー」をご覧ください。

ユーザーはどのファイルにアクセスしているかを完全に制御できるので、FileOpenPicker には、ユーザーの Music または Video フォルダーなど、ローカル ファイル システム上のファイルにアクセスするための特別な機能は必要ありません。 セキュリティとプライバシーの観点から、アプリで使用する機能の数は最小限にすることをお勧めします。

FileOpenPicker を使用してローカル メディア開くには

  1. ユーザーがメディア ファイルを選べるようにするには、FileOpenPicker を呼び出します。

    FileOpenPicker クラスを使って、メディア ファイルを選びます。 FileOpenPicker が表示するファイルの種類を指定する FileTypeFilter を設定します。 PickSingleFileAsync を呼び出して、ファイル ピッカーを起動し、ファイルを取得します。

  2. MediaSource を使用して、選んだメディア ファイルを MediaPlayerElement.Source として設定します。

    FileOpenPicker から返された StorageFile を使用するには、MediaSourceCreateFromStorageFile メソッドを呼び出して、それを MediaPlayerElementSource として設定する必要があります。 その後、MediaPlayerElement.MediaPlayerPlay を呼び出して、メディアを開始します。

この例は、FileOpenPicker を使ってファイルを選び、そのファイルを MediaPlayerElementSource に設定する方法を示しています。

<MediaPlayerElement x:Name="mediaPlayerElement"/>
...
<Button Content="Choose file" Click="Button_Click"/>
private async void Button_Click(object sender, RoutedEventArgs e)
{
    await SetLocalMedia();
}

async private System.Threading.Tasks.Task SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.FileTypeFilter.Add(".wmv");
    openPicker.FileTypeFilter.Add(".mp4");
    openPicker.FileTypeFilter.Add(".wma");
    openPicker.FileTypeFilter.Add(".mp3");

    var file = await openPicker.PickSingleFileAsync();

    // mediaPlayerElement is a MediaPlayerElement control defined in XAML
    if (file != null)
    {
        mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(file);

        mediaPlayerElement.MediaPlayer.Play();
    }
}

ポスター ソースを設定する

PosterSource プロパティを使って、メディアの読み込みが終わるまで MediaPlayerElement に視覚的な表示を提供することができます。 PosterSource は、スクリーン ショットや映画のポスターなど、メディアの代わりに表示される画像です。 PosterSource は、次のような状況で表示されます。

  • 有効なソースが設定されていないとき。 たとえば、Source が設定されていないとき、SourceNull に設定されているとき、またはソースが無効であるとき (MediaFailed イベントが発生したときと同様) です。
  • メディアの読み込み中。 たとえば、有効なソースが設定されていても、MediaOpened イベントがまだ発生していないときです。
  • 別のデバイスにメディアをストリーミングしているとき。
  • メディアがオーディオのみであるとき。

Source がアルバムのトラックに設定され、PosterSource がアルバムの表紙の画像を設定された MediaPlayerElement を以下に示します。

<MediaPlayerElement Source="ms-appx:///Media/Track1.mp4" PosterSource="Media/AlbumCover.png"/>

デバイスの画面をアクティブに維持する

通常、ユーザーがいないときはバッテリーを節約するために画面が暗くなり、最終的には電源がオフになりますが、ビデオ アプリでは、ユーザーがビデオを見られるように画面をオンのままにしておく必要があります。 アプリでビデオを再生しているときなど、無操作状態が検出されてもディスプレイの電源が切れないようにするには、DisplayRequest.RequestActive を呼び出します。 DisplayRequest クラスを使うと、ユーザーがビデオを見られるように画面をオンのままにするよう Windows に指示することができます。

消費電力とバッテリーの駆動時間を節約するため、不要になったら、DisplayRequest.RequestRelease を呼び出して表示要求を解放してください。 Windows は、アプリが画面から消されると自動的にアプリのアクティブな表示要求を非アクティブ化し、アプリがフォアグラウンドに戻ると再びアクティブ化します。

表示要求を解放する必要があるのは、次のような場合です。

  • ユーザーの操作、バッファリング、限られた帯域幅のための調整などでビデオの再生が一時停止になる。
  • 再生が停止する。 たとえば、ビデオの再生が完了したり、プレゼンテーションが終了したりする。
  • 再生エラーが発生した。 たとえば、ネットワーク接続の問題や破損したファイル。

注意

MediaPlayerElement.IsFullWindow が true に設定されていて、メディアが再生されている場合、ディスプレイは自動的に非アクティブ化されません。

画面をアクティブに維持するには

  1. DisplayRequest グローバル変数を作成します。 null に初期化します。
// Create this variable at a global scope. Set it to null.
private DisplayRequest appDisplayRequest = null;
  1. RequestActive を呼び出して、アプリで表示をオンのままにする必要があることを Windows に通知します。

  2. ビデオの再生が再生エラーによって停止、一時停止、中断したときには必ず、RequestRelease を呼び出して表示要求を解放します。 アプリにアクティブな表示要求がなくなった場合、Windows は、デバイスが使われていないときには表示を暗くし、最終的には電源をオフにしてバッテリーを節約します。

    MediaPlayerElement.MediaPlayer には、PlaybackRatePlaybackStatePosition など、メディア再生のさまざまな側面を制御する MediaPlaybackSession 型の PlaybackSession があります。 ここでは、MediaPlayer.PlaybackSessionPlaybackStateChanged イベントを使って、表示要求を解放する必要がある状況を検出します。 次に、NaturalVideoHeight プロパティを使って、オーディオ ファイルとビデオ ファイルのどちらが再生されているかを確認し、ビデオが再生されている場合にのみ画面をアクティブなままにします。

    <MediaPlayerElement x:Name="mediaPlayerElement" Source="ms-appx:///Media/video1.mp4"/>
    
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        mediaPlayerElement.MediaPlayer.PlaybackSession.PlaybackStateChanged += MediaPlayerElement_CurrentStateChanged;
        base.OnNavigatedTo(e);
    }
    
    private void MediaPlayerElement_CurrentStateChanged(object sender, RoutedEventArgs e)
    {
        MediaPlaybackSession playbackSession = sender as MediaPlaybackSession;
        if (playbackSession != null && playbackSession.NaturalVideoHeight != 0)
        {
            if(playbackSession.PlaybackState == MediaPlaybackState.Playing)
            {
                if(appDisplayRequest == null)
                {
                    // This call creates an instance of the DisplayRequest object
                    appDisplayRequest = new DisplayRequest();
                    appDisplayRequest.RequestActive();
                }
            }
            else // PlaybackState is Buffering, None, Opening or Paused
            {
                if(appDisplayRequest != null)
                {
                      // Deactivate the display request and set the var to null
                      appDisplayRequest.RequestRelease();
                      appDisplayRequest = null;
                }
            }
        }
    
    }
    

プログラムでメディア プレーヤーを制御する

MediaPlayerElement には、MediaPlayerElement.MediaPlayer プロパティを介してオーディオやビデオの再生を制御するプロパティ、メソッド、イベントが多数用意されています。 プロパティ、メソッド、イベントの完全な一覧については、MediaPlayer のリファレンス ページをご覧ください。

高度なメディア再生のシナリオ

プレイリストを再生するような複雑なメディア再生のシナリオでは、オーディオ言語間を切り替えたり、カスタム メタデータ トラックを作成したりするため、MediaPlayerElement.SourceMediaPlaybackItem または MediaPlaybackList に設定します。 さまざまな高度なメディア機能を有効にする方法について詳しくは、メディアの再生に関するページをご覧ください。

フル ウィンドウのビデオ レンダリングを有効にする

フル ウィンドウのレンダリングを有効または無効にするには、IsFullWindow プロパティを設定します。 プログラムを使ってアプリにフル ウィンドウのレンダリングを設定する場合、手動で行う代わりに IsFullWindow を常に使う必要があります。 IsFullWindow により、システム レベルの最適化が実行され、パフォーマンスとバッテリーの寿命が向上します。 フル ウィンドウのレンダリングが正しく設定されていない場合、これらの最適化が有効になっていない可能性があります。

フル ウィンドウのレンダリングを切り替える AppBarButton を作成するコードを次に示します。

<AppBarButton Icon="FullScreen"
              Label="Full Window"
              Click="FullWindow_Click"/>>
private void FullWindow_Click(object sender, object e)
{
    mediaPlayerElement.IsFullWindow = !media.IsFullWindow;
}

ビデオのサイズを変更し、拡大する

Stretch プロパティを使って、コンテナー内でのビデオ コンテンツや PosterSource のサイズを変更します。 この要素は、Stretch の値に応じてビデオのサイズ変更と拡大を行います。 Stretch 状態は、多くのテレビ セットの画像サイズの設定に似ています。 ボタンにフックしてユーザーが好みの設定を選ぶことができるようにします。

  • None は、元のサイズでコンテンツのネイティブの解像度を表示します。
  • Uniform は、縦横比、画像コンテンツを維持したままスペースを最大限に使用します。 これにより、ビデオの端に水平方向または垂直方向の黒いバーが表示されることがあります。 これはワイドスクリーン モードに似ています。
  • UniformToFill は、縦横比を維持したままスペース全体を使用します。 これにより、画像の一部がトリミングされることがあります。 これは全画面モードに似ています。
  • Fill は、縦横比を維持せずに、スペース全体を使用します。 画像はトリミングされませんが、拡大されることがあります。 これはストレッチ モードに似ています。

Stretch enumeration values

ここでは、AppBarButton を使って、Stretch オプションを順に切り替えます。 switch ステートメントは、Stretch プロパティの現在の状態をチェックし、Stretch 列挙で次の値を設定します。 これにより、ユーザーはさまざまな拡大の状態を順番に表示することができます。

<AppBarButton Icon="Switch"
              Label="Resize Video"
              Click="PictureSize_Click" />
private void PictureSize_Click(object sender, RoutedEventArgs e)
{
    switch (mediaPlayerElement.Stretch)
    {
        case Stretch.Fill:
            mediaPlayerElement.Stretch = Stretch.None;
            break;
        case Stretch.None:
            mediaPlayerElement.Stretch = Stretch.Uniform;
            break;
        case Stretch.Uniform:
            mediaPlayerElement.Stretch = Stretch.UniformToFill;
            break;
        case Stretch.UniformToFill:
            mediaPlayerElement.Stretch = Stretch.Fill;
            break;
        default:
            break;
    }
}

待機時間が短い再生を可能にする

RealTimePlayback プロパティを true に設定すると、MediaPlayerElement.MediaPlayer の再生の最初の待機時間を短くすることができます。 これは双方向通信アプリには重要で、ゲームのシナリオにも適用できる場合があります。 このモードでは、リソースがより多く消費され、電力効率が低下する点に注意してください。

この例では、MediaPlayerElement を作って、RealTimePlaybacktrue に設定します。

MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();
mediaPlayerElement.MediaPlayer.RealTimePlayback = true;

サンプル コードを入手する