Using .ogg file while with <video> on html5 - html

I am trying to learn web development from w3schools.com
Currently I am studying HTML5 and I had a question on a code which I do not understand. If anyone could help it would be great! :)
In the below code, what is the function of the code
The code seem to run in the same way even if I delete this code.
Here is the link where I found this code:
<!DOCTYPE html>
<html>
<body>
<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>
Thanks in advance! :)

Try using 3rd party HTML5 video player library, e.g. VideoJS for better support of different formats, browsers, as well as providing Flash player fallback.

From my understanding you are asking what exactly the
Your browser does not support the video tag.
is doing there and why we got it there...
Just so you can understand this better follow the below steps:
Launch Internet Explorer
Go at Tools and turn Compatibility View on
Visit the site you mentioned (on IE with Compatibility View on)
You will see you will be getting the message "Your browser does not support the video tag." (because internet explorer with compatibility view on doesn't support HTML5).
If you change that message to the code, this will be reflected to the right of your screen.
Is this a bit more clear now?

Video tag <video> is an HTML 5 Tag, which is for now supported by very few broswer vendors. The current browser that you are running your code does not support this tag so you are getting this error - "Your browser does not support the video tag.", To cater this you can learn about "Modernizr" is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Related

Audio AutoPlay on HTML Website not working

I tried to make a fan-website for a artist so I wanted to have start page music which automatically plays. But, when I open the start page, my audio file doesn't play.
This is my code:
<audio controls autoplay loop>
<source src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" type="audio/mpeg" />
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
What I need to do to make this start playing automatically?
autoplay is a html standard. It's up to then browser to support it or not. I suspect you used Chrome, like so many others, and were surprised it didn't work.
https://www.w3schools.com/tags/att_audio_autoplay.asp
If you test this code, like I did, in Firefox 63, it will work fine.
Google decided to break the web standard in May 2018:
https://bugs.chromium.org/p/chromium/issues/detail?id=840866#c103
As of 2020, browser defaults mean this won't work in Firefox (all platforms) and Chrome (Android included, but not Mac it seems).
it depends on your browser's [here Firefox]
Autoplay preferences (blocked or not) in
about:preferences#privacy

Html Video player plays sound but not video

Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.

Why won't HTML5 video play in firefox?

I'm building a web page and want to add HTML video. It works fine in Chrome etc., but not in Firefox. I can hear the sound, but firefox is unable to show the picture, I get grey screen instead.
I've got Firefox 25.0.1
Here is my code:
<figure id="video">
<video width="320" height="240" controls>
<source src="vid/asd.mp4" type="video/mp4">
<source src="vid/asd.ogg" type="video/ogg">
Sorry Your browser cannot play HTML5 video.
</video><br/>
<img src="img/pic.jpg" alt="Pics"/>
<figcaption>Some text here
<br/>size: 6,95MB</figcaption>
</figure>
<video> works for me in Firefox 25.0.1/Windows Vista. Maybe it's a problem with a movie? Try this demo.
Also, from the Mozilla website:
To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware.
Interesting well ask yourself what version of firefox your running and take a look at
http://www.videojs.com/
Hope that helps ^_^
Well honestly I use firefox also but, Hmmm. Well remember to always to put .mp4 first! Because if not that creates some interesting bugs for ios...
This was a school project, just found out that the school's servers are not able to auto-get the MIME type under firefox. I had to add .htacces file

html5 video tag -quality of video different in firefox and chrome

I have the following code:
<div class="span4">
<video poster="assets/img/poster.jpg" controls="controls" width="420" height="420">
<source src="assets/videos/152638831.webm" type="video/webm" />
<source src="assets/videos/152638831.mp4" type="video/mp4" />
</video>
</div>
The video works in both Firefox and chrome, but in Chrome, it's very very grainy. I don't think it's an issue with my video because when I navigate to http://www.w3schools.com/html/html5_video.asp using Chrome, the video under the section called "DOM Methods and Properties" also appears grainy. When i say grainy, I mean, I see yellow, green, blue and red lines / dashes spattered across the video.
Can you tell me what I'm doing wrong?
Also, is the idea behind having multiple source tags that depending on the browser, it will select which file to play? In my case, I know firefox doesn't support mp4... I tested it. but the above code works in firefox. So I'm assuming it's playing the webm version of the file. Is this correct?
Thanks.
First of all, Chrome should be able to read the mp4 so perhaps you didn't use h264 compression.
You should check on that.
Second, you must include compressed ogv, and webm versions of the video.
Each browser supports a different video format at the moment so we have to include them all so that no one gets left out.
Here is a handy chart for browser video format support :
http://www.longtailvideo.com/html5/#media_formats
Don't forget the flash fall-back either, just incase someone with a dinosaur browser that doesn't support the html5 video tag needs to see the video too.
Here is a handy chart for video tag support :
http://caniuse.com/video
Let us know how you get on.

HTML5 video won't play picture [duplicate]

Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.