I asked a question here: Server does not read ogg file. My problem before was my server, it is not reading the audio ogg file, I addded a MIME type for my server to be able to read these kinds of files.
Now, my server reads the file, the problem is, it does not play in the player. What is wrong? I cannot figure it out. I can access the file using a URL (website.com/directory/audio.ogg). The player is displayed, but it does not play.
The player is working fine in Chrome. It plays the audio file. So I think, nothing's wrong with my code. Especially the src of my audio tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Audio Player</title>
</head>
<body>
<audio controls preload>
<source src="audio/audio.ogg" type="audio/ogg">
<source src="audio/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
make sure you use .ogv as the file extension and ogg as the file type. Theora is weird that way.
Related
The audio player shows up but the audio won't play.
The audio file is in the same folder as the HTML file...
<audio controls>
<source src="audioFileName.ogg" type="audio/ogg">
Audio element not supported by your browser.
</audio>
What's wrong with the code?
I've tried mp3 as well with no luck.
I've also tried it with an mp3 audio file (same folder as well) and the code works, so most likely the problem is with the audio file itself. Maybe your navigator doesn't support it, or the name of the file is slightly wrong.
The mp4 video does not play from localhost.
But mp3 audio works.
i.e.
Following code for playing video (stored as C:\inetpub\wwwroot\video\testVideo.html) does not work when accessed through (http://localhost/video/testVideo.html)
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
But, following code for playing audio (C:\inetpub\wwwroot\audio\testAudio.html) works when accessed through (http://localhost/audio/testAudio.html)
<!DOCTYPE html>
<html>
<body>
<audio width="400" controls>
<source src="audip.mp3" type="audio/mp3">
Your browser does not support HTML5 video.
</audio>
</body>
</html>
However, they both work when webpage is launched by double clicking on html file i.e. webpage is accessed through (file:///C:/inetpub/wwwroot/audio/testAudio.html) or (file:///C:/inetpub/wwwroot/video/testVideo.html)
Please explain what am I doing wrong. And how to make video play from localhost.
I am using following browsers:
IE 11.0
Chrome 44.0
Firefox 40.0
I finally figured it out.
The video doesn't play via localhost, because IIS localhost in Windows doesn't contain MIME type entry (video/mp4) for .mp4 file format.
To make this work, a MIME type entry should be added in following way:
Open IIS Manager
Select your machine from Connection panel
From middle panel, double-click 'MIME Types'
Right-click on the list and select 'Add' option
Add file extension and MIME type e.g. for MP4 videos, file extension: .mp4 and MIME type: 'video/mp4'
Thats it.
Now refresh your page and Bingo!. It works.
I am trying to play audio with HTML5 audio tag; reading different articles made me aware that Firefox does not play mp3, but plays ogg file so I linked two files to make it compatible with Firefox: Here's y code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio Player</title>
</head>
<body>
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="audio/audio.mp3">
<source src="audio/audio.ogg">
</audio>
</body>
</html>
I have two separate servers, the first one can read ogg audio file but the other one does not. The server that reads the file allows me to download the ogg file when I try to access it by editing the address page of my browser, but with my other browser, this is what it displays:
Please provide me sources to fix this problem.
Below is the code I am using for the video tag. I basically copy and pasted it off of the Video.js website (then updated with my own file names). At first I could get Chrome to work but not Firefox or Internet Explorer. Then I changed the "webm" tags to "web". This fixed issue with Firefox, but I still can't get any playback with IE9. It just shows up as if it trying to load. Right now I am simply trying to test it out using local files in the same root folder, so I don't think it is an issue with waiting for it to download. My video files range from 8.1 to 8.4 meg.
If anyone has any ideas one how to get this to play, it would be greatly appreciated. Thank you in advance.
The following is in the head tag:
`<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf"`
</script>
The following is in the html tag:
`<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="bdg-vid-poster.png"
data-setup='{}'>
<source src="bdg112412hr.mp4" type='video/mp4' />
<source src="bdg112412.web" type='video/web' />
<source src="bdg112412.ogv" type='video/ogv' />
</video>`
I'm not sure why you changed the name from webm to web - webm is the proper extension to use. That line should read:
<source src="bdg112412.webm" type='video/webm' />
Do you have valid video files for each of the three video types (mp4, web, and ogv)? What happens when you drag and drop the mp4 directly into IE9? Try the webm in Chrome and the ogv in Firefox.
If you are not certain your video files are valid, try downloading the sample files here. (See the "Download Video" links under the video).
Also helpful for me was the preload="auto" had to be preload="none" or else it waited to load the entire video before playing...a real drag...
Check the mime-type configured on the server.
I had problems with mp4 and IE9. And i just had to change the myme-tipe from video/mpeg to video/mp4.
I have the following html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html
{
height: 100%;
}
</style>
<script language=javascript src="scripts/lib.js"></script>
</head>
<body>
<audio controls autoplay>
<source src="track09.wav">
</audio>
</body>
</html>
It does work in FF4, but doesn't in Safari 5.0.5 under Winx64. How should I fix it?
Thx.
UPDATED. Both mp3 and html files are local, not stored on server side.
You need a different format than .wav - encode your audio in mp3 and ogg and include both formats in your markup like this:
<audio controls autoplay>
<source src="track09.ogg" type="audio/ogg" />
<source src="track09.mp3" type="audio/mpeg" />
</audio>
You can get a utility to do the encoding for you from http://audacity.sourceforge.net
This will cover all browsers that currently support html5 audio.
The answer is little edited.
Add type for source. I've tested in Safari. This code works for me.
<source src="track09.wav" type="audio/x-wav">
The other solution (for Safari) is to use AAC codec. It doesn't work in Firefox.
<source src="track09.aac" type="audio/aac" />
You may use Ogg Vorbis for Firefox. It probably doesn't work in Safari.
<source src="track09.ogg" type="audio/ogg" />
It looks there isn't any universal codec. You have to encode Your sound few times or don't support few browsers.
P.S.
It looks mp3 doesn't work anywhere for me.
For local testing it does not matter if the files are local, so are the html files.
the solution is not obvious at the first sight.
The Safari browser relies on Apple Quicktime to support the Audio tag.
If you download the Safari-Browser for testing purposes it will not work.
You need the complete package as Safari uses the Codec of Quicktime to support playback.
look here:
HTML5Tutorial
Furthermore the MP3 should be on the first place that safari can recognize it.
The best solution IMHO is to use multiple source files and mediaelement.js
Ekaterina,
Safari 5 does not play audio by itself. It needs QuickTime installed on Windows. Do that, and probably will work (If you still need it, since it was asked 2 years ago!)
https://discussions.apple.com/thread/2544849?start=0&tstart=0