« 上一篇 | 下一篇»

如何在文章中插入影片或音樂

Posted on 18 四月, 2007 00:30  •  (15) 迴響  •  452 hit.  •  部落格教學文章

有老師問到以前在中縣教網部落格上,使用<embed>的html 語法,就可以在文章中插入線上播放的影片或音樂檔,怎麼改版之後,這功能就失效了呢?

其實這是因為新的文字編輯器TinyMCE的關係,在LifeType裡,預設是不支援<embed>語法的,所以當你插入embed的語法時,會自動被tinymce給過濾掉。

剛剛去改了一下程式,將<embed>設定為合法參數,現在就可以了喔!
其實在發表文章時,若只是要插入檔案,使用(插入資料夾裡的檔案或圖片)這功能,就可以直接幫你做好檔案(音樂檔、影片檔、word檔、ppt檔都可以)的連結,但若是需要有個線上播放影片或音樂檔的介面,就必須自己插入html的相關語法,才可以做到。

一、插入檔案的連結:

現在使用這工具,可以在發表文章時同時上傳檔案,不必先到檔案中心去上傳檔案了(但你若是要在根目錄下新增資料夾的話,還是必須到檔案中心去新增資料夾)。

 



這樣你就可以看到如下的連結了,使用者只要按下這連結,就會在他的電腦上以媒體播放器軟體(例如Windows Media Player)來播放了。
當然你也可以自己將這連結改成您想要顯示的名稱

二、直接顯示線上播放的畫面

要直接線上顯示影音檔的播放介面,就必須自己來手動插入html原始檔

1.檔案的網址:

你必須先找到您要顯示的影音檔案的網址



畫面會跳到你的網誌前台的資料夾裡這檔案的畫面(例如這裡),將滑鼠移至「下載」或「檔案名稱」的連結處,按下「滑鼠右鍵」/「複製捷徑」,這樣就能將這影片的網址複製起來了。


例如上面那影片的網址為「http://plog.tcc.edu.tw/gallery/1/74341-950512-5.wmv」。

2.插入影片或檔案的html語法

語法:

<embed src="http://plog.tcc.edu.tw/gallery/1/74341-950512-5.wmv" width="320" height="280" autostart="0"/>
  • src="http://plog.tcc.edu.tw/gallery/1/74341-950512-5.wmv" → 檔案的網址
  • width="320" → 播放器介面的顯示寬度
  • height="280" → 播放器介面的顯示高度
    一般而言,mpeg1格式的影片顯示的大小為320X240,上面的高度設定為280,是再加上播放器介面的高度約40,所以為280。
  • autostart="0" → 是否自動播放,「1」 自動播放 ,「0」不會自動播放,需按下「play」才會開始播放
    也有人在這參數使用「true、false」,但若用了「false」,在IE下不會自動播放,但在firefox下還是會自動播放,所以建議使用「0、1」

3.使用「」工具來插入html碼

按下文字編輯器工具列上的 後,會跳出個html原始碼編輯視窗,在適當位置加上語法,就會看到如下圖的畫面了


若是要顯示音樂檔,就只要改變一下顯示的高度「height="40"」,就可以顯示如下的畫面了。

 

15 Comments on "如何在文章中插入影片或音樂"

 

  1.    作者 yhj55112000    [管理]

    請問修改 /js/tiny_mce-plog.js的步驟為何(在哪裡修改?)

    這必須要網站管理員才能修改,用文字編輯器去修改!存檔時記得要存成UTF-8

  2. 放入留言版播放器無音樂也不顯示    作者 555    [管理]

    <p align="center"><img src="http://hk.geocities.com/dunhill_man45/3a52472115208eb4d8cdfe2663918617.jpg" width="350" height="400"><br><br><font  style="filter:glow(color=#3333cc,strength=1);color:#F0F8FF;height:10px;font-size:20px;font-family:Impact;">
    流動的風帶著雲<br>組成生命蝕刻的美麗歡愉與哀愁<br>縱使內心依然有著沉疴的負痛<br>雲在天空的寂寞依然有風的陪伴<br>畫中的天使<br>憂鬱但卻有雙輕靈的翅膀<br>小孩的童摯和純真<br>成長的演出是媽媽的陪伴創造的<br>雖然此刻是黑夜<br>雖然孤單的淚水依舊埋藏<br>但黑夜之後的天明將轉雲淡風清<br>祝福妳~<br><br><br><br><br>
    <embed src="http://www.anhuaedu.com/Downloads/Music/Woman_in_love.mp3
    " width="300" height="40" autostart="1"/>以上是我自製的圖片+文字+音樂及播放器程式請問大大..為何放進網誌留言版套入html裡,如下:<DIV>上述語法內容</DIV> 圖片有顯示,文字有顯示但效果不見了,播放器沒顯示也沒音樂 兩個問題請教(不好意思我是生手,純粹靠語法拼組還有想法)一,請問上述的問題能解決嗎 ?二,若是語法經語法顯示器顯示出結果,可否將顯示結果存為一個有音樂的文字圖片檔,然後再轉為一個可以使用的音樂文字圖片檔的語法. 不好意思>地案點說的我自己都快看不懂了可以幫忙解答嗎 ? 感謝 http://dream-sky555.spaces.live.com/

  3.    作者 阿欣    [管理]

    大安溪畔詩人,您好:
    目前縣網部落格對單一檔案的大小限制為20MB,也就是說你上傳的單一檔案大小不能超過20MB,否則會傳不上來。

    對影片格式並沒有限制,若是用embed的語法來顯示影片,要看一般瀏覽者的電腦是否有相對支援的播放器。

    例如你若上傳.mov的檔案,使者的電腦必須安裝有Quicktime這套軟體才可以看到畫面。
    但若是一般mpeg、wmv的影片,一般使用者的電腦大都安裝有Media Player這軟體,所以應該都可以瀏覽。

  4. 在文章中插入的影片有限定格式嗎    作者 大安溪畔詩人    [管理]

    阿欣老師您好:不知道影片有限定格式嗎?比方說 *.wmv,或是檔案大小有限定等等。

  5. 感謝    作者 yajuan    [管理]

    耶~可以啦!

    謝謝阿欣老師 太可笑嘍

  6.    作者 阿欣    [管理]

    yajuan:
    啊~是我搞烏龍了啦!

    之前修改設定,多出了一個「空白」,造成上傳檔案就會出現那樣的訊息,現在已修正,你試試看吧!

  7. 求救    作者 yajuan    [管理]

    阿欣老師:

    下午誤傳了系統不接受的*.mdi檔後,

    連jpg和doc檔都不能上傳啦……

    一直出現「無法新增檔案,因為用了系統不允許的副檔名」

    這是怎麼一回事?

    麻煩大師替小女子解解惑吧!吐舌頭

  8.    作者 阿欣    [管理]

    iten:
    先請教一下你所說上傳不上來的檔案副檔名是什麼呢?

    目前系統裡有限制某些特定副檔名的檔案是無法上傳的
    (*.php *.php3 *.php4 *.phtml *.htm *.html  *.com .htaccess *.sh)

    另外單一檔案大小的部份,目前的設定為每個檔案不能超過20M,所以假如你的單一檔案超過20M有事無法上傳成功的。

    所以你的意思是說檔案無法上傳到縣網部落格,還是無法上傳到你自己架的LifeType呢?

  9. 為什麼檔案上傳不上去    作者 inten    [管理]

    請問一下~為什麼我的檔案有些都上傳不上去就以本文的檔案~我用我自己架的lifetype上傳不上去可以麻煩解答一下嗎? 

  10. ...    作者 笨死ㄌ    [管理]

    看不懂 完完全全 看不懂 又不會用....

  11.    作者 小先    [管理]

    好神奇!用你的內容就可以播了,難道這是我的電腦暫存的的問題嗎?
    非常感謝你這麼快就替我回覆,解決了我的問題。

  12.    作者 阿欣    [管理]

    小先,您好:
    您說的問題我剛剛試了一下,並沒有發現您說的情形(看看這裡

    或者告知一下您的網誌在那裡,我再看看。

  13.    作者 小先    [管理]

    embed 的 src="http://plog.tcc.edu.tw/gallery/1/74341-950512-5.wmv"
    是OK的
    但是我的檔案是放在串流伺服器
    src="mms://plog.tcc.edu.tw/gallery/1/74341-950512-5.wmv"

    結果 mms 會自動被吃掉改成 http 並且加入部落格的網址,請問這要如何修改呢??

  14.    作者 阿欣    [管理]

    修改 /js/tiny_mce-plog.js

    在extended_valid_elements裡加上
    embed[type|height|width|autostart|src|wmode|flashvars|FALSE|TRUE]

    這樣就可以了

  15.    作者 小彭    [管理]

    如何改程式,將<embed>設定為合法參數

發表迴響

發表迴響
     (必填)
 
 
  authimage(必填)