Jan 27, 2010

網頁內貼上(嵌入)視頻


貼了好幾次視頻,經常要改動那堆長長的embedded code,為免再麻煩,終於寫了一個簡單的程式:
● 支援YouTubeGoogle,及內地的土豆優酷酷6
● 參數由最簡單的視頻編號到闊度、高度、及控制欄顏色都可以設定

安裝
1.一般網頁,先找出這一句:
</head>

2.如果是Blogger使用者,選 Customize->Layout->Edit HTML,然後在那一堆原始碼內找出:
</head>

3.在那一句 </head>之前,加上以下幾行程式碼:
<script language='javascript' src='http://www.tintat.net/js/embednetvideo.js' ></script>
<script language='javascript'>
var iDefWidth  = 300 ;
var iDefHeight = 250 ;
</script>

闊度預設值:300
高度預設值:250
可以自行更改。

4.儲存

使用:
<script language='javascript'>OpenNetVideo( iMode, sVideoCode, iWidth, iHeight, sColor1, sColor2)</script>
在網頁或網誌內文貼上以上的程式碼,並更改以下參數/數值:
(一般的Blogger都會使用Compose模式編輯內文,請轉換到Edit HTML才貼上程式碼。)
iMode
0 : YouTube
1 : 土豆
2 : 優酷
3 : 酷6
4 : Google

sVideoCode
不論是YouTube或土豆的視頻,它們的編號都是11個位的數字、字母及符號所組成
http://www.youtube.com/watch?v=oJMS3tGsY78
http://www.tudou.com/programs/view/q3lbXQBLzzg/

優酷的視頻編號:
http://v.youku.com/v_show/id_XMTQxMDUxOTU2.html

酷6的視頻編號:
http://v.ku6.com/show/7IYG_ftdpbyze32G.html
http://v.ku6.com/special/show_3738412/ENRAjDZ4Wde_Snz8.html

Google的視頻編號:
http://video.google.com/videoplay?docid=3767487358149440770#

iWidth, iHeight
視頻的闊度及高度
如果兩個數值都不輸入或設定為0,程式會使用預設值(闊度300高度250)
如果不想每次都輸入闊度及高度的數值,可以將預設值更改,以後貼上的視頻都會是相同大小。

如果只輸入闊度值,高度是以4:3的比例換算。
輸入闊度為400,影像高度等於300,再加上不同平台的控制欄高度:
平台
控制欄高度
播放器高度


YouTube
25
325


土豆
28
328


優酷
40
340


酷6
46
346


Google
27
327


sColor1, sColor2
控制欄的線框及底色的顏色,而YouTube已經預設了9種顏色配對,基本上都是深色外框配淺色底色。(土豆不支援這個設定)
0x666666, 0xefefef
0x3a3a3a, 0x999999
0x2b405b, 0x6b8ab6
0x006699, 0x54abd6
0x234900, 0x4e9e00
0xe1600f, 0xfebd01
0xcc2550, 0xe87a9f
0x402061, 0x9461ca
0x5d1719, 0xcd311b
更可以在http://www.colorpicker.com挑選自己喜歡的顏色。

實例:
開啟YouTube視頻,不設定闊度、高度:
<script language='javascript'>OpenNetVideo(0,'oJMS3tGsY78');</script>


開啟土豆視頻,不設定闊度、高度:
<script language='javascript'>OpenNetVideo(1,'q3lbXQBLzzg');</script>


開啟YouTube視頻,設定闊度為400:
<script language='javascript'>OpenNetVideo(0,'oJMS3tGsY78',400);</script>


開啟YouTube視頻,設定闊度為500高度300:
<script language='javascript'>OpenNetVideo(0,'oJMS3tGsY78',500,300);</script>


開啟YouTube視頻,設定控制欄的線框為橙色:
<script language='javascript'>OpenNetVideo(0,'oJMS3tGsY78',0,0,'0xfebd01');</script>



開啟YouTube視頻,設定控制欄的線框為橙色及底色淺藍色:
<script language='javascript'>OpenNetVideo(0,'oJMS3tGsY78',0,0,'0xfebd01','0x54abd6');</script>

No comments:

Post a Comment