ASP.NET Web ページ (Razor) サイトでのビデオの表示

[アーティクル]
05/30/2024

この記事では、ASP.NET Web ページ (Razor) Web サイトでビデオ (メディア) プレーヤーを使用して、サイトに保存されているビデオをユーザーが表示できるようにする方法について説明します。 Razor 構文を使用した ASP.NET Web ページでは、Flash (.swf)、Media Player (.wmv)、Silverlight (.xap) のビデオを再生できます。

ここでは、次の内容について学習します。

ビデオプレーヤーを選択する方法。

Web ページにビデオを追加する方法。

ビデオプレーヤーの属性を設定する方法。

この記事で紹介する ASP.NET Razor ページの機能は次のとおりです。

Video ヘルパー。

チュートリアルで使用するソフトウェアのバージョン

ASP.NET Web ページ (Razor) 2

WebMatrix 2

このチュートリアルは、WebMatrix 3 でも動作します。

はじめに

サイトにビデオを表示したい場合があります。これを行う 1 つの方法は、ビデオが既にあるサイト (YouTube など) にリンクすることです。このようなサイトのビデオを自分のページに直接埋め込むには、通常、サイトから HTML マークアップを取得し、それをページにコピーします。たとえば、次の例は、YouTube のビデオを埋め込む方法を示しています。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Embedded Video Example</title>
    </head>
    <body>
        <h1>Embedded Video Example</h1>
        <p>The following video provides an introduction to WebMatrix:</p>
        <iframe width="560" 
                height="315" 
                src="http://www.youtube.com/embed/fxCEcPxUbYA" 
                frameborder="0" 
                allowfullscreen></iframe>
</body>
</html>

(パブリックビデオ共有サイトではなく) 自分の Web サイトにあるビデオを再生したい場合は、このような埋め込みマークアップを使用して、それに直接リンクすることはできません。しかし、ページ内でメディアプレーヤーを直接レンダリングする Video ヘルパーを使用すれば、自分のサイトからビデオを再生できます。

ビデオプレーヤーの選択

ビデオファイルには多くの形式があり、通常は、形式ごとに異なるプレーヤーが必要です。また、そのプレーヤーを構成する方法も異なります。 ASP.NET Razor ページでは、Video ヘルパーを使用して Web ページでビデオを再生できます。 Video ヘルパーにより Web ページにビデオを埋め込むプロセスが簡略化されます。これは、ビデオをページに追加するときに通常使用される object および embed HTML 要素が、このヘルパーによって自動的に生成されるためです。

Video ヘルパーは、次のメディアプレーヤーをサポートしています。

Adobe Flash
Windows MediaPlayer
Microsoft Silverlight

Flash プレーヤー

Video ヘルパーの Flash プレーヤーを使用すると、Web ページで Flash ビデオ (.swf ファイル) を再生できます。少なくとも、ビデオファイルへのパスを指定する必要があります。パスのみを指定すると、現在のバージョンの Flash で設定されている既定値が使用されます。標準的な既定の設定は次のとおりです。

ビデオは、既定の幅と高さを使用して、背景色なしで表示されます。
ビデオは、ページが読み込まれると自動的に再生されます。
ビデオは、明示的に停止されるまでループし続けます。
ビデオは、すべてのビデオが表示されるようにスケーリングされます。特定のサイズに合わせてトリミングされることはありません。
ビデオはウィンドウで再生されます。

MediaPlayer プレーヤー

Video ヘルパーの MediaPlayer プレーヤーを使用すると、Web ページで、Windows Media ビデオ (.wmv ファイル)、Windows Media オーディオ (.wma ファイル)、MP3 (.mp3 ファイル) を再生できます。再生するメディアファイルのパスを含める必要があります。その他のパラメーターはすべて省略可能です。パスのみを指定すると、MediaPlayer の現在のバージョンによって設定されている、次のような既定の設定が使用されます。

ビデオは、既定の幅と高さで表示されます。
ビデオは、ページが読み込まれると自動的に再生されます。
ビデオは 1 回再生されます (ループしません)。
プレーヤーによって、完全なコントロールセットがユーザーインターフェイスに表示されます。
ビデオはウィンドウで再生されます。

Silverlight プレーヤー

Video ヘルパーの Silverlight プレーヤーを使用すると、Windows Media ビデオ (.wmv ファイル)、Windows Media オーディオ (.wma ファイル)、MP3 (.mp3 ファイル) を再生できます。 Silverlight ベースのアプリケーションパッケージ (.xap ファイル) を指定するパスパラメーターを設定する必要があります。また、幅と高さのパラメーターを設定する必要もあります。その他のパラメーターはすべて省略可能です。ビデオに Silverlight プレーヤーを使用する場合、必須パラメーターのみを設定すると、Silverlight プレーヤーでは背景色なしでビデオが表示されます。

Note

Silverlight をまだご存知ない方のために説明すると、.xap ファイルは、.xaml ファイルのレイアウト命令、アセンブリのマネージドコード、オプションのリソースを含む圧縮ファイルです。 .xap ファイルは、Visual Studio で Silverlight アプリケーションプロジェクトとして作成できます。

Silverlight ビデオプレーヤーでは、プレーヤーに対して指定した設定と、.xap ファイルで指定されている設定の両方が使用されます。

ヒント

MIME の種類

ブラウザーでは、ファイルがダウンロードされるときに、そのファイルの種類が、レンダリングされているドキュメントに対して指定されている MIME の種類と一致することが確認されます。 MIME の種類は、ファイルのコンテンツタイプまたはメディアタイプです。 Video ヘルパーでは、次の MIME の種類が使用されます。

application/x-shockwave-flash
application/x-mplayer2
application/x-silverlight-2

Flash (.swf) ビデオの再生

この手順は、sample.swf という名前の Flash ビデオを再生する方法を示しています。この手順では、サイトに Media という名前のフォルダーがあり、そのフォルダーに .swf ファイルがあることを前提としています。

「ASP.NET Web ページサイトへのヘルパーのインストール」で説明されているように、ASP.NET Web ヘルパーライブラリを Web サイトに追加します (まだ追加していない場合)。
Web サイトでページを追加し、FlashVideo.cshtml という名前を付けます。

次のマークアップをそのページに追加します。

<!DOCTYPE html>
<html>
<head>
    <title>Flash Video</title>
</head>
<body>
    @Video.Flash(path: "Media/sample.swf",
                 width: "400",
                 height: "600",
                 play: true,
                 loop: true,
                 menu:  false,
                 bgColor: "red",
                 quality: "medium",
                 scale: "exactfit",
                 windowMode: "transparent")
</body>
</html>

ブラウザーでページを実行します。 (実行する前に、ファイル ワークスペース内でこのページが選択されていることを確認してください)。ページが表示され、ビデオが自動的に再生されます。

Flash ビデオの quality パラメーターは、low、autolow、autohigh、medium、high、best に設定できます。

<!-- Set the Flash video quality -->
@Video.Flash(path: "Media/sample.swf", quality: "autohigh")

scale パラメーターを使用して、Flash ビデオが特定のサイズで再生されるように変更できます。設定できる値は次のとおりです。

showall。元の縦横比を維持しながらビデオ全体が表示されます。ただし、両側に境界線が表示されることがあります。
noorder。元の縦横比を維持しながらビデオが拡大縮小されますが、トリミングされる可能性があります。
exactfit。元の縦横比を維持せずにビデオ全体が表示されますが、歪みが発生する可能性があります。

scale パラメーターを指定しない場合、ビデオ全体が表示され、元の縦横比がトリミングされずに維持されます。次の例は、scale パラメーターを使用する方法を示しています。

<!-- Set the Flash video to an exact size -->
@Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",
    scale: "exactfit")

Flash プレーヤーは、windowMode という名前のビデオモード設定をサポートしています。これは、window、opaque、transparent に設定できます。既定では、windowMode ビデオは window に設定され、ビデオは Web ページ上の別のウィンドウで表示されます。 opaque に設定すると、Web ページ上で、ビデオの背後にあるすべてのものが非表示になります。 transparent に設定すると、ビデオの背後にある Web ページの背景が表示されます。これは、ビデオの一部が透明であることを前提としています。

MediaPlayer (.wmv) ビデオの再生

次の手順は、Media フォルダーにある sample.wmv という名前の Window Media ビデオを再生する方法を示しています。

「ASP.NET Web ページサイトへのヘルパーのインストール」の中で説明されているように、(まだ行っていない場合は) ASP.NET Web ヘルパーライブラリを Web サイトに追加します。
MediaPlayerVideo.cshtml という名前の新しいページを作成します。

次のマークアップをそのページに追加します。

<!DOCTYPE html>
<html>
<head>
  <title>MediaPlayer Video</title>
</head>
<body>
    @Video.MediaPlayer(
        path: "Media/sample.wmv",
        width: "400",
        height: "600",
        autoStart: true,
        playCount: 2,
        uiMode:  "full",
        stretchToFit: true,
        enableContextMenu: true,
        mute: false,
        volume: 75)
</body>
</html>

ブラウザーでページを実行します。ビデオが自動的に読み込まれ再生されます。

playCount を、ビデオの自動再生回数を示す整数に設定できます。

<!-- Set the MediaPlayer video playCount -->
@Video.MediaPlayer(path: "Media/sample.wmv", playCount: 2)

uiMode パラメーターを使用すると、ユーザーインターフェイスに表示するコントロールを指定できます。 uiMode は invisible、none、mini、full のいずれかに設定できます。 uiMode パラメーターを指定しない場合、ビデオと共に表示されるのは、ビデオウィンドウのほか、ステータスウィンドウ、シークバー、コントロールボタン、ボリュームコントロールです。これらのコントロールは、プレーヤーを使用してオーディオファイルを再生する場合も表示されます。 uiMode パラメーターを使用する方法の例を次に示します。

<!-- Set the MediaPlayer control UI -->
@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

既定では、ビデオの再生時、オーディオがオンになります。オーディオをミュートするには、mute パラメーターを true に設定します。

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)

MediaPlayer ビデオのオーディオレベルを制御するには、volume パラメーターを 0 から 100 の値に設定します。既定値は 50 です。次に例を示します。

<!-- Play the MediaPlayer video without audio -->
@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

Silverlight ビデオの再生

この手順は、Media という名前のフォルダーにある Silverlight .xap ページに含まれるビデオを再生する方法を示しています。

「ASP.NET Web ページサイトへのヘルパーのインストール」で説明されているように、ASP.NET Web ヘルパーライブラリを Web サイトに追加します (まだ追加していない場合)。
SilverlightVideo.cshtml という名前の新しいページを作成します。

次のマークアップをそのページに追加します。

<!DOCTYPE html>
<html>
<head>
  <title>Silverlight Video</title>
</head>
<body>
    @Video.Silverlight(
        path: "Media/sample.xap",
        width: "400",
        height: "600",
        bgColor: "red",
        autoUpgrade: true)
</body>
</html>

ブラウザーでページを実行します。

その他のリソース

Silverlight の概要

Flash OBJECT および EMBED タグ属性

Azure Media Player 11 SDK PARAM タグ

次の方法で共有

ASP.NET Web ページ (Razor) サイトでのビデオの表示

チュートリアルで使用するソフトウェアのバージョン

はじめに

ビデオプレーヤーの選択

Flash プレーヤー

MediaPlayer プレーヤー

Silverlight プレーヤー

MIME の種類

Flash (.swf) ビデオの再生

MediaPlayer (.wmv) ビデオの再生

Silverlight ビデオの再生

その他のリソース

フィードバック

その他のリソース

次の方法で共有

ASP.NET Web ページ (Razor) サイトでのビデオの表示

チュートリアルで使用するソフトウェアのバージョン

はじめに

ビデオ プレーヤーの選択

Flash プレーヤー

MediaPlayer プレーヤー

Silverlight プレーヤー

MIME の種類

Flash (.swf) ビデオの再生

MediaPlayer (.wmv) ビデオの再生

Silverlight ビデオの再生

その他のリソース

フィードバック

その他のリソース

ビデオプレーヤーの選択