# xhtml audio/video embedding



## aliisa (Nov 14, 1999)

I'm trying to make use of some .wav/.avi files but I don't seem to be able to embed them. I've read various texts on how to do it but they seem to contradict. All I want to do is ~

1, create an image which, when clicked, runs the file
but preferably ~
2, display a set of visible controls (with a video window for the .avi)

I made various audio file attempts at http://www.toucan.clara.net/sla/audiofiles.html but only one method seems to work cross-browser wise. Any clues to what I'm doing wrong here?


----------



## Shadow2531 (Apr 30, 2001)

take a look at this post http://forums.techguy.org/showthread.php?s=&threadid=98866

it applies to real player, but the same CANNOT be done with WMP. Windows Media Player, won't work with an embedded playlist so you have to embed a file directly, but even if you do, it won't work in netscape or opera without the visitor doing some downloading and tweaking.

with that said, here is the best way

*The Idea is not to force the loading of a music file without the visitors permission.

What you want to do is, make a playlist that points to the wav file you want and proivde a link on your page to the playlist. Then when a visitor CHOOSES to click the link, whatever program on the computer is associated with .m3u files (playlist file) will play it externally from the browser page. That ensures the page will work in all browsers.

e.g. if wmp is associated with m3u files, it will load up and play. Same for winamp, and realplayer. quicktime doesn't play playlist files right.*

However if you do want to use the embed or use object command for multi broswers, you want to use real player (forget quicktime) and you need to point the command towards a playlist instead of the individual file becuase Netscape and opera won't stream an embeded mp3/wav file, they will only stream a playlist (when using the embed or object tags). but if you do use an embed command turn autostart off so you don't force the visitor to listen to the music, unless it is a vital part of your page.

here is an example of a playlist here

you can save target as and open it with notepad to see how it is setup or click on it to see how it works.

the playlist file link is the easiest and best way to do it. You can automatically load the the playlist link with javascript, but that would be annoying to visitors

Also not everybody has real player, but real player is the best one to embed as it works in netscape, ie , mozilla and opera without any problems if you set it up using a playlist file.


----------



## Shadow2531 (Apr 30, 2001)

I put up an example page for ya.

I set up my own playlist to point to the birtdday file.

I also compressed the wav file into an mp3 because the wav file is too big.

I encoded it at 24kb/s 16khz mono using xing encoder.

the page is at http://home.tbbs.net/shadow/multibrowser.htm

the playlist file is at http://home.tbbs.net/shadow/multibrowser.m3u

the mp3 is at http://home.tbbs.net/shadow/birthday.mp3

download the mp3 and put it up on your space.

download the playlist and edit it with notepad to point to the mp3 and then upload the playlist to your space.

then put the page up on your space and edit the link and embed src to point to the playlist on your space.

The first way should work in opera, netscape/mozilla and IE if you have real player and the second way will work in all browsers in all Operating systems.


----------



## aliisa (Nov 14, 1999)

Thanks for the advice. Ok, if I understand you right, there are no embedding scripts out there that work the same for all browsers. You may see a control panel in WMP but never in Netscape/Mozilla. Right? I thought that's what XHTML was for, to resolve cross-browser issues like this. Oh well.

As far as the workings go with audio files, I don't wish to have any file foisted on anyone, that's why I'd rather have a control panel, but it seems I can only achieve this with WMP. Secondly, I don't think I want to create a playlist, simply because the files are intended for separate pages.

I'll have a look at how you've done your Mindshift page where you've offered the download via 3 players, WMP, Winamp and RealPlayer. Tell me, on this, Winamp elects to open in Winamp (Winamp Playlist file), RealOne elects to open in RealPlayer (Realmedia file) but Windows Media Player elects to download, with no immediate option for playing in situ. Is this correct?

In Netscape/Mozilla I *always* get prompted to download the plug-in, even though I already have all the plugins I need! It's so annoying. The only script which came close is the basic one which allows for clicking on the image. At least it's visually consistent across browsers, even though it does lack a control panel.

One more thing is that all the files on my sample page open up in Winamp. How do I change things so they open up with RealPlayer as the default player? Note: I'm not too hot on associating things!


----------



## Shadow2531 (Apr 30, 2001)

The winamp link uses a m3u playlist. When you click on the playlist it will play in whatever program is associated with m3u playlists, but usually winamp is, but if realone player is associated with m3u playlists, realplayer will play it. 

Now the Realone link points to a rm playlist file that will only play in real player.

And the Windows Media Player file points to an asx playlist file that will only open in windows media player.

As for windows media player, the playlist loads up without a prompt and starts playing the first song in the list.

However if you get prompted to save or open the windows media playlist file, choose to open it and that will load up windows media player and play the file.

Now in Netscape/mozilla, click on edit-preferences-downloads- and choose don't open anything and the asx file will load right up without prompting you, but you will still get prompted for other downloads.

if you want real player to take over files you have to go into winamp3's options-preferences-media-and unselect m3u from the preferred media list.

Then you have to go into realone player and goto tools-preferences-and check mp3 audio playlist.

You may have to select mp3s and so forth also if that doesn't work. And if winamp is still stealing file types (like it should  ) then you can disable winamp agent.

You may have to restart for the changes to take effect.

just remember, mozilla still has a few bugs

if you have netscape 7.0 and mozilla 1.2b and mozilla doesn't play audio file links like that or download things right this is what you can do.

select all the files in the netscape 7.0 component directory and paste them into the mozilla component directory and choose not to overwrite and files (say no a bunch of times).

this will fix problems with mozilla. Since Netscape 7.0 works fine.

XHTML is better for cross browser compatibility, but I believe the embed command isn't even a part of xhtml. so you would have to use the object command, but again wmp doesn't work in all broswers without tweaking and only on windows machines, but that's not an xhtml fault. All that audio stuff can be a pain when you add it to a web page. It's hard to guarantee that everybody will be able to play it, but the m3u playlist in my opinion is the best way to implement audio.

All i know is if I visit a page that has an audio file that I want to hear and I don't have the player for it, I download it, simple as that. So I guess you could get complicated have links so people can download the required players and have multiple objects. WMP and Realplayer and links to playlist files. It all depends on how important it is that everybody be able to hear it.


----------



## aliisa (Nov 14, 1999)

I've had a look at how you did your player download selection. The only problem I could see there was if, say, Real has all the associations allocated to it then the Winamp link will obviously offer you the Real player, and vice versa if Winamp had all the associations. To a dummy like me, I'd make the assumption that either my players aren't set up correctly or the page must be wrong. I'd naturally assume the former and start worrying!

I've sussed out the associations thing now, thanks.

I can't comment on Netscape 7.0 because I don't have it. Maybe I should in order to check out my own site with it but I don't want to overwrite my NS4.75 or cross-corrupt the Moz.

My XHTML tome gives various examples (none of which work) like ~

```
[URL=filename]filename[/URL]
```
 I see that, in theory, I can control which player is used by specifying the 'type' but it still comes down to how the associations are set up. Either way, I still can't see any embeded controls in my browser and that was the point, I thought, of the script.

By the way, thanks for converting the Birthday file to an mp3. Is there any freebie software out there that converts one file to another like this?


----------



## Shadow2531 (Apr 30, 2001)

yep you are right about the winamp/realplayer deal.

I can fix it and use a different type of playlist. a b4s playlist that will only load in winamp. Only problem with that is b4s playlists only work in winamp3 and there are still a lot of people using winamp2. Also when you use a b4s playlist, you have to edit it with notpad and delete the xml declaration so Internet explorer doesn't think it's a xml file and load the file in the browser. Also with the b4s playlist, the first time you click on a link pointing to a b4s playlist, you will get prompted on whether you want to open or save the file. Uncheck always ask and choose open.

You can also do one other thing to guarantee that winamp2 opens.

You take a winamp2 shortcut and link to it. It will be called winamp.lnk. Rename it winamp2.lnk and in the target you add a command line switch to load the playlist. The playlist can be at a location on the net, but the playlist has to be a pls playlist. You can make those in winamp3.

after the target, you would add a space and then "http://myfile.pls" Then you upload the .lnk file to your webspace.

Then when the visitor clicks on the lnk link, they have to confirm that they want to open the link and boom, winamp2 and only winamp2 opens and plays the playlist.

This does work and you would only have to use the shortcut for winamp2 and then just use a b4s playlist file link for winamp3 and the visitor would have to have winamp installed in the default directory of course, but 99% of people do.

They only way you are going to satisfy everyone is to do every way including quicktime.

But then what about people that don't have windows, you would have to support all major programs in each OS and for each browser.

I may change that winamp link to only support winamp3, not sure.

Just remember, if you use xhtml 1.0, 1.1 and you want the page to validate properly, you can't use the embed tag. Use the object tag instead.

but I will look for the controls code in a snap.

with all that said. have another look at my page and try the winamp links again. If you don't have winamp3 obviously the winamp3 link isn't going to work, but pm me if the winamp2 link doesn't work for ya.

try it again

a note on the winamp 2 link. opera/netscape/mozilla, you have to save the shortcut and then click on it. And for the b4s playlist you may have to do the same.

m3u playlist is the only way to get it to work in all broswsers.

Just showing you the different ways. I will change the page back to the original way after awhile since the other browsers are picky about b4s and lnk files.


----------



## Shadow2531 (Apr 30, 2001)

show controls

http://hotwired.lycos.com/webmonkey/01/49/index2a_page4.html?tw=multimedia


----------



## Shadow2531 (Apr 30, 2001)

and this will help a lot

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwmt/html/cross-browser.asp


----------



## Shadow2531 (Apr 30, 2001)

get the windows media player plugin for netscape http://download.microsoft.com/download/winmediaplayer/nsplugin/6.4/WIN98/EN-US/wmpplugin.exe

When you install it, it may only install for netscape. So if you want it installed for mozilla, you have to go to the c:\program files\netscape\plugins directory and select all file and copy.

Then goto c:\program files\mozilla.org\mozilla\plugins folder and paste into that folder taking care not to overwrite any existing files. ( say no if it ask you if you want to overwrite any existing files)

Then mozilla will work with windows media player.

Netscape works to, but Netscape 7.0 has a bug where when it goes to load the page with a embedded wmp, it just takes you to whatever you home page is set. However it you quickly click stop (x) for netscape, you can see that the embedded media player works fine.

Then goto this test page http://home.tbbs.net/shadow/wmptest.htm

That page also works in opera 6.05

So windows media player will work in ie, netscape (besides bug), Mozilla and opera 6.05.

You have to use both the object and embed tags because netscape/mozilla doesn't suppor the object tag.

There you go. WMP with controls and works with all browsers.

also if the visitor doesn't have the WMP plugin for netscape or mozilla, they will get prompted to download it from microsoft.

That's probably as good as it gets.

Of course user both the object and embed tags will make your page not validate, but don't worry about that.

hope that helps.


----------



## aliisa (Nov 14, 1999)

Ok, I installed WMP for Netscape. Thanks for the tip. I've created another page of audio links ~ http://www.toucan.clara.net/sla/audio_scripts.html (sorry they're all Happy Birthday again!)

You can view the source for each one, but basically they are based on ~
1. object with embed (as suggested in a book by Dave Raggett and Aaron Walsh, called 'XHTML, Example by Example'. In fact, most of these scripts were culled from that book as examples)
2. embed only
3. img with src for .wav
4. img with src for m3u
5. img with src for mp3
6. embed with mime type specified (should this always be .wav for .wav files?)
7. embed with Javascript controls (this should show 3 buttons for controlling the play. This was also taken from the above book. I don't know why the Javascript doesn't work, but it doesn't. In fact, all the examples in the book seem to show a graphic with a control panel, no matter what the script. I really can't see how that happens. Maybe it's a Windows thing. I have w95).

This is what happens with each one (for me) ~
In IE 5.0 ~
1. nothing/blank
2. embedded RealPlayer w. controls
3. image / opens Winamp in new window
4. image / playlist in Winamp in new window
5. image / opens Winamp in new window
6. embedded RealPlayer w. controls
7. RealPlayer graphic only

There seems to be a problem with I.E. in that it topples over more than it stays up when this page is opened. Maybe it doesn't like the Javascript.

In NS 4.75 ~
1. embedded WMP controls
2. embedded WMP controls
3. image / opens WMP controls in new window
4. image / opens text file showing the playlist
5. image / opens RealPlayer in new window
6. embedded RealPlayer w. controls
7. Netscape graphic only

In Mozilla 1.1 ~
1. embedded WMP controls (but can't find files)
2. embedded WMP controls (but can't find files)
3. image / opens WMP controls in new window
4. image / opens text file showing the playlist
5. image / opens RealPlayer in new window
6. embedded RealPlayer w. controls (but can't find files)
7. Netscape graphic only

There seems to be a problem here that the .wav files don't download into the C:\windows\temp\plugtmp directory.

I've also uploaded a page which is supposedly crossbrowser-friendly (from the same book) which nests EMBED inside OBJECT for WMP using codebase, classid and param ~ http://www.toucan.clara.net/sla/crossbrowser_audio_script.html Works in all three for me except for Mozilla where I have to hit Stop prior to it playing or the browser reverts to the previous web page!!!! Dunno if that's a Mozilla bug. Oh, and in Mozilla and NS they both autostart when they shouldn't. Apart from that...

~~~~~~~~~~~~~
Your revamped page ~
Winamp 2 requests I save the file
Winamp 3 requests I save the file
WMP opens up and autostarts (maybe you want that, I prefer to have control so it doesn't start before it's fully loaded)
RealPlayer opens up RealPlayer
Other suggests I open up RealPlayer.


----------



## Shadow2531 (Apr 30, 2001)

I don't have that bug in mozilla, but I have that exact same bug in netscape. Not sure why you have it in one browser and I have it in the other. ??????

As for my winamp2 link and winamp 3 link, yeh in mozilla/netscape you can only save the files. i won't keep the site like that, that was just to show you a few other ways. (works perfect in IE though).

With all the different ways you can do things, I like the m3u playlist way.

The m3u link works in all the browsers without and problems and if you don't have windows, you can still play the files useing an alternate OS media player. And if you want ,you can right-click and "save as" to save the m3u playlist. Then load up your desired player and manually load the playlist if you don't want the songs to automatically start playing. If you have winamp, it should be associated with m3u playlists anyways, but yeh it does suck that m3u playlists can be stolen by realone player or even wmp.

When a visitor clicks on an m3u link, it will get played in something for sure so if you want to guarantee the visitor can hear your sound, that's what I would use.

For my original page, I could get rid of the the real player and windows media player playlist and just provide the m3u playlist. and just say "Listen to Mindshift" for the link that points to the m3u playist file. Obviously if someone clicks on the link, they want the music to play right away or they would save the playlist and manually load it up in the desired player.


As for the javascript method, I wouldn't use that method cause it won't work if someone has javascript turned off or is using a text browser.

If even using a text browser you can still save a m3u playlist and then load it.

You've seen just about every way to play the file It's all up to you.

keep trying and looking there may be another ways.!


Shadow2531


----------



## aliisa (Nov 14, 1999)

Ok, thanks for all the help. We must have exhausted all the tricks here. Good point about the Javascript, but as it didn't work anyway...


----------

