無標題文件

<!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>

.tv {
background: #666;
padding: 10px;
width: 740px;
height: 360px;
}
.video {
float: left;
width: 480px;
height: 360px;
}
</style>
<script type="text/javascript">
$(function(){
var thumbSize = 'large', // 設定要取得的縮圖是大圖還是小圖
// 大圖寬高為 480X360；小圖寬高為 120X90
imgWidth = '120', // 限制圖片的寬
imgHeight = '90', // 限制圖片的高
swfWidth = '480', // 指定 YouTube 影片的寬
swfHeight = '360', // 指定 YouTube 影片的高
autoPlay = '&autoplay=0', // 是否載入 YouTube 影片後自動播放；若不要自動播放則設成 0
fullScreen = '&fs=1'; // 是否允許播放 YouTube 影片時能全螢幕播放

$('.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="'+swfWidth+'" height="'+swfHeight+'">';
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="'+swfWidth+'" height="'+swfHeight+'"></embed>';

swf += '</object/>';

$('.video').html(swf);

return false;
});
});

// 先載入第一個影片
$('.playlist>li>a').eq(0).children('img').click();

// 變更影片播放為自動播放
autoPlay = '&autoplay=1';
});
</script>

</head>

<body>

<div data-role="page">
<div data-role="header">
<h1>頁面標題名稱</h1>
</div>
<div data-role="content">
<p>
<div class="tv">
<div class="video"></div>
<ul class="playlist">
<li><a href="https://www.youtube.com/watch?v=KS979AqWM1A&list=PL930A7CEA80A1AA77&index=10">莫札特一閃一閃小星星</a></li>
<li><a href="https://www.youtube.com/watch?v=qJRQ_64usfM&list=PL930A7CEA80A1AA77">莫札特第9號鋼琴協奏曲第3樂章</a></li>
<li><a href="https://www.youtube.com/watch?v=ik56AAxkoPE&list=PL930A7CEA80A1AA77&index=2">莫札特第12號鋼琴協奏曲第1樂章</a></li>
<li><a href="https://www.youtube.com/watch?v=BcalIKji_PI&list=PL930A7CEA80A1AA77&index=3">莫札特第18號鋼琴協奏曲第3樂章</a></li>
<li><a href="https://www.youtube.com/watch?v=ledly9zlhwE&list=PL930A7CEA80A1AA77&index=5">莫札特第20號鋼琴協奏曲第1樂章 1/2</a></li>
<li><a href="https://www.youtube.com/watch?v=5hK_G6Y9eKI&list=PL930A7CEA80A1AA77&index=7">莫札特第21號鋼琴協奏曲第1樂章</a></li>
<li><a href="https://www.youtube.com/watch?v=i8UbHJqVgLk&list=PL930A7CEA80A1AA77&index=8">莫札特第23號鋼琴協奏曲第1樂章</a></li>
<li><a href="https://www.youtube.com/watch?v=h18e9znyHWY&index=9&list=PL930A7CEA80A1AA77">莫札特第25號鋼琴協奏曲第3樂章</a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>註腳名稱</h1>
</div>
</div>
</body>
</html>