HTML - Embedding A Video Or Audio Player

I'm about to embark on something I realise will probably take a while to get right. Before I begin, it'd be good to pool opinions on the best approach. I've already done some preliminary research and to be honest at the moment it's all beyond my understanding!

The goal is to create a custom player of audio and video files with custom GUI, as part of a webpage. I don't want to use Quicktime because, AFAIK, it would prohibit a custom "look".

It may be necessary to create four separate players as the following situations need to be accommodated:

1) playing a single audio file
2) playing an "album" of audio files, in sequence
3) playing a single video file
4) playing an "album" of video files, in sequence

The player GUI would feature a "screen". When playing a video, the screen would show the video. When playing an audio file, there would be a still image associated with each song which would occupy the screen.

Then below the screen would be the usual apparatus for people to control playback: a trackbar, time counter, buttons for "play", "pause" and "stop". There would also be "next" and "previous" buttons for use when playing an album - they would be disabled when playing a single audio or video.

I have a few questions...

1. Apart from Flash, I don't want my visitors to need to install any software before they can use the player. I presume this depends solely on the media formats involved?

2. What video format would you recommend? What about FLV?

3. What audio format would you recommend? Ideally I'd like to use OGG but if that would introduce complications then I'll use something else.

4. There's always going to be a download button on the player so that the visitor can download the file being played. Now I've noticed on some sites that if a video is loading (before being played), and you attempt to directly download it, sometimes the download will "fail" at the point at which the loading was halted. So if the video has only loaded 40% and you start downloading it directly, the resulting file on your harddrive will only be 40% of what it should be. It's probably due to the streamed video being downloaded to an anonymous temp folder and being left in an incomplete state which the OS then thinks is a completed download. Can anything be done to stop this happening? Perhaps hide the "download" button until the file has finished loading?

Below is a mock-up of how I'd like the player to look, so you know what I'm going for. The purple background is supposed to resemble an HTML page.



I look forward to reading people's views.

Thanks for reading this long post,
Seymour.

Hello,
I'm creating a site that requires the inbuilt audio player to keep streaming music between page loads. What coding options are available for this, HTML, PHP or otherwise?

Regards
Eddie

I am testing a really simple embed code:

Code:

<embed src="1.mp3" 
       height=45
       width=300
       controls="smallconsole" 
       autostart="true" 
       nosave="true" 
       loop="true">

When I open it in IE (Most recent version):
It loads inside a Windows Media Player Plug-in, and plays fine.

When I open it in Firefox (Most recent version:
It loads inside a Quicktime plug-in, plays once, but if you refresh the page it won't play. You have to clear your cookies, and restart Mozilla for it to work.

I can't seem to figure out why? Thanks in advance.


EDIT: I tried using <object> tags instead, it works in both browsers just fine:
Code:

   <OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="1.mp3">
<PARAM name="autostart" VALUE="true/1">
<PARAM name="ShowControls" VALUE="true">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<EMBED TYPE="application/x-mplayer2" SRC="1.mp3" NAME="MediaPlayer"
WIDTH="200" HEIGHT="45" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED>
</OBJECT>

Hopefully this will help someone else with a similar problem.

I have embedded the media player on the website using this code:

Code:

<object type="application/x-shockwave-flash" 
data="test.swf" width="345" height="90"> 
<param name="movie" value="../flash/test.swf"> 
</object>

and it works fine except it doesn't seem to be able to load the sound. I have the sound in the same folder as the flash file and the sound runs fine when I test the .swf but not when I embed it into the website.