有趣的,可能有一個簡單的解決方案。在@jessegavin的幫助下,我在頁面上添加了一個jQuery函數,用於控制頁面上HTML5音頻元素的播放。代碼很漂亮,並且可以在jsFiddle上正常工作,但是在放入我的頁面上下文中時無法正常工作。
我已經把時間拋向風,有條不紊地逐步試圖隔離我的錯誤,但無濟於事。真的,我去亞里士多德這一個,並運用科學的方法。請原諒我這個問題的重要性。這真是我的最後一招。
細節問題
這裏是我的發現:所有的JavaScript函數在的jsfiddle的背景下,頁面正常工作。每次專門添加一個函數後,我可以說它們各自工作正常,除了jsFiddle和實時頁面上的HTML5音頻播放外,其他所有功能都可以正常工作。也就是說只有HTML5音頻播放在實時頁面上不起作用。
所有的HTML 100%驗證,所有的CSS 100%驗證。這兩個組都是代碼全部添加到jsFiddle中。
頁面標題通過Google的onload命令加載(按此順序)外部CSS文檔,jQuery 1.5.1和jQuery UI 1.8.8(與jsFiddle相同,除UI之外,它是1.8.9) JavaScript文檔(網站的所有功能都駐留在該網站上)以及Google Analytics(分析)功能。
JavaScript包裝在文檔就緒框架中。
我的猜測是這個差異存在於頭部某處,但我無法想象它到底是什麼。所有外部鏈接都正常工作,JavaScript功能正常工作(新的音頻控制器除外)。
後處理腳本
PS-只有Chrome和Safari的作品尚未..我主持兩個音頻文件關閉的服務器沒有正確的HT-訪問文件中聲明OGG的作爲正確的MIME類型。我也會爲此提出一個問題。
資源
的jsfiddle:http://jsfiddle.net/66FwR/3/
HTML(品目只,身體正處於的jsfiddle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="description" content="Fernando Garibay- Producer, Songwriter, Artist, Multi-Instrumentalist, and Programmer" />
<meta name="keywords" content="Fernando Garibay, Music, Producer, Songwriter, Artist, Mutli-Instrumentalist, Programmer." />
<title>Fernando Garibay - Music</title>
<link rel="icon" type="image/png" href="http://www.fernandogaribay.com/favicon.ico" />
<link href="../styles/fernando.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAqfg-jHFfaMB9PWES0K_8ChTCwkclEZER8BG2IP57SKkFV1O9hxSZkzKYPDs-3mbhEluKXjbKUAB7sQ"></script>
<script type="text/javascript">
google.load("jquery", "1.5.1");
google.load("jqueryui", "1.8.8");
</script>
<script type="text/javascript" src="../scripts/fernando.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Copyright 2011, Fernando Garibay, Inc-->
<!--Developed by Minimal +-->
</head>
<body onload="message()">
的JavaScript(在上的jsfiddle工作的功能,但不在實況頁面)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
有可能是'jQuery衝突'的問題..你得到什麼錯誤? – diEcho 2011-04-19 04:47:33
@diEcho。沒有具體的錯誤;當它在頁面中時,我沒有看到音頻控制功能的結果。它被證明在jsFiddle中有功能......這就是整個網站JavaScript的背景。 – technopeasant 2011-04-19 04:50:26
@diEcho。是的,音頻標籤的播放應該由上述功能來控制。它適用於jsFiddle,但不在活動頁面的上下文中。 – technopeasant 2011-04-19 05:28:39