I'm looking for a solution for embedding video and audio in html. The new videotag supports .ogg and .mp4, but is there a fallback solution for .flv and other formats?
For example, if I want to embed an .ogg, it will check whether or not html5 is supported, if not, it uses the fallback. If I want to embed a .flv is uses the fallback.
html5 tag supports a fallback to any element, if the browser cannot interpret the video tag. here s a quick example for a fallback to a flash-file.
<video controls width="500">
<!-- if Firefox -->
<source src="video.ogg" type="video/ogg" />
<!-- if Safari/Chrome-->
<source src="video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. -->
<embed src="your_flash_file" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
instead of the embed tag, you can take any html-element (f.e. a span with text "your browser cannot interpret html5.." or a picture or anything you want). basically, html5 browser take the videosource they can play, while non-html5 browser ignore the video and source tag and take the falback element at the end.
Related
I'm creating a webpage that is using HTML5 for videos. I tried one video, and it loaded and played successfully. But then, the other video does not even load. How can I fix this? The code is the same for the working video and the not working video
<video src="SnakeVids/sukyandaru.mp4" width="350" height="300" controls="controls" type="video/mp4"></video>
Btw, the difference is that the first video is a .mp4, and the other one I converted from .flv to .mp4.
After reading the comments, it looks like your video was converted into a format that is not compatible with Google Chrome. MP4 supports some codecs but only a small subset is widely supported, and Chrome supports these video formats for the <video> tag.
You should encode your video using a supported codec.
Additionally, you might want to provide different sources for compatibility with other browsers and platforms.ogg is a safe choice. A simplified example extracted from w3schools:
<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>
You can also use third-party libraries, like videoJS, that will help you with video formats support. Some of them even have a flash fallback.
I am trying to add a inline sound in a web page but when i add and open the web page it plays automatically..I used <object>,<embed> everything but autostart="false" and autostart="0" is not working in IE,Mozilla and Chrome.I also tried to add inline video but it is also not playing.Please help me.I really need a help.
You should use the HTML5 way of doing it. The current major browsers can do fine with that. The big advantage: No need for extra plugins and bogous <object> and <embed> tags.
Example for embedding audio:
<audio controls="controls">
<source src="sound-ogg.ogg" type="audio/ogg" />
<source src="sound-mp3.mp3" type="audio/mpeg" />
</audio>
See w3schools HTML5 audio on this topic for better examples and explanation.
Video is as easy:
<video width="800" height="600" controls="controls">
<source src="video-ogg.ogg" type="video/ogg" />
<source src="video-mpeg.mpg" type="video/mp4" />
<source src="video-webm.webm" type="video/webm" />
</video>
Again, w3schools has a deeper explanation with examples.
To convert audio and video to the required formats, I use Handbrake.
For an multi-browser support (HTML5 and no HTML5) take a look at video.js. In my humble opinion, this is the best way of including video content.
I am familiar with html4 but not in html5. I am starting to learn. But I am sticking in video and audio tags.
for video tag I have written like:
<video width="320" height="240" controls="controls" style="border:2px solid #ccc;">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.wmv" type="video/wmv" />
Your browser does not support the video tag.
</video>
where as code for audio tag is like:
<audio controls="controls">
<source src="Kalimba.ogg" type="audio/ogg" />
<source src="Kalimba.MP3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
the video file "Wildlife.wmv" and audio file "Kalimba.MP3" are on the same folder where the above html file is present.
Also I confess that these types of code I got from http://www.w3schools.com/html5/html5_video.asp though I did not understand what is the need for writing source tag twice with different extensions.
Well, it's for fallback, webkit browsers only support a certain type of files, while gecko based browsers (like Firefox) only support a different kind. So it's there to accommodate the difference between the browsers and allow all of them to display the file corretly.
If I may suggest, don't go to w3schools for information. It's a generally bad and misleading site.
I know that object tag embeds objects in html and useful for playing videos/audios.
When we specify object with type="video/mpeg" does this use the default player in the device
I am having an issue in playing mp4 files. When i use object tag.
It is able to play mpeg-2 transport stream though.
Also the device player specs says they support mp4.
Am i missing anything here.
You might get help from this website mentioned in this answer to a similar question.
Edit:
html object tag has some limitations like the other tags used to play videos. I think this will give you a more clear idea. There you'll see that the best solution is to use 3 different methods together like this:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
Your browser does not support video
</embed>
</object>
</video>
In this example, The HTML 5 video element tries to play the video either in mp4, ogg, or webm formats. If this fails, the code "falls back" to try the object element. If this also fails, it "falls back" to the embed element.
And the easiest way to display videos in HTML is to use YouTube.
Anyway, you'll understand it better if you read the whole thing there.
I'm trying to figure out my options when it comes to playing both audio and video via the web. I'm sold on the HTML 5 <video /> and <audio />. But, I'd like to be able to display flash video/audio if the HTML video/audio fails.
Is there an easy way to detect if the video/audio is not playing for any reason, then swap out the HTML5 player for a Flash player?
You can pop in your Flash alternative as the last item within the <video> tag, and it’ll play if the HTML5 video doesn’t.
See Mark Pilgrim’s example, as it’s comprehensive and regularly updated: http://diveintohtml5.ep.io/video.html#example
To summarise it:
<video>
<!-- HTML5 video -->
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4">
<!-- Flash player fallback for user agents that don’t support HTML5 video -->
<!-- All user agents that don’t understand the <video> tag, or don’t support
the video formats you’ve provided, will show this instead. Even IE 6. -->
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf">
<param name="flashvars" value='config={"clip": {"url": "video.mp4", "autoPlay":false, "autoBuffering":true}}'>
</object>
</video>
If you can freely choose the Flash video player try JWPlayer it has a HTML5/Flash fallback implemented
I'd recommend MediaElementJS.
But to answer your question, the very nature of the video, audio and source elements allows you to present different sources to the browers, which then chooses what it can play. If it can't play any of them, as long as you provide a flash alternative it will go ahead and use that.
You can use Modernizr to check if a specific HTML5 tag is supported or not and switch to fail safe option if it isn't, e.g:
if (Modernizr.video) {
//start using HTML5's video tag
} else {
// use flash
}
Here's a tutorial on how to use Modernizr Deploy HTML5 & CSS3 w/ Modernizr