網頁嵌入PDF、影音、聲音、Flash、youtube的Html語法運用

embed：
video, mp3, flash, pdf
<embed src="檔案位置網址" width="寬度" height="高度"></embed>

聲音

影音

pdf

flash

youtube

要把影音、聲音、Flash以及PDF檔嵌入網頁中，embed語法是通用的語法。如下：

<embed src="檔案位置網址" width="寬度" height="高度"></embed>

再來，因為不同的寫作元素，如影音、聲音、Flash，都有各自表現上的特色。所以會在
上面的基本語法中再加入不同的控制項。我們先以聲音的嵌入語法為例，讓同學有一個
基本印象。

聲音檔嵌入語法：
<embed src="http://lmcdwriting.org/userfiles/lmcsilver20121007/lmcsilver/001/SS_Travel_Music.mp3"  width="200" height="40" type="audio/mpeg" autostart="false" loop="false" ></embed>

語法效果：


說明：
src="http://xxx" 就是聲音檔在網路空間位置網址。
autostart="true" 要自動播放；autostart="false" 不要自動播放。
loop="false" 不要重覆音樂；loop="true" 要重覆音樂；loop="2" 重覆2次。
type="xx" 指定播放的音樂檔案類型，本例為mp3。

我們可以看到，這是在embed基本語法中再加入更多控制項。上述的三個都是和控制聲音
檔的播放有關。

影音的嵌入，目前通用的作法是把youtube影音，直接嵌入到網頁。請看教案最下方的影音教學。

影音檔嵌入語法（改用iframe）：

<iframe style="width:寬度px; height:高度px;"
src="影片所在網址位置">
</iframe>

下列語法實例：

<iframe style="width: 520px; height: 340px;"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/lmcsilver/123/MOV_0002.mp4">
</iframe>


語法效果：


說明：
1. 使用 iframe 格式，是受不同瀏覽器功能之差異影響最小之語法。（2017/07/13補充）
2. 使用style=" " 來設定寬、長時，長度要記得設。

這些效果有時也會因電腦內部設定及軟體選擇及版本新舊，會有影響。
基本上在此我們並不要求同學去細究這些參數選項的功能。同學只要大致理解這些嵌入
語法基本的樣態就可以了。

嵌入Pdf檔
Pdf很常用，尤其功能愈來愈強。嵌入Pdf檔的語法和上面是相同的。語法：

<embed src="http://lmcdwriting.org/userfiles/lmcsilver20121007/pdf201210/CSJ14-06_6oct_6.pdf" height="400" width="560">

語法效果：

語法說明：

1. 嵌入Pdf檔的語法簡單，沒有太多控制變項。src="xxx"中把檔案網址位置填入xxx中。寬度和高度要注意一下。
   

再來是flash的嵌入語法。
<embed base="." height="400" loop="true" menu="true" play="true" src="http://lmcdwriting.org/userfiles/lmcsilver20121007/lmcsilver/20120508/20120508.swf" type="application/x-shockwave-flash" width="580" wmode="transparent"></embed>

語法效果：（請click照片）

flash語法說明：
我們看到，和音樂播放的語法比較起來，又有一些不同控制參數。
同時可以看到控制參數的前後順序並不會對語法的執行有影響。再來，
base="." 是要求當flash檔案和html檔案不在同一目錄下，可以去尋找外部的flash檔案。
wmode="transparent" 是指將flash的背景變為透明。

embed語法學習總說明：

1. 在這一部分，同學主要是能大概掌握各式多媒體寫作元素的嵌入語法形態即可以了，換言之在看html原始碼時，能看得出這是嵌入的語法即成。
2. 不管是聲音、影音或是flash，在控制參數上都還有各自更多的參數選項。在此無法一一列舉。有興趣進一步研究的同學，可以在網路上找到更多參考資料。在這裡選用的參數是在做數位內容時常用的參數選項。
3. 各種控制參數常常因為使用者電腦軟、硬體的配備和設置，或是使用的軟體不同（如用IE或Chrome等）以及版本的新舊，有時會有失效的狀況。
4. 本書的教學內容所著重的在於使不同寫作元素來寫作數位多媒體文本，整體而言的教學訓練重心在於運用多媒體來表達想法，換言之，如何把想法以「多媒介」的形式來呈現。因之，並不會特別用力於各種控制參數的介紹。
5. 在往下的教學過程，我們儘可能的運用一些能主動提供嵌入語法的使用工具，例如用Youtube影片所提供分享／嵌入功能項下所提供的影音嵌入語法，以及提供聲音檔嵌入的語法產生器，儘可能減少同學在「語法」方面所可能碰到困難，將更多心力投注在數位多媒體文本寫作上的思考。
6. 在往下的教學中，如無法找到適當的html語法自動產生模式，我們亦會提供通用型的語法給同學，同學只要跟著抄進去就成了。

使用html嵌入影音語法影音教學：


影音教學內容補充說明：

1. 把影音檔案上傳到網路空間並找出檔案的網址，請按這裡。
2. 影音檔案要轉換格式，例如將聲音檔轉成mp3，請按這裡。
3. mp3嵌入語法產生器網址，請按這裡。

＊新版2018/02/21＊ 直接把youtube 嵌入到網頁的Html語法使用：

操作技法：

請找到「分享」，按一下，再按「嵌入」。如下圖，之後就可以把嵌入的語法直接copy下來，貼到編輯器中。





語法：

<iframe width="560" height="315" src="http://www.youtube.com/embed/HPF-lOIBnR8?rel=0" frameborder="0" allowfullscreen></iframe>

★★如何變更影音的大小（從寬度計算出高度）？

目前影片一般而言都是16:9的比例，所以寬度x(9/16)=高度。
例如，寬度400px，400x9/16=225，高度即225px。
請把上例的 width="560" height="315" ，改成 width="400" height="225"，即可變更影音的大小。


★請 問，<iframe xxx>和<img xxx>有什麼不同呢？

1. <iframe xxx>可以用來置放影音（video），而<img xxx>則是用來置放照片。
2. 這兩者都是inlne-block編輯物件元素，不是區塊。也就是要當 成「大字元」來看。如果沒有在後面加上 <br> 來斷行，文字（或編輯物件）會跟在後面。
3. 圖像的CSS效果語法，有一些也可以作用在 iframe 裡面。你可以自己試試。

例如：
<iframe width="560" height="315" src="http://www.youtube.com/embed/HPF-lOIBnR8?rel=0" frameborder="0" allowfullscreen></iframe><br>後 面的文字才斷行。



★請 問，如何將影音居中？

<div style="text-align: center;">
<iframe width="560" height="315" src="http://www.youtube.com/embed/HPF-lOIBnR8?rel=0" frameborder="0" allowfullscreen></iframe><br>
</div>

說明：

<iframe xxx>是一般編輯物件，所以就可以利用<div>的內文對齊功能，將video物件，居中對齊。



★請 問，影音的文繞圖版型要如何來做？

文繞圖的文本表現形態，圖像（img）和影音（iframe）都是相同的，都要加入 align="left" 這個HTML標記，// left, right，靠左、靠右。文繞圖呈現樣態，請看此。


語法：

<iframe width="560" height="315" align="left" src="http://www.youtube.com/embed/HPF-lOIBnR8?rel=0" frameborder="0" allowfullscreen></iframe>這是文繞圖的文字。<br>


文繞圖的 CSS 語法：
style="vertical-align: top;" //top, middle, bottom; 上、中、下對齊。


TEST! 即時作業，請您來做看看，影音文繞圖，在中間斷行到底下行！

---