I've been searching and simplified this down to only what is causing the problem.
<audio id="SoundHandle" style="display:none" />
<script type="text/javascript">
SoundHandle = document.getElementById('SoundHandle');
SoundHandle.src = 'test.ogg';
SoundHandle.play();
</script>
The above code works fine in Chrome, and when I still had appropriate checks and such, it worked for an MP3 in IE 9. But in FireFox it simply doesn't play a sound, also when I changed it to being in this layout, I put it at the top of the page. In Firefox now, on top of not playing the sound, nothing below the script tags gets rendered to the page.
Does anyone know anything about this?
A couple of things:
There are a few JS-specific things which could be going on, here, and a few server-specific things which could be going on, as well.
To get around all of the above, try this, first.
<audio id="player" controls>
<source src="test.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>
See if that solves your playing problem.
If it does, then you're likely dealing with JavaScript issues.
But if that player doesn't let you play audio at all, even though it's 100% HTML, then you're looking at server problems.
There are two culprits. The first is the MIME type.
MIME types are the first part of what you see in the "type" attribute in that source element.
They tell a program how they should be reading the data inside the file.
In the old-days, you'd see that in CSS (type="text/css") or JS (type="text/javascript").
For those things, it doesn't matter at all -- your browser knows what to do with CSS and what to do with JS, they're kind of a big deal.
FireFox requires that your server be set up to serve .ogg/.oga/.ogv files with the proper MIME types.
ie: FF needs to know to treat them like OGG files and not like text files.
Have a look here:
https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media
That should be your starting point for debugging.
After that, we can talk JavaScript.
The reason that it works in Chrome is because Chrome works some magic to guess that it's an .ogg file, even though the server is suggesting that it's a "text/html" file.
my freind it is working:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = "";
</script>
</head>
<body>
<audio id="demo" src="song.ogg"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>
</body>
</html>
Related
I'm totally new to this kind of applications, so days ago I followed this tutorial and it worked fine with VLC. But when I tried the web browser check it didn't work.
So I searched for a new solution and found out about Video.js. All the tests that I tried failed, and in the last one, I got the message : The media could not be loaded, either because the server or network failed or because the format is not supported. The video is in MP4 format, how do I deal with HLS ? Knowing that I tried other scripts that should work fine with MP4 but since Flash is no longer supported it didn't work at all.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="rtmp://localhost:1935/vod2/test_video.mp4" type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
Please can you help me, I've been working on this for two weeks now, I've never done this kind of code so please bear with me. Thank you.
I am working through Quentin Watt's new HTML5/CSS3 tutorials.
The last few tutorials have dealt with inserting image, audio, and video files. In each and every case the browser recognizes my attributes, like height, width, controls, etc., but doesn't actually display the file.
Code:
<!-- tutorial 10 -->
<html>
<head>
<meta charset="ntf-8"/>
<title> tutorial 10 - video tag </title>
</head>
<body>
<video width="640" height="360" controls>
<source src="HowTo.BackLever.mp4" type="video/mp4" /> If you can see this you need to update your browser>
</video>
</body>
</html>
I am confident my path is correct, its all local. The files in question are in the same directory as the source code for the page.
I have tried with both Chrome and Firefox and I can't figure out why the browsers won't display the files.
I have researched the issue and have found nothing (helpful) on this site or through Google.
Make sure your image file is on your webroot (probably www or htdocs), then reference that in your src.
You sure the video file path is correct? Is there a . between HowTo and BackLever in the filename? Check the exact name of file and the path.
I have tried the exact same code running under same conditions as yours (video and html on same folder).
It's working. You should check for the video name, as you know it should be exactly the same as in the HTML code.
<!-- tutorial 10 -->
<html>
<head>
<meta charset="ntf-8"/>
<title> tutorial 10 - video tag </title>
</head>
<body>
<video width="640" height="360" controls>
<source src="HowTo.BackLever.mp4" type="video/mp4">
If you can see this you need to update your browser>
</video>
</body>
</html>
I'd suggest using a easier name for the video file just to make sure. ;)
The problem is definitely the file path. Try renaming your video and use the new name.
src="my_video.mp4"
I've also seen people following this video with their file extensions hidden so then they actually add the extension to their file name, making the real src for the video "my_video.mp4.mp4". If it works with a double extension, then you know that is your problem.
You can also make sure you are using the correct file type by right clicking on your video and looking at "properties" in Windows or "get info" on OSX. Please see the image below. I could only find a mov file on my mac this morning, but you need to make sure your video is an mp4.
info for files on mac
video properties in windows 10
Something else you did differently is added a greater sign here. I don't think that's the problem, but I just thought it was worth the mention.
If you can see this you need to update your browser>
I am not super fluent in html, css, or really any language as a matter of fact. I wrote a super basic website just for a little fun, however the image and audio file aren't loading at all. I really feel like everything is written as it should be, but I guess I'm wrong. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>THE GOAT</title>
</head>
<body>
<center>
<img src="mango.jpg" />
<br>
<audio controls autoplay>
<source src="falco.mp3" type="audio/mpeg">
</audio>
</center>
</body>
</html>
The index.html is in the same folder as "mango.jpg" and "falco.mp3" so I don't think I need to make a more specific path. Here is the URL of the site:
defaultfal.co
Thanks for any help :-)
When I visit your image url directly, I get 403 forbidden. This means that the permissions are set incorrectly on your server. (Specifically that the file is set to not be readable by the public.)
Make sure your file permissions are set to be readable by everyone! You can accomplish this using the chmod command line tool.
Edit: OP fixed it on his server and it works now!
I'm experimenting with the audio tag.
The file below does work in Google Chrome, but not in IE9. I'm always getting "audio tag not supported". I also tried wav, flac, wma --> same result.
I suspect there might some issue with the compaitibility mode, but I don't find where to change it.
Can anyone help?
Kind regards
Georg
<html>
<head>
</head>
<body>
<audio controls="controls" src="c:\concerto.mp3" >
audio tag not supported.
</audio>
</body>
</html>
Add the HTML5 doctype to the page and it should trigger standards mode in IE9. You should also add a title element to make the document valid:
<!DOCTYPE html>
<html>
<head>
<title>Add a title</title>
</head>
<body>
<audio controls="controls" src="c:\concerto.mp3" >
audio tag not supported.
</audio>
</body>
</html>
If you're still having trouble, try adding this meta tag to the head:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
If 'audio' is working in chrome, safari, etc. but not in IE, check your meta tags. I had one that referred to IE8 which stopped the 'audio' from functioning. It was quite frustrating until I found the problem at which point the lights went on.
IE plays files in your PC if you give full path as as a URL "file://c:/concert.mp3" or only file name "concert.mp3" if the file is in the same folder as the html file. Firefox also requires full path for files in other folders while Chrome seems to add 'file://' if it is not in the URL. This is a problem if you want to use the to play local files if they are in other folders. The FileAPI does not allow you to find the path of the file.
what is the internal mechanism of <bgsound> tag html?
I've looked into it:
For MIDI and WAV files, Internet Explorer loads winmm.dll and plays it through that. Specifically, it uses PlaySound. For MP3 files, it uses the ActiveMovie Control, runs it through the ActiveMovie Control Type Library (Quartz.dll, for info on its functions see here) to parse it, and plays that using DirectSound (DSOUND.DLL). Well, there you go.
The internal mechanism is entirely up to the browser vendor (should they choose to implement this non-standard element).
It is a black box, and shouldn't matter to anybody not developing the browser itself.
Not sure what you mean by internal mechanism, because bgsound is IE only and they keep there sources closed, but other vendors use embed instead of bgsound. What are you trying to do?
<html>
<head>
<title>Music</title>
<bgsound src="sound.mid" loop="infinite"> <!-- MS. Instead of infinite you can use a number. -->
</head>
<body>
<embed src="sound.mid" autostart="true" loop="true" hidden="true" height="0" width="0"> <!-- Others. -->
</body>
</html>