*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年9月12日 星期四

漂亮展出互動影音小視窗


按一下,
一個可讓閱聽眾自由移動的漂亮影音小視窗就會自動呈現出來。

影音教學


按這裡就會展出影音小視窗


1.請在<head>xxx</head>間或<body>之後貼上下列程式碼:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jqueryui/jquery.youtubepopup.min.js"></script>
說明:
  1. 紅色的 jquery-1.9.1.js 這條程式碼,如其他套裝程式已使用,則不用再寫入。


2.請在<body>之後貼上下列驅動互動作用的 jquery 程式碼:
<script>
$(function () {
    $("a.youtubepopup").YouTubePopup({width:640, height: 360, overlayOpacity: 0, draggable: true});
});
</script>
說明:
  1. width: 640 是指 youtube 要播放的影音的寬度,height: 360 是高度。
  2. draggable: true 是指設定為可自由移動。


3.為所要按下文字寫入html控制碼:
<a class="youtubepopup" href="http://www.youtube.com/embed/c80sS-EfSTI?rel=0">按這裡就會展出影音小視窗 </a><br>
說明:
  1. href="http://xxx" http://xxx 是指影音的位置網址,取得方法請看影音教學。



原始語法出處 jQuery YouTube Popup Player Plugin

沒有留言:

張貼留言