MooVES 影片強化功能 MooTools 框架開發

MooVES 是一個影片增強功能的系統基於 MooTools 框架開發，能夠對來自各種網路影片服務的連結提個一個預覽的功能，可預覽的網路影片包含：YouTube, Vimeo, Dailymotion, Blip.tv, facebook, Flickr, Google Video, Megavideo, Metacafe, MySpace.tv, MSN, TwitVid, USTREAM, Yahoo Video 等。還可支援 HTML5 的影片標籤。當使用者沒有啟用 JavaScript 或者是 Adobe Flash Player 的時候，此套件還會顯示提示訊息。

使用方法：
第一步 載入程式所需用到的檔案
//MooVES 的CSS 樣式檔案
<link type="text/css" rel="stylesheet" href="/assets/styles/mooves.css" media="all" />
//使用 Google AJAX API 取得 MooTools 框架 1.4.5 包含 YUI 版本
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
//MooVES 的主程式碼
<script type="text/javascript" src="/assets/scripts/mooves.min.js?v=1.0"></script>

第二步 在HTML部分填入一個影片連結
<a id="player" href="http://www.youtube.com/watch?v=LxcrHIzsUrw">影片</a>

第三步 寫入範例的 CSS 樣式
.mooves { display:block }
.mooves_preview { position:relative; display:block; overflow:hidden }
.mooves_overlay { position:absolute; top:0; left:0; background:url(player_btn.png) center center no-repeat; cursor:pointer }

第四步 加入 JavaScript 使套件起作用
window.addEvent('domready', function(){
  var player = new MooVES($('player'), {
    container: null,
    parse: 'href',
    proxy: 'mooves_proxy.php',
    width: 480,
    height: 360,
    background: '#333333',
    foreground: '#000000',
    hd: true
  });
});

參數	預設	說明
container	null	容器元素
parse	'href'	轉換的標記
proxy	'mooves_proxy.php'	使用的 proxy 設定
autostart	false	自動開始
width	640	影片框寬度
height	360	影片框高度
wmode	'opaque'	wmode 設定
background	'#333333'	背景顏色
foreground	'#999999'	前景顏色
opacity	0.8	透明度
autoplay	true	自動撥放
hd	false	是否尋找 HD 畫質
fullscreen	true	是否可全螢幕
loop	false	是否循環撥放
minFlashVersion	9	最小 Flash Player 版本
noFlashContent	['div','No Flash Player installed!']	沒有HTML5或Flash Player時提示文字
noThumbnail	'no_thumb.jpg'	無截圖時顯示
html5	false	是否顯示HTML5

檔案大小：100 KB (包含範例)
檔案下載：http://mootools.net/forge/download/mooves/1.0
檔案備份：下載