You Tube
最近突然想把網站的背景圖片換成視頻玩一玩，瞬間覺得高大上有木有！雖然...loading的有點慢...不過也沒有深入研究，只是在Github看到了這個插件。覺得很好用，大牛繞過，小白們走起
duang duang duang 就是它 - jquery.mb.YTPlayer
- 視頻效果要基于一個web server， 也就是說本地的話需要MAMP, WAMP之類的....直接把
index.html拽到瀏覽器里面是不行的 - 給予你充分的創作空間，只要是youtube上的視頻都能使用。可以作為整個網站背景，或者僅僅header背景等等
- 兼容多種瀏覽器
首先， head里添加
<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>
JS call:
$(function(){
$(".player").YTPlayer();
});
HTML constructor:
<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</a>
初始化一個最簡單的播放器
data-property中的containmenttag設置為self初始化一個背景播放器
data-property中的containmenttag設置為body,autoPlay設置為true，opacity設置為1初始化某個HTML元素的背景播放器
data-property中的containmenttag設置為#ElementID,opacity設置為1
data-property中還有更多已定義設置
舉幾個常用的：
-
mute:
true或者false設置是否禁聲 -
showControls:
true或者false設置是否顯示控制欄 -
quality:
default, small medium, large, hd720, hd1080, highres設置視頻的清晰度 -
opacity:
0-1設置視頻的透明度 -
loop:
true或false設置視頻結束后是否要循環 -
startAt:
0-20設置視頻起始時間點，時間被分成20等份 -
stopAt:
1-20設置視頻結束時間點，時間被分成20等份 -
autoPlay:
true或者false設置是否自動播放
瀏覽器支持
- Mozilla Firefox 2+
- Google Chrome
- Opera
- Safari
- IE 6+
