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.
Related
I'm trying to make a simple audio test in html5 (Windows 7) and it works in Firefox and Chrome, but not in IE11. Can anyone help me, please? This is my simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<audio controls>
<source src="myAudioFile.mp3" type="audio/mp3"/>
</audio>
</body>
</html>
I have read all questions related, but my problem is not fixed. Also, I tryed to add this, but still no luck:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I always get the "invalid source" message and I don't know what else can I do.
The problem is that IE11 makes you enable the setting "Play Sounds in Webpage" before any sounds will play. Which, in my opinion, is a willing and intentional breakage of HTML5 audio. I'm so pissed at MS for this. They constantly go against what they preach, and they wonder why nobody uses their shitty browser anymore. Anyway, here's how to enable the setting:
Open Internet Explorer, click the Tools button,
Click Internet Options. Tap or click the Advanced tab
Under Multimedia, select Play sounds in webpage.
Click Apply, OK. Now check if you can play the mp3 files.
As far as a programmatic fix for this, I don't know of any. You could alert IE users to change their setting, or you could offer a download link as an alternative to the in-browser player.
This will do the trick:
IE--> Internet Options--> Advanced--> Enable play sounds in webpages.
source: https://forums.asp.net/t/2111915.aspx?Error+Audio+Playback+was+aborted
Your source type looks like it may be incorrect. Try this:
<audio controls>
<source src="myAudioFile.mp3" type="audio/mpeg"/>
</audio>
Some Times html5 audio tag doesnot work without controls or clear its chaches and try below code if any problem please reply. Hope so you are out of trouble.
Have a good day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio Tag</title>
</head>
<body>
<!--Before HTML5, Developer can add audio tag by Plug-in like FLASH. But HTML5 introduces an audio tag for embedded an audio media in a web page**strong text**-->
<audio controls="controls">
<source src="Allegro%20from%20Duet%20in%20C%20Major.mp3" type="audio/mp3">
</audio>
</body>
</html>
I am writing a simple game using HTML5 and JS, to run on my own machine. I want to be able to play a video and to know when the video has finished, and I want to be able to write to a file on an external drive as a backup.
I was going to use Adobe Air, but it doesn't support the HTML5 video tag, so I tried HTA. I can't find anything on the web saying definitely if the video tag is supported or not.
<html>
<head>
<title>Test page</title>
</head>
<body>
<video id="vid_1" width="720" height="480" autoplay><source src="videos/intro.mp4" type="video/mp4"></video>
</body>
</html>
works fine in a browser, but just a blank screen as a .hta
Is the video tag supported in HTA? Or is it the video format that's the problem?
I have tried mpeg and flv, and I have tried an absolute path for the video source.
added later: using windows 7, IE11
So that HTA supports HTML5 elements, you need to add the<meta http-equiv="x-ua-compatible" content="ie=edge" /> tag. But this may not be a very good solution because then elements like frames or the <hta:application> tag don't work. Instead of the <video> tag, you can use the <embed> tag, like this:
<embed src="videos/intro.mp4" width="720" height="480" autostart="true" type="video/mp4">
I'm trying to play a Quicktime .mov file (wrapping an H264 video) in a browser using video.js. I've created a new Typescript project in Visual Studio 2012 and referenced the video file in a very simple html file adapted from the demo file downloaded from http://www.videojs.com/.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
data-setup="{}">
<source src="media/somevideo.mov" type='video/mp4' />
</video>
</body>
</html>
Unfortunately this doesn't appear to play in either Chrome or IE (I haven't tried other browsers). I've tried changing the type to type='video/quicktime' with no luck, and I've tried to remove the type attribute all together. In the former case the video 'loads' forever. In the second scenario, text appears at the top of the video object telling the used to download the latest version of Flash.
I've got a feeling this may be a MIME-type issue, but am not sure how to fix it. Does anyone know how to resolve this?
Steve
EDIT I'm going to give up on this. I've decided I can batch convert to H264 and create some metadata to extract the extra information I need. This makes life much easier that relying on video.js interacting with QT.
Different devices (and browsers) require different video formats. In the past, I've managed to get full support by using this service. However, you might be able to do it yourself with ffmpeg.
As you can see from the html source at videojs, multiple video file formats are included.
<video id="home_video" controls preload="none" poster="/img/poster.jpg" class="video-js vjs-default-skin">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<track kind="captions" src="/vtt/captions.vtt" srclang="en" label="English"></track>
</video>
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.
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.