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.
Related
I want to embed the audio file on the html page on the server. The audio file is in the same folder as the html file, the path in src in the tag audio is correct, why is it not playing?
html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio>
<source src="f.mp3" type="audio/mp3">
</audio>
</body>
</html>
As described in mdn (https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio), the <audio> tag should be writted like
<audio src="f.mp3" type="audio/mp3"></audio>.
If you want to display your player, add controls to your tag.
If you want to play the media when the page load, you can add autoplay, but, many web browser not enable autoplay by default as you can read here https://developer.chrome.com/blog/autoplay/
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 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.
I'm on a server still running ColdFusion version 8. I'm not sure if this is my problem though.
I have the following code that I can get to work in my computer on my desktop, using both Firefox and Chrome. I access it as an html file directly using a file system url, i.e. file:///C:/.../test.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>
<p> Try w3Schools test video</p>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
When I put this test.cfm or test.html page up on the Coldfusion 8 server, neither browser displays the video. The movie.mp4 and movie.ogv files are up on the server in the same directory as the test.cfm file. In Firefox I get:
"No video with supported format and MIME type found."
In Chrome it shows the video controls but no video is present.
Is there something I need to enable on the server (it is a shared hosting account)? Perhaps this is not particular to ColdFusion and I'm making another mistake (note this is my first attempt to use the video tags).
Thanks
P.S. If I access it on my computer using Aptana's launch mechanism and running in:
127.0.0.1:8000/.../test.html
I get the same problem as running on the server. The videos do not display.
Courtesy of Miguel-F's guidance, the server was missing support for the .mp4 and .ogv mime types. When the hosting company added those to the server, the videos displayed.
I am trying to make an audio player using HTML 5 project template. I am using the following HTML code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<title>Windows Phone</title>
</head>
<body>
<div>
<p>Audio Player</p>
</div>
<div id="page-title">
<p>Play Audio</p>
<audio controls="">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
I picked up this code from here, I have added the "horse.ogg" to the solution explorer as shown in the screenshot below...
But when I run this appication I get the following output, it reads
Invalid Source
But when I open the same html using a browser I am able to play the file properly.
What could be the problem ?
Is there a better and easier way in which I could play audio files which I will add to the solution explorer and play using HTML 5 ? I am planning to add 10-15 small and funny audio clips and the app will allow user to select it and play it using HTML 5.
Please share your thoughts on this.
As the error message says, it's an invalid source.
Internet Explorer 10 doesn't support Ogg audio files, but MP3 files. Convert your Ogg to an MP3 and it should work fine.
<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>
Also, if you're only providing one source you can use the src attribute of the audio element:
<audio src="horse.mp3" controls></audio>
But this is only really recommended if you are targetting one particular type of browser only.