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+