HTML - Audio And Video Files Doesn't Work With Firefox

I have a "web site on a CD" application and wish to have users be able to play audio and video clips. I currently have MP3 audio and AVI compressed video but can convert to other formats. The CD is created via MacImage so that both PC and Mac formats are correctly encoded.

I have an HTML audio player and separate HTML video player (see below), both of which pass the W3C Validator as "4.01 Transitional" and play without problem on Windows/XP with IE6/7/8 and on Mac with Safari/QuickTime. The players do not work when used with Firefox or SeaMonkey on XP and do not work correctly with Firefox on Linux.

I am seeking HTML code that will cater for all users on all platforms (PC, Mac and Linux) with as many browsers as possible (at least 1 on each platform).

My audio player code is:

<object type="audio/mpeg" width="360" height="50">
<param name="src" value="AudioTest.mp3">
<param name="Autostart" value="true">
<param name="Controller" value="true">
<param name="ShowStatusBar" value="true">
</object>

My video player code is:

<object type="video/avi" width="480" height="360">
<param name="url" value="VideoTest.avi">
<param name="src" value="VideoTest.avi">
<param name="autostart" value="true">
<param name="controller" value="true">
<param name="ShowControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="ShowDisplay" value="false">
<param name="AutoRewind" value="false">
</object>

Does anyone have any suggestions?

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.

I am attempting to link to audio files that exist on my server using the anchor tag. I am able to download and play the audio files just fine on Firefox, Chrome and Safari, but not on Internet Explorer. When I click the link in IE, all I see is a bunch of random characters. Also, when I attempt to download the audio file IE attempts to download it as an html file. What can I do to fix this so that I am able to access these files via IE.

Here is the code.
Code:

<a href="/audioFile.aif">audioFile.aif</a><br />

When I expand menu items IE automatically detects if scrollbars are needed. When I expand them in Firefox and the menus push below the bottom of the page no scrollbars show up. This might be a scripting issue as opposed to HTML - not sure.

I'm using the following to play an audio file on one of my pages. It loops fine under Opera, but it won't loop under Firefox. It just gets to the end and stops. How do I get this thing to loop properly?

HTML Code:

<audio controls autoplay loop>
  <!-- Play audio with FireFox, Opera, and Chrome. -->
  <source src="media/audio.ogg" type="audio/ogg" />
  <!-- Play audio with Internet Explorer and Safari. -->
  <source src="media/audio.mp3" type="audio/mpeg" />
</audio>

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.

Hi all
I'm not exactly super profficient with HTML but I kinda know what I'm doing.
I'm making a html document for the place that i work which stors quite large video files ona server (in the order of 1.5 to 2gig).
I have the HTML document on another server, however. Basicaly what i want to do (and this is a very simplified version of my goal but its where the problem lies) is to have links from that HTML to the video files on the video server. So you click the link and it asks you if you want to save it or open it etc..
So this seems fairly simple... i've just got a
<a href="\\videoservername\vod$\video_library\example.mpg">Click Here</a>
which works but INCREDIBLY SLOWLY. I mean i knew it would take 5 minutes to copy the videos across... which it does if i link to the directory of the video rather than the video itself. So thats all good. But when its linked directly to the video file it takes a good 15 minutes between the 'Save or open' box and the 'where do you want to save' box. Once it does come up it saves in about 5 minutes like expected.
I just dont get why it takes so long for the 'where would you like to save' to come up.
If anyone knows a way around this or could even exaplain why its like this, it would be greatly appreciated. Thanks
Adam

When I use this code in Google it works fine:

Quote:
<form name="f" action="http://www.google.com/search" method="get" name="fo" target="_self">
<input name="q" type="checkbox" style="width: 20px" value="avi|mpg|mpeg|wmv|rmvb|asf|divx|xvid"> <span class="style17"><strong>Ficheiros avi</strong></span></td>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td width="25%">
</td>
<td nowrap="nowrap" align="middle">
<input name="q" type="text" id="q" />
<input style="WIDTH: 75px" type="submit" value="Procurar" />
</tr>
</tbody>
</table>
</form>
But when I use this same code on blogsearch.google.com it does not deliver the word I'm searching.

Any ideas?

Thank you,
Rui Nunes

Hi to all I have a question , sorry for my English.
I want to Make a page that can open local video files in windows default player with the <a HREF="movie.avi"> tag , without downloading the video file (because the video files are in my local disk).I use wamp server program to work as a server.I have tried to do it but it keeps downloading the video files and it trEats them like their are not local.the options that it gives me is to open it or download it I choose to open it but it stills download it.

Hi,
I have an album which has 5 to 6 audio files(wma). I used checkboxes to list the audio files. I want to select one or more of the audio files by ticking in checkbox and play those selected using a button. How can I do that using html?

I see that many music sites use this functionality, but not sure how to code this using html? Can someone help?

Note: I have already hosted the audio files and have the web url for all the wma files.

www.allontheside.com

The flash video works fine in safari, and firefox but internet explorer doesn't even recognize it as a flash file.. any1 have any suggestions?

Hi everyone,

I was asked to upload a video to our server... and I added this code to the webpage

when I click it, a download does not start... it just says page not found

Code:

<p align="center"><br>

      <font face="Arial"><b><br>
      Click the link below to watch the video</b></font></p>
      <p align="center"><b><font face="Arial"><a href="..IMG_1953.MOV">MDS</a></font></b></p>

Hi,

I need help I tried to check the code of my website it works perfectly well in google chrome and firefox but not in Internet explorer. i tried your suggestions but still it doesn't work.

After the "marital status" and "sex" are selected, I want to assign a default value to the "Title" field. I think I am calling the function DefaultTitle incorrectly because I am not even seeing the initial alert box. Any suggestions?

function DefaultTitle(strng,x)
{
alert("Checking Title.");
var Sex=documet.PatientEntry.personal_sex.value;
var MaritalStatus=strng;

if (Sex=="Female" && MaritalStatus=="Married") {document.PatientEntry.personal_Title.value="Mrs.";
HighlightWhite(x);
Return;
}
if (Sex=="Male") {docment.PatientEntry.personal_Title.value="Mr.";
HighlightWhite(x);
Return;
}
if (Sex=="Female" && MaritalStatus=="Single") {document.PatientEntry.personal_Title.value="Miss";
HighlightWhite(x);
Return;
}
if (Sex=="Female") {document.PatientEntry.personal_Title.value="Ms.";
HighlightWhite(x);
Return;
}
}


Sex: <SELECT name="personal_sex" id="personal_sex" tabindex=7>
<OPTION>Male</OPTION>
<OPTION>Female</OPTION>
</SELECT>
Marital status: <SELECT name="personal_MaritalStatus" id="personal_MaritalStatus" onmouseout="DefaultTitle(this.value,this.id)" tabindex=8>
<OPTION>Married</OPTION>
<OPTION>Single</OPTION>
<OPTION>Separated</OPTION>
<OPTION>Divorced</OPTION>
<OPTION>Widow(er)</OPTION>
</SELECT>
Title: <SELECT name=personal_Title tabindex=9>
<OPTION>Mr.</OPTION>
<OPTION>Mrs.</OPTION>
<OPTION>Ms.</OPTION>
<OPTION>Miss</OPTION>
<OPTION>Dr.</OPTION>
</SELECT><BR>

Hey all,

I just heard from a visitor of my page http://www.randypauschsubtitles.de that the page doesn't work in IE and does only display the top frame with the title of the page. As a Firefox user, this problem is new to me. Unfortunately, I created the page with Dreamweaver/Frontpage and don't know much about HTML etc. What can I change to make my page work in IE too?

Thanks for your help!