I want to add a video into my html code and it should be accessible at least from IE ,firfox and chrome browsers.
The extension of the video is .vob
I have used this code
<object data="../Video/VTS_01_1.vob" height="200" width="200"></object>
But I can't see nothing on the screen juste a square with 200 height and 200 width
Use the <video> element
Use a file format supported by browsers. VOB is not such a format. MP4 and WebM are good choices for different browsers, you should use both
Consider using a library that provides Flash et al fallbacks for old browsers. Examples include video.js and video for everybody
Sample Code:
<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
<div class="fallback">
<p>................</p>
</div>
</video>
wrapped up the same old <object> and <embed> tags with the new tag .
More info about video tag
Related
Hi friends i used video tag in html, ie8 its not working. how to implement video in ie8.
<video width="300" height="200" controls>
<source src="pencuin.mp4" type="video/mp4">
</video>
Can any one suggest me solution, thanks.
IE8 does not support the video tag. In this case, IE8 displays instead the contents of the video tag, which is hidden in browsers which support the tag.
To support IE8, find a video player using Flash and place the <object> tags inside the <video> and follow the instructions for that video player to choose the right video for it to play. Newer browsers will use the video tag and will not require Flash, but users of older browsers must use Flash.
Try SWFObject: Javascript Flash Player.
Try this example: http://code.tutsplus.com/articles/how-to-play-video-using-an-open-source-player--net-4144
I am using the <video> tag, and I want to use any URL from YouTube in it.
I have this http://jsfiddle.net/wCrNw/ but it's not working.
I have checked this Show Youtube video source into HTML5 video tag? but that is not solving my problem.
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
></video>
MediaElement YouTube API example
Wraps the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<script>
var player = new MediaElementPlayer('#player1');
</script>
Video tag supports only video formats (like mp4 etc). Youtube does not expose its raw video files - it only exposes the unique id of the video. Since that id does not correspond to the actual file, video tag cannot be used.
If you do get hold of the actual source file using one of the youtube download sites or soft wares, you will be able to use the video tag. But even then, the url of the actual source will cease to work after a set time. So your video also will work only till then.
The most straight forward answer to this question is: You can't.
Youtube doesn't output their video's in the right format, thus they can't be embedded in a
<video/> element.
There are a few solutions posted using javascript, but don't trust on those, they all need a fallback, and won't work cross-browser.
This would be easy to do :
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Is just an example.
This will give you the answer you need. The easiest way to do it is with the youTube-provided methods. How to Embed Youtube Videos into HTML5 <video> Tag?
According to a YouTube blog post from June 2010, the "video" tag "does not currently meet all the needs of a website like YouTube" http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Try this solution for the perfectly working
new YouTubeToHtml5();
How does the HTML5 video tag eliminate the need for plugins. What does the video tag do in addition to the previously used tags like embed and object that removes requiring a plugin? Please explain in detail.
A little gotcha on video and IE9. A client supplied the .mp4 video. We got it working on a website with the .ogg options and the flash object fallback for non-HTML 5. Everything was fine and dandy and working beautifully under XP fully updated to the lastest IE. So IE fine. Chrome fine. Firefox fine. Tablets fine. Website looked great.
Then we had a complaint - the video wasn't showing. Someone using Windows 7 and IE, again fully updated, couldn't see the video.
It turns out the client hadn't encoded the .mp4 as a H.264 format video and our fully updated XP system was only running IE8 (WinXP doesn't have IE9) and falling back gracefully to Flash. Chrome was fine with .mp4, FF with .ogg. But it turns out IE9 was reading the tag, but unable to read the .mp4 file - so no fallback to the Flash, just the red-cross. The solution was to re-encode the .mp4 (Miro used) so it had the proper codec.
The moral is if in doubt on IE9, check the .mp4 file has been encoded to the right format.
How does the HTML5 video tag eliminate the need for plugins
Browsers that support HTML5 players have ability to shown the default or built-in player when using <video> tag.
What does the video tag do in addition to the previously used tags
like embed and object that removes requiring a plugin?
The <video> tag does nothing to other/old tags but it does provide you an option for the fallback. If a browser does not support HTML5, they will fallback to old methods such as <embed>, <object>. Here is an example:
<video controls
preload="none" width="590" height="320"
data-setup="{}">
<source src="Real_Media.theora.ogv" type='video/ogg'>
<!-- fallback for older browsers -->
<object width="590" height="320">
<param name="movie" value="http://www.youtube.com/v/Z7pAr39ZnhA&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Z7pAr39ZnhA&hl=en_US&&autoplay=1;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="590" height="320" wmode="transparent"></embed>
</object>
</video>
As you can see, we have specified <object> tag inside <video> tag. Though it is optional but you need to specify it for browsers that don't support HTML5. In above case, if a browser supports HTML5, the <video> tag will be used and <object> tag will be ignored and vice versa.
For in-depth details about HTML5 video, take a look at:
Dive Into HTML5 - Video Tag
Have a look at: http://html5media.info/ To include a one line .js to support <video> and <audio> tags in all major browsers and phones:
I have no idea why this isnt working.
<video src="American.avi" controls="controls">
<object data="American.avi" type="video/avi" />
<embed src="American.avi" />
All of the above tags return either "Missing Plugin" or have video controls that dont load a video. There is no link to install the missing plugin on chrome, there is on Firefox but it says no suitable plugins were found.
Any suggestions?
If you are trying to ensure a wide range of compatibility across browsers, then I believe the suggested method of embedding video using HTML5 tags is as follows;
<video width="480" height="320" controls="controls">
<source src="American.ogg" type="video/ogg" />
<source src="American.mp4" type="video/mp4" />
<p>I'm afraid that your browser does not support the video tag.</p>
</video>
AVI is a video container, and could contain video in one of a wide variety of formats. As such, I believe it's preferable if you can convert your video to .ogg and .mp4 formats to ensure compatibility across a wide range of browsers.
To clarify, the above code will show a single video player which will use any one of the provided source methods (but only one). So you can provide multiple formats for a given video window and the browser will pick which of the source elements that it can display and it will display that. So, with the above code, if the browser can play the .ogg version of the file it will, otherwise it will try to play the .mp4 file instead.
Browsers generally don't support AVI. The choice of containers and codecs you have is limited, partly deliberately (because lots of formats means lots of potential security holes) and partly due to unfortunate limitations like software patents.
To get cross-browser-compatible <video> you will need to provide MP4 and one of WebM or OGG Theora. You can also use the MP4 video in a Flash player as a fallback for browsers that don't support <video>.
See this table for which browsers support which formats.
Can anyone give a concise instruction on how I can have a flv play from my html page please?
With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480"
data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
<source src="video1.flv" type="video/x-flv">
</video>
</body>
For further details: http://videojs.com/
Actually, I did not find information specified about playing flv files. But it works fine. :)
You can use other video formats using video.js all you need to change is type as...
<source src="..." type="video/mp4">
Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.
See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.
I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/
It's clean, minimal and fairly simple to setup.
You can try https://github.com/Bilibili/flv.js
With flv.js, You'll get:
Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos
Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.
Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.
Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.
Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.