I've been working on a musician's site with html5 audio playback. Everything works fine in Firefox and Chrome, but IE has been giving me issues, and I narrowed it down to the way I'm loading the media.
Part of my strategy to obfuscate the media source is to have an audio tag with no source, then add the source via javascript.
If I manually write the html, IE10 honors the preload="none" attribute, but if I don't include the sources and add them to the DOM via javascript, the preload attribute is ignored.
Example 1 works as intended:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is an audio tag with two source tag children of different types. Preload is set to none.
</p>
<audio id="audiotest" preload="none" controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Example 2 loads starts to download the media despite the preload attribute:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is just an audio tag with preload none with javascript adding the sources.
</p>
<audio id="audiotest" preload="none" controls>
</audio>
<script>
var oggSource = document.createElement('source');
oggSource.type='audio/ogg';
oggSource.src='test.ogg';
var mp3Source = document.createElement('source');
mp3Source.type='audio/mpeg';
mp3Source.src='test.mp3';
document.getElementById("audiotest").appendChild(oggSource);
document.getElementById("audiotest").appendChild(mp3Source);
</script>
</body>
</html>
Here are the working examples:
http://www.joshblackburn.com/test1.php
http://www.joshblackburn.com/test2.php
I was trying to figure out why none of my controls were working in IE. I figured out that it was downloading every single track and locking things up. Using the dev panel in IE10, the network trace confirms the issue.
Is this an IE bug? Do I need to figure out different ways of obfuscating my sources?
The 'real' page is www.joshblackburn.com/new.php?page=albums if anyone is interested.
Related
I have some audio sources that only support http protocol but I have problem with google chrome about playing them.
There is an example of my source that doesn't play in Chrome but plays in the Firefox.
What is the best solution in this situation?
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay preload="none">
<source type="audio/mpeg" id="player" src="http://dl.tabamusic.com/Music/1400/01/Mohammadreza Ghaffari - Ashkam Aberoome (128).mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>
I have a m3u8 stream provided by Plex Media Server, and when i look on chrome or FF it works great, but when going to the page on IE9 it says:
The video could not be loaded, either because the server or network failed or because the format is not supported.
this is the code I used:
<!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"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'>
<source src="http://ip:port/video/:/transcode/universal/start?path=http%3A%2F%2Fip%3Aport%2Flibrary%2Fmetadata%2F1&fastSeek=1&X-Plex-Platform=Internet+Explorer&offset=0" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</body>
</html>
I tried adding the following plugin: https://github.com/videojs/videojs-contrib-hls
but no luck there.
Anybody got any clue what I might be doing wrong?
From the readme, videojs-contrib-hls does not support Internet Explorer < 10 unfortunately. I don't have the exact details, but it's because the tech requires more advanced and better performing javascript than is available on IE9.
btw, in your code the mime type is 'video/mp4'.
Can anybody tell me why this is working for Firefox and Chrome, but not for IE9, 10, or 11? It's giving me the typical black screen with a small white square containing a red X.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Player Test</title>
</head>
<body>
<video style="position:fixed; top:0px; left:0px; height:100%; width:100%;" autoplay controls>
<source src="./videos/video.mp4" type="video/mp4">
<source src="./videos/video.ogg" type="video/ogg">
</video>
</body>
</html>
Things I have already tried:
- Adding the MIME type to .htaccess
- Re-encoding to make sure the MP4 are properly H264.
- video.js didn't help at all.
I have also tried just using 'File' > 'Open' and opened the MP4 locally on my machine using IE, and it plays just fine like that, so I think the video should be properly encoded and everything for IE.
For IE9 use meta tag something like
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
I am working on a gallery page with quite a few external HTML pages embedded using iframe, however, some of these external pages have audio embedded into them which I would like to mute.
Here is a sample code for the HTML files
gallery.html
<div id="pages">
<iframe id="embed" src="https://xyz.com/page1.html"></iframe>
<iframe id="embed" src="https://sdf.com/page2.html"></iframe>
</div>
page1.html
<html>
<head>
<!-- head stuff-->
</head>
<body>
<audio autoplay>
<source src="http://audio.url/somefile.ogg" type="audio/ogg">
<source src="http://audio.url/somefile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<!--some more body content>
<body>
</html>
Also, since I'm dealing with multiple external pages, the audio tags mostly might not have ids attached to them. This makes document.getElementById() a non-reliable option. I've experimented with document.getElementsByTagName("input") but couldn't quite get the audio muted. Can anyone please help me with this?
Since these pages are being served up from different domains you will not be able to access the HTML within the iframe due to same origin policy.
Html5 Audio with JavaScript won't work any browser other than chrome
Basically on button press I want to be able to switch the current track to another. This works fine in Chrome but not in any other browser?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>MediaPlayer Won't Work in Any browser other than chrome</title>
<script type="text/javascript">
function Test(){
var Mp3Me= document.getElementById('Mp3Me');
Mp3Me.src = "http://media.rolandus.com/mp3/v-piano_vintage_piano_1.mp3";
}
</script>
</head>
<body>
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="Batman.mp3" type="audio/mpeg">
</audio>
Start Piano Track
</body>
</html>
See browser audio compatibility here.
Firefox and Opera aren't able to read mp3 files. You should have the same file in Ogg or Wav to have it work on every browser.
For example the w3schools code :
<audio controls>
<source src="horse.ogg" type="audio/ogg"> <!--OGG-->
<source src="horse.mp3" type="audio/mpeg"> <!--MP3-->
Your browser does not support the audio element.
</audio>
Probably due to the browsers not being able to play MP3s. This table shows what browsers support what formats: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats
You have to use this tag differently as in firefox you can't play MP3 files with such a code. Here is the link for your help. http://support.mozilla.org/en-US/questions/758978
Firefox doesn't support mp3. See this http://www.codingforums.com/showthread.php?t=231069
Here is another related question, Why doesn't Firefox support the MP3 file format in <audio>