<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>youtube</title>
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<script src="jquery.mobile-1.4.2/jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style type="text/css">
ul.playlist {
margin: 0;
padding: 0;
list-style: none;
}
ul.playlist li {
margin-bottom: 5px;
}
ul.playlist li a img {
border: 0;
vertical-align: middle;
}
</style>
<script type="text/javascript">
$(function(){
var thumbSize = 'large', // 設定要取得的縮圖是大圖還是小圖
// 大圖寬高為 480X360；小圖寬高為 120X90
imgWidth = '480', // 限制圖片的寬及 YouTube 影片的寬
imgHeight = '360', // 限制圖片的高及 YouTube 影片的高
autoPlay = '&autoplay=1', // 是否載入 YouTube 影片後自動播放；若不要自動播放則設成 0
fullScreen = '&fs=1'; // 是否允許播放 YouTube 影片時能全螢幕播放
$('ul.playlist>li>a').each(function(){
// 取得要連結轉換的網址及訊息內容
var _this = $(this),
_url = _this.attr('href'),
_info = _this.text(),
_type = (thumbSize == 'large') ? 0 : 2;
// 取得 vid
var vid = _url.match('[\\?&]v=([^&#]*)')[1];
// 取得縮圖
var thumbUrl = "http://img.youtube.com/vi/"+vid+"/" + _type + ".jpg";
// 把目前超連結的內容轉換成圖片並加入 click 事件
_this.html('<img src="'+thumbUrl+'" alt="'+_info+'" title="'+_info+'" width="'+imgWidth+'" height="'+imgHeight+'" />').click(function(){
return false;
}).focus(function(){
this.blur();
}).children('img').click(function(){
// 當點擊到圖片時就轉換成 YouTube 影片
var swf = '<object width="'+imgWidth+'" height="'+imgHeight+'">';
swf += '<param name="movie" value="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'"></param>';
swf += '<param name="wmode" value="transparent"></param>';
swf += (fullScreen == '&fs=1') ? '<param name="allowfullscreen" value="true"></param>' : '';
swf += '<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'" ';
swf += (fullScreen == '&fs=1') ? 'allowfullscreen="true" ' : '';
swf += 'wmode="transparent" width="'+imgWidth+'" height="'+imgHeight+'""></embed>';
swf += '</object/>';
$(this).parent('a').html(swf);
return false;
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>頁面標題名稱</h1>
</div>
<div data-role="content">
<p>
<ul class="playlist">
<li><a href="https://www.youtube.com/watch?v=4siCNFLe51o">中華好詩詞</a></li>
</ul>
</div>
<div data-role="footer">
<h1>註腳名稱</h1>
</div>
</div>
</body>
</html>
|