|
|
看到2014新北市兒童藝術節的活動網頁後，
順子就覺得這藍天白雲的影片拿來當順子網站的背景真是再適合也不過了！
怎麼做呢？
檢視它的網頁原始碼，發現是透過 jquery.mb.YTPlayer 這個JavaScript來達成的。
在 jquery.mb.YTPlayer 的 原始網站 按讚後，就可以下載套件。
套件裏面包含了ajaxLoad，css，images，inc，license等資料夾及demo的網頁，
看了demo網頁的原始碼並測試後，順子發現它在運作上有以下幾點重點。
- 它一定要透過web server來播放才能看到效果。若是透過本機檔案打開瀏覽器來播放，那是看不到效果的。
- 網頁的開頭一定要宣告DTD(Document Type Definitions)，否則在IE上看不到效果。
- 原始套件內雖然有很多東西，但實際會用到的，就只有YTPlayer.css與jquery.mb.YTPlayer.js兩個檔案。
- youtube的網址url要輸入youtu.be格式，不能用youtube.com格式。
實際在運作時，可依以下方法，在您的網頁中進行修改。
- 於<html>前加入DTD宣告。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
...
- 把YTPlayer.css與jquery.mb.YTPlayer.js放到站台上，並於<head></head>區間加入css及script的內容。
記得路徑要正確才行，以順子的網站為例，這兩個檔案是放在include的路徑下。
<head>
<!--Youtube Background Start-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script type="text/javascript" src="/include/jquery.mb.YTPlayer.js"></script>
<link href="/include/YTPlayer.css" media="all" rel="stylesheet" type="text/css">
<script>
$(function(){
$(".player").mb_YTPlayer();
});
</script>
<!--Youtube Background End-->
</head>
- 在<body>tag下加入一個撥放用的<a>tag，而這個tag的class名稱 player 一定要和上個步驟中的script對應喔！
<body>
<a class="player" data-property="{videoURL:'http://youtu.be/vw4dPHTvbiE',containment:'body',autoPlay:true,mute:true,startAt:0,opacity:1}">My video</a>
...
- 在預設條件下，產生的Youtube網底是有撥放器的控制項的。
要拿掉控制項，就要加上 showControls 屬性，並設定為false。
<body>
<a class="player" data-property="{videoURL:'http://youtu.be/vw4dPHTvbiE',showControls:false,containment:'body',autoPlay:true,mute:true,startAt:0,opacity:1}">My video</a>
...
- 若和順子一樣，希望在所有網頁都能有此效果，但又不希望影片連結異動時，所有網頁都要修改？
那就在 jquery.mb.YTPlayer.js 中，第100行的地方，把影片網址設定給 videoURL 屬性吧。
jQuery.mbYTPlayer = {
name : "jquery.mb.YTPlayer",
version : "2.7.0",
author : "Matteo Bicocchi",
defaults : {
containment : "body",
ratio : "16/9",
videoURL : "http://youtu.be/vw4dPHTvbiE",
startAt : 0,
stopAt : 0,
autoPlay : true,
vol : 100, // 1 to 100
addRaster : false,
opacity : 1,
quality : "default", //or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”
mute : false,
loop : true,
showControls : true,
showAnnotations : false,
showYTLogo : true,
stopMovieOnClick : false,
realfullscreen : true,
gaTrack : true,
onReady : function (player) {},
onStateChange : function (player) {},
onPlaybackQualityChange: function (player) {},
onError : function (player) {}
},
然後把<body><a>中的網址及屬性整個拿掉，以後要改網址，就直接改 jquery.mb.YTPlayer.js 中的 videoURL 屬性吧。
<body>
<a class="player" data-property="{showControls:false,containment:'body',autoPlay:true,mute:true,startAt:0,opacity:1}">My video</a>
...
示範網頁：www.shunze.info
♥順子老婆的網拍，請多關照∼
If you don't like something, change it.
If you can't change it, change your attitude.
Don't complain!
|
|
2014-07-06, 21:56
《分享》把Youtube影片當網頁背景
