этот код не работает, когда я тестирую его в ipad (приложение HTML5). Это работает в веб-браузерах, хотя ... У кого-нибудь из вас есть обходной путь для этого? Мне нужно только заставить его работать на устройствах iOS, особенно для iPAD.
<!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>
есть идеи? спасибо