QuickTimeのWebページ埋め込み方法｜QuickTime｜音声・動画配信（ストリーミング）

TOP 音声・動画配信（ストリーミング）QuickTimeのWebページ埋め込み方法

QuickTimeのWebページ埋め込み〔基本的な記述例〕
QuickTimeのWebページ埋め込み〔コントロール非表示・自動再生〕
QuickTimeのWebページ埋め込み〔コントロール表示・自動再生〕
QuickTimeのWebページ埋め込み〔ActiveXコントロール　※IEのみ〕
QuickTimeのWebページ埋め込み〔SCALEでムービーサイズ調整・拡大縮小〕
リンクを貼って再生させる方法

QuickTimeのWebページ埋め込み
基本的な記述例

unknown

赤字部分を変更したスクリプトをWebページに貼り付ければ、簡単にメタファイルをWebページに埋め込めます。

以下の例ではobject要素・embed要素のsrc、qtsrcにメタファイルまたは音声・動画ファイルへのパスを指定しています。これはHTTPサーバーからプログレッシブダウンロード再生をする場合の指定です。

ストリーミングサーバーからリアルタイムストリーミング再生する場合は、srcの指定がダミーファイルへのパスになります。詳細は配信方法によって異なる src、qtsrcの指定で解説していますので、こちらを参考に変更して下さい。

例では見やすくするため、embed要素内で改行していますが、実際はembed要素内で改行しないようにして下さい。改行しても動作しますが、環境によってエラーが発生する場合があります。

プログレッシブダウンロード再生（HTTPサーバーから配信）の記述例

<object 
    name="QT" 
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
    type="video/quicktime" 
    codebase="http://www.apple.com/qtactivex/qtplugin.cab" 
    width="プレーヤーの幅(px)" height="プレーヤーの高さ(px)">
<!-- 
    src、qtsrcにメタファイルまたは音声・動画ファイルへのパスを指定
    音声・動画ファイルへのパス指定する場合は、
    src="http://HTTPサーバー名/パス/音声・動画ファイル名.mov"
    qtsrc="http://HTTPサーバー名/パス/音声・動画ファイル名.mov"
 -->
    <param name="src" value="http://www.sample.com/パス/メタファイル.mov" /><!-- 絶対パス -->
    <param name="qtsrc" value="http://www.sample.com/パス/メタファイル.mov" /><!-- 絶対パス -->
    <param name="autoplay" value="true" /><!-- 自動再生 -->
    <param name="controller" value="true" /><!-- コントロール非表示 -->
    <param name="bgcolor" value="#000000" /><!-- 背景色 -->

    <embed 
        name="QT" 
        src="http://www.sample.com/パス/メタファイル.mov" 
        qtsrc="http://www.sample.com/パス/メタファイル.mov"
        autoplay="true" 
        controller="true" 
        bgcolor="#000000" 
        width="プレーヤーの幅(px)" height="プレーヤーの高さ(px)" 
        pluginspage="http://www.apple.com/qtactivex/qtplugin.cab"
    ><!-- src属性・qtsrc属性は共に絶対パス -->
    </embed>

</object>

リアルタイムストリーミング再生（ストリーミングサーバーから配信）の記述例

<object 
    name="QT" 
    classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
    type="video/quicktime" 
    codebase="http://www.apple.com/qtactivex/qtplugin.cab" 
    width="プレーヤーの幅(px)" height="プレーヤーの高さ(px)">

    <!-- ダミーファイルへのパス -->
    <param name="src" value="./パス/QuickTime4_Required.mov" /><!-- src属性は絶対・相対パスどちらでもOK -->
    <!-- メタファイルへのパス -->
    <param name="qtsrc" value="./パス/メタファイル名.mov" /><!-- qtsrc属性は絶対・相対パスどちらでもOK -->
    <param name="autoplay" value="true" /><!-- 自動再生 -->
    <param name="controller" value="true" /><!-- コントロール非表示 -->
    <param name="bgcolor" value="#000000" /><!-- 背景色 -->

    <embed 
        name="QT" 
        src="./パス/QuickTime4_Required.mov" 
        qtsrc="./パス/メタファイル名.mov"
        autoplay="true" 
        controller="true" 
        bgcolor="#000000" 
        width="プレーヤーの幅(px)" height="プレーヤーの高さ(px)" 
        pluginspage="http://www.apple.com/qtactivex/qtplugin.cab"><!-- src属性・qtsrc属性は絶対・相対パスどちらでもOK -->
    </embed>

</object>

QuickTimeのWebページ埋め込み
コントロール非表示・自動再生

unknown

QuickTimeのWebページ埋め込み－コントロール非表示・自動再生

コントロールを非表示にした場合は、ムービーを自動再生するように指定します。

	object要素	embed要素
自動再生	<param name="autoplay" value="true" />	autoplay="true"
コントロール非表示	<param name="controller" value="false" />	controller="false"

この例は、HTTPサーバーからプログレッシブダウンロード再生する場合の例です。ストリーミングサーバーからリアルタイムストリーミング再生する場合は配信方法によって異なる src、qtsrcの指定を参考にsrcにダミーファイルへのパスを、qtsrcにメタファイルまたはメタファイルへのパスを指定して下さい。
IEでは、ActiveX関連のセキュリティが強化されたため、以下のサンプルを表示すると、ActiveXコンロトールのセキュリティアラートが表示されます。このアラートを非表示にする方法は、埋め込みタグをJavascript化(IE対策)で解説しています。

サンプルを見る

<object 
	name="QT" 
	classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
	width="190" height="240" 
	codebase="http://www.apple.com/qtactivex/qtplugin.cab">

	<param name="src" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="qtsrc" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="autoplay" value="true" /><!-- 自動再生 -->
	<param name="controller" value="false" /><!-- コントロール非表示 -->

	<!-- 自動再生（autostart="true"）、コントロール非表示（controller="false"） -->
	<embed 
		name="QT" 
		pluginspage="http://www.apple.co.kp/quicktime/download/" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		qtsrc="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		width="190" height="240" 
		autoplay="true" 
		controller="false"
	><!-- src属性・qtsrc属性共に絶対パス -->
	</embed>

</object>

QuickTimeのWebページ埋め込み
コントロール表示・自動再生

unknown

QuickTimeのWebページ埋め込み－コントロール表示・自動再生

ムービーの高さにコントロール部分の高さ(16px)をプラスした値をheight属性に指定。
この例では、ムービーの高さ(240px) + コントロール部分(16px）= 256px 。

	object要素	embed要素
自動再生	<param name="autoplay" value="true" />	autoplay="true"
コントロール表示	<param name="controller" value="true" />	controller="true"

この例は、HTTPサーバーからプログレッシブダウンロード再生する場合の例です。ストリーミングサーバーからリアルタイムストリーミング再生する場合は、配信方法によって異なる src、qtsrcの指定を参考にsrcにダミーファイルへのパスを、qtsrcにメタファイルまたはメタファイルへのパスを指定して下さい。
IEでは、ActiveX関連のセキュリティが強化されたため、以下のサンプルを表示すると、ActiveXコンロトールのセキュリティアラートが表示されます。このアラートを非表示にする方法は、埋め込みタグをJavascript化(IE対策)で解説しています。

サンプルを見る

<object 
	name="QT" 
	classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
	width="190" height="256" 
	codebase="http://www.apple.com/qtactivex/qtplugin.cab">

	<param name="src" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="qtsrc" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="autoplay" value="true" /><!-- 自動再生 -->
	<param name="controller" value="true" /><!-- コントロール表示 -->

	<!-- 自動再生（autostart="true"）、コントロール表示（controller="true"） -->
	<embed 
		name="QT" 
		pluginspage="http://www.apple.co.kp/quicktime/download/" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.mov"
		qtsrc="http://phpjavascriptroom.com/content/media/meta_sample.mov"
		width="190" height="256" 
		autoplay="true" 
		controller="true"
	><!-- src属性・qtsrc属性共に絶対パス -->
	</embed>

</object>

QuickTimeのWebページ埋め込み
ActiveXコントロール　※IEのみ

unknown

IE　　※IE以外のブラウザではActiveXコントロールを使用してプレーヤーを操作することはできません。

QuickTimeのWebページ埋め込み－ ActiveXコントロール　※IEのみ

ActiveXコントロールを使って、「再生」、「停止」を制御することができます。 Javascriptで記述した各処理を、フォームボタンやリンクのonClickイベントで呼び出します。 フォームボタンは、form要素内に記述して下さい。そうでないと動作しません。

object要素とembed要素のnameに指定した共通のプレーヤー名（以下の例では'QT'）をdocument.プレーヤー名.play()のようにプレーヤーとActiveXコントロールを関連付けます。

	object要素	embed要素
自動再生しない	<param name="autoplay" value="false" />	autoplay="false"
コントロール表示	<param name="controller" value="true" />	controller="true"
JavaScript有効	<param name="enabledjavascript" value="true" />	enablejavascript="true"

この例は、HTTPサーバーからプログレッシブダウンロード再生する場合の例です。ストリーミングサーバーからリアルタイムストリーミング再生する場合は、配信方法によって異なる src、qtsrcの指定を参考にsrcにダミーファイルへのパスを、qtsrcにメタファイルまたはメタファイルへのパスを指定して下さい。
IEでは、ActiveX関連のセキュリティが強化されたため、以下のサンプルを表示すると、ActiveXコンロトールのセキュリティアラートが表示されます。このアラートを非表示にする方法は、埋め込みタグをJavascript化(IE対策)で解説しています。

サンプルを見る

<!-- ムービー部分 -->
<object 
	name="QT" 
	classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
	width="190" height="240" 
	codebase="http://www.apple.com/qtactivex/qtplugin.cab">

	<param name="src" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス指定 -->
	<param name="qtsrc" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス指定 -->
	<param name="autoplay" value="false" /><!-- 自動再生しない -->
	<param name="CONTROLLER" value="false" /><!-- コントロール非表示 -->
	<param name="enablejavascript" value="true" /><!-- JavaScript有効 -->

	<!-- 自動再生しない（autostart="false"）、コントロール非表示（controller="false"）、JavaScript有効（enablejavascript="true"） -->
	<embed 
		name="QT" 
		pluginspage="http://www.apple.co.kp/quicktime/download/" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		qtsrc="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		width="190" height="240" 
		autoplay="false" 
		controller="false" 
		enablejavascript="true"
	><!-- src属性・qtsrc属性共に絶対パス指定 -->
	</embed>

</object>

<div style="width:190px; text-align:center; margin:10px 0;">
	<!-- ActiveXコントロールを使用したフォームボタン部分 -->
	<form>
		<input type="button" value="再生" onclick="document.QT.Play();" /><!-- 再生ボタン -->
		<input type="button" value="停止" onclick="document.QT.Stop();" /><!-- 停止ボタン -->
	</form>
</div>

QuickTimeのWebページ埋め込み
SCALEでムービーサイズ調整・拡大縮小

unknown

QuickTimeでは、ムービーをオリジナルサイズ以外のサイズで表示する場合は、widthとheightだけでなく、scaleでムービーサイズの調整・拡大縮小を指定します。

scale
scaleの値	表示例	説明
指定なし	サンプルを見る	scaleを指定しない（省略した）場合は、指定したサイズにムービーが切り取られて表示されます。
tofit	サンプルを見る	`<param name='SCALE' value='tofit' />` 指定したサイズに合わせてムービー全体がリサイズされます。ご覧の通りオリジナルサイズの縦横比率は維持されません。指定するサイズによって歪みが生じます。
aspect	サンプルを見る	`<param name='SCALE' value='aspect' />` オリジナルサイズの縦横比率を維持したまま、指定したサイズに合わせてムービー全体がリサイズされます。余白部分は背景色（bgcolor）で指定した色に塗りつぶされます。
数値	サンプルを見る	`<param name='SCALE' value='0.2' />` オリジナルサイズの縦横比率を維持したまま、数値で指定した倍率に合わせてムービー全体がリサイズされます。等倍なら1、1.5倍なら1.5のように指定します。余白部分は背景色（bgcolor）で指定した色に塗りつぶされます。

オリジナルサイズの縦横比率を維持し、なおかつ余白なしのジャストサイズでムービーを表示するには、scaleに「数値」または「aspect」を指定するとよいです。

以下は、scaleを「数値」（倍率）を指定して、ムービーを半分サイズ（0.5倍）で表示する例です。

でもその前に、注意する点が1つ！

コントロール非表示（controller="false"）の場合は、単純にムービーの半分サイズをwidth・heightに指定するだけOKですが、コントロール表示（controller="true"）の場合は、heightにコントロールの高さ（16px）をプラスするのを忘れないように。そうでないと以下の表示例のように切り取られた感じで表示されてしまいます。

ムービーのオリジナルサイズ（W:190px × H:240px）

コントロール非表示の場合

width="190" height="240"
　↓
width="95" height="120" scale="0.5"

オリジナルサイズを半分にしたサイズをwidth・heightに指定すすればきちんと半分サイズで表示されます。

サンプルを見る

<!-- 
・コントロール非表示
・数値で指定した倍率にムービーサイズを拡大縮小
・ムービーのオリジナルサイズ（190px * 240px）→ 0.5倍のサイズに
 -->
<object 
	name="QT" 
	classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
	width="95" height="120" 
	codebase="http://www.apple.com/qtactivex/qtplugin.cab">

	<param name="SRC" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="QTSRC" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="CONTROLLER" value="false" /><!-- コントロール非表示 -->
	<param name="AUTOPLAY" value="true" /><!-- 自動再生 -->
	<param name="BGCOLOR" value="#000000" /><!-- 背景色 -->
	<param name="SCALE" value="0.5" /><!-- ムービーサイズ拡大縮小（0.5倍） -->

	<embed 
		name="QT" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		qtsrc="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		controller="false" 
		autoplay="true" 
		bgcolor="#000000"
		scale="0.5" 
		width="95" height="120" 
		pluginspage="http://www.apple.co.kp/quicktime/download/"
	><!-- src属性・qtsrc属性共に絶対パス -->
	</embed>

</object>

コントロール表示の場合

間違った例

width="190" height="240"
　↓
width="95" height="120" scale="0.5"

ムービーの高さにコントロールの高さをプラスしていないので、コントロールの一部が切り取られた感じで表示されています。

サンプルを見る

<!-- 
・コントロール表示
・数値で指定した倍率にムービーサイズを拡大縮小
・ムービーのオリジナルサイズ（190px * 240px）→ 0.5倍のサイズに
 -->
<object 
	name="QT" 
	classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
	width="95" height="120" 
	codebase="http://www.apple.com/qtactivex/qtplugin.cab">

	<param name="SRC" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="QTSRC" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="CONTROLLER" value="true" /><!-- コントロール表示 -->
	<param name="AUTOPLAY" value="true" /><!-- 自動再生 -->
	<param name="BGCOLOR" value="#000000" /><!-- 背景色 -->
	<param name="SCALE" value="0.5" /><!-- ムービーサイズ拡大縮小（0.5倍） -->

	<embed 
		name="QT" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		qtsrc="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		controller="true" 
		autoplay="true" 
		bgcolor="#000000"
		scale="0.5" 
		width="95" height="120" 
		pluginspage="http://www.apple.co.kp/quicktime/download/"
	><!-- src属性・qtsrc属性共に絶対パス -->
	</embed>

</object>

正しい例

width="190" height="240"
　↓
width="95" height="136" scale="0.5"

widthにはオリジナルサイズを半分にしたサイズを指定しますが、heightには、それにコントロールの高さ（16px）をプラスした高さを指定します。この場合は、120px + 16px = 136pxになります。

サンプルを見る

<!-- 
・コントロール非表示
・数値で指定した倍率にムービーサイズを拡大縮小
・ムービーのオリジナルサイズ（190px * 240px）→ 0.5倍のサイズに
 -->
<object 
	name="QT" 
	classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
	width="95" height="136" 
	codebase="http://www.apple.com/qtactivex/qtplugin.cab">

	<param name="SRC" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="QTSRC" value="http://phpjavascriptroom.com/content/media/meta_sample.mov" /><!-- 絶対パス -->
	<param name="CONTROLLER" value="true" /><!-- コントロール表示 -->
	<param name="AUTOPLAY" value="true" /><!-- 自動再生 -->
	<param name="BGCOLOR" value="#000000" /><!-- 背景色 -->
	<param name="SCALE" value="0.5" /><!-- ムービーサイズ拡大縮小（0.5倍） -->

	<embed 
		name="QT" 
		src="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		qtsrc="http://phpjavascriptroom.com/content/media/meta_sample.mov" 
		controller="true" 
		autoplay="true" 
		bgcolor="#000000"
		scale="0.5" 
		width="95" height="136" 
		pluginspage="http://www.apple.co.kp/quicktime/download/"
	><!-- src属性・qtsrc属性共に絶対パス -->
	</embed>

</object>

リンクを貼って再生させる方法

unknown

メタファイルまたは音声・動画ファイルのパスを、a要素のhref属性に指定し、リンクとしてWebページに貼ります。

（QuickTime がユーザーのパソコンにインストールされていれば）リンクをクリックすると、新ウィンドウが開き、ブラウザ上で再生が始まります

同一ウィンドウで再生させる場合は、a要素のtarget属性に「_self」を指定します。デフォルトは「_blank」（新ウィンドウを開いて再生）です。

リンクにメタファイルを指定した場合、必ずストリーミング再生されるとは限りません。音声・動画ファイルがストリーミング再生されるか、プログレッシブダウンロード再生されるかは、コンテンツプロバイダの判断に委ねられます。

プログレッシブダウンロード再生（HTTPサーバーから配信）の場合

<a href="http://HTTPサーバー/パス/音声・動画ファイル名.mov" target="_self">プログレッシブダウンロード再生</a>

<a href="http://HTTPサーバー/パス/メタファイル名.mov" target="_self">プログレッシブダウンロード再生（メタファイル使用）</a>

リアルタイムストリーミング再生（ストリーミングサーバーから配信）の場合

<a href="rtsp://サーバー名/パス/音声・動画ファイル名.mov" target="_self">リアルタイムストリーミング再生</a>

<a href="./パス/メタファイル名.mov" target="_self">リアルタイムストリーミング再生（メタファイル使用）</a>

QuickTime QuickTimeのコントロールの種類

音声各種プレーヤーによる音声ファイルの配信方法

PHP & JavaScript Room

QuickTimeQuickTimeのWebページ埋め込み方法

QuickTimeのWebページ埋め込み
基本的な記述例

プログレッシブダウンロード再生（HTTPサーバーから配信）の記述例

リアルタイムストリーミング再生（ストリーミングサーバーから配信）の記述例

QuickTimeのWebページ埋め込み
コントロール非表示・自動再生

QuickTimeのWebページ埋め込み
コントロール表示・自動再生

QuickTimeのWebページ埋め込み
ActiveXコントロール　※IEのみ

QuickTimeのWebページ埋め込み
SCALEでムービーサイズ調整・拡大縮小

コントロール非表示の場合

コントロール表示の場合

間違った例

正しい例

リンクを貼って再生させる方法

プログレッシブダウンロード再生（HTTPサーバーから配信）の場合

リアルタイムストリーミング再生（ストリーミングサーバーから配信）の場合

関連コンテンツ

QuickTimeQuickTimeのWebページ埋め込み方法

QuickTimeのWebページ埋め込み基本的な記述例

プログレッシブダウンロード再生（HTTPサーバーから配信）の記述例

リアルタイムストリーミング再生（ストリーミングサーバーから配信）の記述例

QuickTimeのWebページ埋め込みコントロール非表示・自動再生

QuickTimeのWebページ埋め込みコントロール表示・自動再生

QuickTimeのWebページ埋め込みActiveXコントロール ※IEのみ

QuickTimeのWebページ埋め込みSCALEでムービーサイズ調整・拡大縮小

コントロール非表示の場合

コントロール表示の場合

間違った例

正しい例

リンクを貼って再生させる方法

プログレッシブダウンロード再生（HTTPサーバーから配信）の場合

リアルタイムストリーミング再生（ストリーミングサーバーから配信）の場合

関連コンテンツ

QuickTimeのWebページ埋め込み
基本的な記述例

QuickTimeのWebページ埋め込み
コントロール非表示・自動再生

QuickTimeのWebページ埋め込み
コントロール表示・自動再生

QuickTimeのWebページ埋め込み
ActiveXコントロール　※IEのみ

QuickTimeのWebページ埋め込み
SCALEでムービーサイズ調整・拡大縮小