HTML5 iPhone Safari Mobile visualize something rather than quicktime symbol when creating an audio tag

Question

I'm writing a very simple webpage in html5 for iPhone. the page is this one Not Working

Everything works but in the page from the iPhone i see the quicktime logo with a slash on it and if i tap on it the player shows up the play button and in the background there is the quicktime logo. is it possible to replace the logos with a personal image? thank you in advance.

Answer 1

if you are creating a web application to use only on the iPhone I strongly suggest you to use the fantastic

jQTouch framework.

then you can simple have a link to the mp3 file and it will play normally.

Answer 2

You can hide the tag with CSS and instead create an HTML element that will launch the quicktime player with a JavaScript onclick event.

Something like:

<audio src="track.mp3" controls></audio>
<div id="play-button">Play</div>

<script>
function playAudio() {
    var audioPlayer = document.getElementsByTagName("audio")[0];
    audioPlayer.play();
}

var playButton = document.getElementById("play-button");
button.addEventListener("click",playAudio,false);
</script>

As for displaying a visual/image within the external quicktime player, please check out my answer in a similar thread here.

Answer 3

In the video tag, set the poster to the image that you want to display.

Linda