編輯:問題已解決。這是導致JWP不顯示的FitVids代碼。感謝大家的幫助。嵌入式JWPlayers無法工作的HTML頁面
我一直在盯着我的代碼太長,無法弄清楚爲什麼它沒有工作後,我做了幾個小mods。你們中的一個聰明的民間檢查它,讓我知道我做錯了什麼?
該頁面應該有三個嵌入式JWPlayer與一些隨機視頻。它使用的CSS文件應該是桌面屏幕的CSS文件,但我也有一個用於iphone的文件。
http://www.billarga.com/newsite/
下面的代碼顯示的三個球員之一的融合。
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>New Site</title>
<script type="text/javascript" src="http://www.billarga.com/newsite/player/jwplayer.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="http://www.billarga.com/newsite/css/iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="http://www.billarga.com/newsite/css/ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
<link rel="stylesheet" media="all and (min-width: 1824px)" href="http://www.billarga.com/newsite/css/screen.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://www.billarga.com/newsite/js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$("#page-wrapper").fitVids();
});
</script>
</head>
<body>
<div id="page-wrapper">
<div id="video-wrapper">
<div id="video">Video 1</div>
<script type="text/javascript">
jwplayer('video').setup({
'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
'file': 'http://www.billarga.com/newsite/content/0000001/1.mp4',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
color: #000000;
font-size: medium;
}
a { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: x-large; text-align: center; }
#page-wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
#video-wrapper {
width: 100%;
height: 360px;
}
#video {
float: left;
}
請在這裏發佈一些相關的HTML和JS代碼。否則,一旦問題解決,這個問題將會給未來的讀者帶來所有的價值。謝謝! –
感謝您修復Pekka上方的CSS代碼。 – Rick