動画をページに埋め込む方法

メトロ版のIE10はプラグイン非対応のため、ここで紹介する方法では動画を表示できません。よってデスクトップ版による表示を促すため、次のタグを<head>内に記述します。

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />
Developer guidance for websites with content for Adobe Flash Player in Windows 8 (Internet Explorer) | MSDN

または、HTML5からサポートされるvideo要素を使用します。

object要素のみで記述する方法

<object data="URL" type="MIME Type" width="" height="">
    <param name="movie" value="URL" />
</object>

URLが2か所記述されていますが、object要素のdata属性がMozilla系のためで、param要素がInternet Explorer向けです。

MIME Type
  種類 ファイル拡張子 MIME Type
  Advanced Systems Format .asf video/x-ms-asf
Advanced Stream Redirector .asx video/x-ms-asx
  Windows Media Audio .wma audio/x-ms-wma
Windows Media Audio Redirector .wax audio/x-ms-wax
  Windows Media Video .wmv video/x-ms-wmv
Windows Media Video Redirector .wvx video/x-ms-wvx
  Windows Media File .wm video/x-ms-wm
Windows Media Redirector .wmx video/x-ms-wmx
    .wmz application/x-ms-wmz
  .wmd application/x-ms-wmd
  Flash .swf application/x-shockwave-flash
Flash Video .flv video/x-flv
Windows Media Service へのサービス提供 | MSDN

実行例

<object data="http://www.youtube.com/v/DEgtj9zAf7s" type="application/x-shockwave-flash" width="300" height="200">
    <param name="movie" value="http://www.youtube.com/v/DEgtj9zAf7s"></param>
</object>

embed要素を用いて記述する方法

Mozilla系向けにembed要素のsrc属性でファイルのURLを指定します。Internet Explorer向けのparam要素の記述は、前述の方法と同じです。

<object width="" height="">
    <param name="movie" value="URL" />     <!-- for IE -->
    <embed src="URL" width="" height="" /> <!-- for Mozilla -->
</object>

実行例

プラグインが必要です。 
<object width="300" height="200">
    <param name="movie" value="http://www.youtube.com/v/DEgtj9zAf7s"></param>
    <embed src="http://www.youtube.com/v/DEgtj9zAf7s" width="300" height="200" />
    <noembed>プラグインが必要です。</noembed>
</object>

embed要素はXHTMLでは使用が推奨されていないため、object要素だけで記述すべきです。embed要素 XHTML HTML辞典

プレーヤーの属性

Flash Player

必須

objectとembed両方
属性 説明
width 動画の幅をピクセル単位またはウィンドウに対する割合で指定
height 動画の高さをピクセル単位またはウィンドウに対する割合で指定
object要素のみ
属性 説明
classid ActiveXコントロールのID 
clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
codebase Flash Player ActiveXコントロールのURL 
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0
movie 動画のURL
embed要素のみ
属性 説明
src 動画のURL
pluginspage Flash Playerプラグインがインストールされていないときに、それをダウンロードするためのURL 
http://www.macromedia.com/go/getflashplayer
 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="100" height="100" movie="movie.swf">
  <embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="100" height="100" src="movie.swf" />
</object>

オプション

属性 説明 既定値
id Flash動画のID  
name Flash動画のID  
swliveconnect Flash Palyerを読み込むときにJavaを開始するかどうか
  • true
  • false
 false
play 自動で再生するかどうか
  • true
  • false
 true
loop
  • true
  • false
 true
menu
  • true
  • false
  
quality
  • low
  • high
  • autolow
  • autohigh
  • best
  
scale
  • showall
  • noborder
  • exactfit
  • noscale
 showall
align
  • l … left
  • t … right
  • r … top
 center
salign
  • l … left
  • t … top
  • r … right
  • tl … top left
  • tr … top right
  
wmode
  • window
  • opaque
  • transparent
  
bgcolor #RRGGBBの形式  
base    
flashvars    
fullScreenAspectRatio
  • portrait
  • landscape
  
Optional attributes and possible values

参考

Windows Media Player

object要素
属性 説明
classid WMP7.0より前
CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95
WMP7.0以降
CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6
param要素
属性 説明 ブラウザによるサポート
IE Firefox
(application/x-ms-wmp)		 Firefox
(他のmime type)
autoStart 自動再生
  • true
  • false
 ○ ○ ○
balance 音量の左右バランス
-100 ～ 100		 ○ ○ ○
baseURL   ○ ○ ○
captioningID   ○ ○ ○
currentPosition 再生位置 (先頭からの秒数) ○ ○ ○
currentMarker   ○ ○ ○
defaultFrame   ○ × ×
enableContextMenu コンテキストメニューの有効/無効 ○ ○ ○
enabled コントロールの有効/無効 ○ ○ ○
enableErrorDialogs   ○ ○ ×
fileName   × ○ ○
fullScreen フルスクリーンの有効/無効 ○ × ×
invokeURLs   ○ × ×
mute ミュート ○ ○ ○
playCount   ○ ○ ×
rate   ○ ○ ○
SAMIFileName   ○ ○ ○
SAMILang   ○ ○ ○
SAMIStyle   ○ ○ ○
SRC   × ○ ○
stretchToFit   ○ ○ ×
uiMode 表示モード
  • none
  • mini
  • full
      
URL 再生するメディアのURL ○ ○ ○
volume 音量 ○ ○ ○
windowlessVideo   ○ ○ ○
PARAM Tags | MSDN PARAM Elements in an OBJECT Element (Windows) | MSDN

記述方法の違いによるブラウザの対応

case.1

MIMEタイプを指定する。

<object type="video/x-ms-wmv" width="200" height="200">
    <param name="url" value="data/sample.wmv" />
</object>
case.2

ActiveXコントロールの識別番号を指定する。WMP7.0より前

<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="200" height="200">
    <param name="url" value="data/sample.wmv" />
</object>
case.3

ActiveXコントロールの識別番号を指定する。WMP7.0以降

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="200" height="200">
    <param name="url" value="data/sample.wmv" />
</object>
case.1 case.2 case.3

※Mozillaブラウザではclassid属性が付いたobject要素が無視されるため、何も表示されません。

参考

関連ページ

HTMLの情報サイトから、まとめて検索