HTML embed other object

技術文件

• HTML5 <video> tag、HTML5 <audio> tag
  • Media events
• HTML <object> tag（ActiveX用）
• HTML <applet> tag（Java用）

其它

• The object tag - embed content in valid strict HTML -
• 網頁內嵌多媒體檔案（FireFox）

依檔案類型

demo.mp4

• 創建一個自定義HTML5音頻播放器

泛用版(1)

• 優先順序

1. HTML5 Video
2. ActiveX（Windows Media Player）
3. embed video/mp4 object （非IE，非HTML5時）

<video class="VideoPlayer" width="100%" height="100%" controls="true" preload="auto" autoplay="true">
    <source src="demo.mp4" type="video/mp4" />
    <object class="VideoPlayer" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
        <param name="autoStart" value="true" />
        <param name="uiMode" value="full" />
        <param name="playCount" value="1" />
        <param name="url" value="demo.mp4" />
        <embed class="VideoPlayer" width="100%" height="100%" src="demo.mp4" type="video/mp4" autoplay="true" controller="true">
            Your browser does not support video
        </embed>
    </object>
</video>

泛用版(2)

• 優先順序

1. HTML5 Video
2. ActiveX（QuickTime）
3. embed video/quicktime object （非IE，非HTML5時）

<video class="VideoPlayer" width="100%" height="100%" controls="true" preload="auto" autoplay="true">
    <source src="demo.mp4" type="video/mp4" />
    <object class="VideoPlayer" width="100%" height="100%" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab">
        <param name="qtsrc" value="demo.mp4">
        <param name="autoplay" value="true">
        <param name="controller" value="true">
        <param name="scale" value="Aspect">
        <param name="bgcolor" value="#000000" />
        <param name="kioskmode" value="true" />
        <embed class="VideoPlayer" src="" qtsrc="demo.mp4" width="100%" height="100%"  kioskmode='true' 
            autoplay="true" controller="true" type="video/quicktime" scale="Aspect" bgcolor="#000000"
            pluginspage="http://www.apple.com/quicktime/download/">
                Your browser does not support video
        </embed>
    </object>     
</video>

demo.mp3

(ActiveX) Apple QuickTime 版

• QuickTime Compatibility

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="200" height="50" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
	<param name="src" value="demo.mp3" />
	<param name="autoplay" value="false" />
	<param name="controller" value="true" />
	<embed src="demo.mp3" width="200" height="50" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>

Standards Version(audio/mp3)

<object type="audio/mp3" data="demo.mp3" width="200" height="50">
	<param name="playcount" value="1" />
	<param name="showdisplay" value="true" />
	Error text
</object>

Standards Version(audio/mpeg)

<object type="audio/mpeg" width="200" height="50" data="demo.mp3">
	<param name="src" value="demo.mp3" />
	<param name="filename" value="demo.mp3" />
	<param name="type" value="audio/mpeg" />
	Error text
</object>

Specifying the media player

<object type="application/x-mplayer2" width="200" height="50" data="demo.mp3">
	<param name="src" value="demo.mp3" />
	<param name="filename" value="demo.mp3" />
	<param name="type" value="application/x-mplayer2" />
	Error text
</object>

Flash.swf

其他相關JavaScript

• AC_RunActiveContent.js（adobe官方版本）
• swobject.js（較通用的版本）

<div id="flashHolder">
	<object id="mainFlashObj" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="100%" width="100%">
	<param name="movie" value="Flash.swf">
	<param name="quality" value="high">
	<param name="wmode" value="window">
	<param name="menu" value="false">
	<embed src="Flash.swf" id="mainFlashEmb" quality="high"
 pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 type="application/x-shockwave-flash" wmode="window" menu="false" height="100%" width="100%">
	</object>
</div>

Java.class

<applet width="128" height="128" code="Java.class" codebase="base_url">
	<param name="X1" value="D1">
	<param name="X2" value="R1" valuetype="ref">
	<param name="X3" value="O1" valuetype="object">
	Error text of no Java
</applet>

依撥放器的種類

• QuickTime

<object width="640" height="480"
    codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="movie1">
    <param value="影片來源Url" name="qtsrc" />
    <param value="true" name="autoplay" />
    <param value="true" name="controller" />
    <param value="Aspect" name="scale" />
    <param value="#000000" name="bgcolor" />
    <param value="true" name="kioskmode" />
    <embed
        width="640" height="480" 
        pluginspage="http://www.apple.com/quicktime/download/" bgcolor="#000000" 
        scale="Aspect" type="video/quicktime" controller="true" autoplay="true" kioskmode="true" id="movie2" 
        qtsrc="影片來源Url" src="" />
</object>

• VCL media player
  • Documentation:WebPlugin of VCL media player

其他

• YouTube Embedded Players and Player Parameters
• html - how to display multiple videos one by one dynamically in loop using HTML5 and javascript - Stack Overflow（HTML5撥放多個mp4檔）