*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2012年6月9日 星期六

網頁嵌入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! 即時作業,請您來做看看,影音文繞圖,在中間斷行到底下行!





13 則留言:

  1. 讚!
    不過我想問我要怎麼引用這篇文章?
    怎張貼原始碼

    回覆刪除
  2. 你可以下超連結,直接連用。
    如果你想貼原始碼,
    那首先你把我的文字copy下來,貼到「記事本」中, 再從記事本copy文 字。
    再打開你布落格的編輯器,
    在一般的編輯模式中,把文字貼上。
    不可以是在html模式,要再一般編輯模式才成。

    回覆刪除
  3. 非常實用的教學網,謝謝!

    回覆刪除
  4. 老師您好
    拜讀您的文章實在很受用~詳盡~
    我設計了一個Flash音效檔,但是到了Google與Flrefox無法下載播放,我查了一下好像是https://加密連線的問題,變成每開一次網頁就要去設定一次解除封鎖,怎麼樣可以直接就觀看網頁swf內容,而不用先去設定一大堆呢?
    謝謝老師!

    ♥想要Flash大爆發♥

    回覆刪除
  5. 這是你存放 swf 的網路空間不是設定為「公開」的問題。你可以使用dropbox,並依照我的教學開設 public folder,再把swf放在 dropbox 的 public folder裡面,應就沒有問題了。
    請看dropbox網路教學
    http://lmcmultimedia.blogspot.tw/2012/04/ftp-vs-dropbox.html

    回覆刪除
    回覆
    1. 真的可以耶~好棒喔 ♫ 謝謝老師指導

      刪除
  6. 您好,潛水一陣子了,撈了不少知識,真是感謝!!但有個問題一直找不到方式解決,能否給個建議或方法,如何把youtube的影片嵌入在首頁,如:http://www.pyct-basketball.com.tw/ ,因公司老闆一直希望能在官網首頁放一個大大的影片,但首頁已經滿滿了,不可能再挖一個位置放影片,且老闆是希望要大大大,能否給予建議呢???謝謝

    回覆刪除
  7. 好了,

    請你參考下面的教學頁面,

    http://lmcmultimedia.blogspot.tw/2014/01/fancybox.html



    對將歩驟二的語法改成如下:



    <script>

    $(function () {

    $.fancybox({

    width: 560,

    height: 315,

    href: 'http://www.youtube.com/embed/TDeGpEx29vY?rel=0',

    title: '這是新聞系的資料交換雲',

    type: 'iframe',

    padding: 5,

    openEffect: 'elastic',

    preload: true

    });

    });

    </script>



    即可一進頁面就跳出youtube

    再來是你的youtube的影片是要那種很大的那種才好看

    回覆刪除
  8. 請問如果我把網頁切割成a,b,兩塊,我現在會的功能是在a那塊點音樂兩個字可以在b那塊跳出連結的音樂(是以連到那個網址的方式跳出,不是內嵌),但是如果我要的功能是在a點"音樂"兩個字時他會在b那塊跳出內嵌的音樂,請問我要怎麼改呢?

    回覆刪除
  9. 老師請問也些頁面會出現影片但點擊後會跳至youtube
    這要如何使用(用html語法影片檔mpeg4.)

    回覆刪除
  10. 作者已經移除這則留言。

    回覆刪除
  11. 請使用外部超連結語法,超連結到播放的youtube那一頁面即可。

    回覆刪除