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.
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'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.
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.
What possibilities are there for inserting and showing videos on a webpage that
don't require additional plugins or installations from the user and
can be used for other than the .flv format (.f4v, .avi e.g.)
At SO I found a few questions like this: stackoverflow.com[...], but they are only about .flv-players. Is that because there is nothing else?
I know there are many, many formats and no tool can handle them all. But is it at all possible to show any other than .flv formats without extra plugins? I have never found any.
Thank you.
Most latest technology is HTML5 with <video> tag
The <video> tag specifies video, such as a movie clip or other video streams.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Documentation
Now most of the browsers supports HTML5 so no worry of using + don't require additional plugins or installations
Check out http://www.longtailvideo.com/players/
It also has a wmv player: http://www.longtailvideo.com/players/jw-wmv-player/