1
ipad (HTML5 앱)에서 테스트 할 때이 코드가 작동하지 않는 것 같습니다. 웹 브라우저에서 작동하지만 ...이 문제를 해결할 사람이 있습니까? iPOS 전용 iOS 기기에서 작동하도록하면됩니다.html5 앱 오디오가 작동하지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Disc</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<style>
img {
position:relative;
}
#cover {
height:200px;
width:150px;
top:150px;
}
#disc {
height:100px;
width:98px;
top:100px;
left:-105px;
z-index:-1;
-webkit-transition:all linear 0.5s;
-webkit-animation:disc 1s linear;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes disc {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
</style>
<script type="text/javascript">
function init() {
var isOpen = false;
document.getElementById('cover').addEventListener('click',function() {
if (!isOpen) {
document.getElementById('disc').style.top = "0px";
isOpen = true;
playSound();
} else {
document.getElementById('disc').style.top = "100px";
isOpen = false;
stopSound();
}
});
function playSound() {
document.getElementById('music').play();
}
function stopSound() {
document.getElementById('music').pause();
document.getElementById('music').currentTime = 0;
}
}
</script>
</head>
<body onload="init()">
<img id="cover" src="the bloomfields/bloomcover.jpg" alt=""/>
<img id="disc" src="the bloomfields/record.png" alt=""/>
<audio id="music">
<source src="07 Its Complicated.mp3" type="audio/mpeg"/>
</audio>
</body>
</html>
아이디어가 있으십니까? 감사합니다
아, iFad, iFod 및 iFone 대신 Netscape, Mozzy 및 IE가있는 것이 좋았습니다 ... 표준? 누가 필요해! – Christian
offtopic : 프로그래밍 스타일에 대한 의견이 몇 개 있습니다. document.getElementById ('disc') 등은 (요소를 직접 호출하여) 프로그래밍 할 수있는 좋은 방법이 아니며 요소가 존재하지 않거나 다른 이유로 스크립트를 쉽게 중단시킬 수 있습니다. 난 당신이 오류에 대한 코드를 디버깅해야한다고 생각, 사파리 설정 패널에서 디버그를 활성화하거나 firefox 디버그 콘솔을 사용할 수 있습니다. 또한 html, css 및 javascript로 페이지를 분할하고 오류를 줄이기 위해 jQuery를 사용하십시오. – Codebeat