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>
Related
I have a problem with this code:
<!DOCTYPE html>
<html>
<body>
<embed width="420" height="315"
src="https://www.youtube.com/v/_Yhyp-_hX2s">
</body>
</html>
it work on "try it yourself" on w3school.com but not work in my page, neither in a blank html page. I have this problem only with some video like vevo
There is actually nothing wrong with you code!
As soon as you host it it'll work. If you're on Linux try to copy the html file to "/var/www/html/" and in your browser type: "localhost/yourfilename.html". It should work!
(You'll need something like apache running).
Embed tag sometimes making problems on bbc and youtube. Try iframe tag.
see also
I just started a new job and during my lunch brake I wanted to work on practicing some skills to prep for the MS 70-480 specialist exam. I prefer using Google Chrome, but the company has rules about installing software for personal use so I am stuck working on IE (version:11.0.9600.18015).
So in notepad++ I created the simple test for HTML5's video element.
<!DOCTYPE html>
<html>
<head>
<title>70-480 Test Page</title>
</head>
<body>
<header>
<h1>Practice makes perfect</h1>
</header>
<section id="sandbox">
<video width="400" controls="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" >
Your browser does not support the video element.
</video>
</section>
</body>
</html>
But the page came back without the video showing. I checked the Developer tools and found in the DOM Explorer elements native to the HTML5 (header, video, section, etc.) are not being recognized and instead are showing such as:
...
<body>
<header></header>
<h1>Practice makes perfect</h1>
</header><//header>
<section id="sandbox"></section>
<video controls="" width="400"></video>
<source src="http://www/w3schools.com/html/mov_bbb.mp4"></source>
</video><//video>
</section><//section>
</body>
....
I know IE11 supports the elements since when I copy my code to JSfiddle on that same browser it shows up fine. Is there an explanation for why Internet explorer is giving me this head ache?
Both Pedro Mendes and Lance Leonard's comments worked.
Pedro's solution:
Does your browser have the "Edge (default)" document mode set? Try
this tag inside the header
Lance's solution:
Your page is likely being loaded in compatibility view. Please see
this previous answer for more info.
I decided to go with Lance's solution so that if I make more pages in the future I won't have to include the meta tag every time.
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'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>
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.