video.js fallback is not working - html

This is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="javascripts/video.js-stable/dist/video-js/video.js"></script>
<link rel="stylesheet" type="text/css" href="javascripts/video.js-stable/dist/video-js/video-js.css" />
<script>
videojs.options.flash.swf ="http://localhost/site/public/javascripts/video.js-stable/dist/video-js/video-js.swf";
</script>
<title>video</title>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin"
controls="" preload="auto" width="640" height="264"
poster=""
data-setup='{"example_option":true}'>
<source src="http://localhost/site/public/videos/ogg.mp4" type='video/mp4'/>
</video>
</body>
</html>
when i play video in firefox 3 then firefox crashed and when i use firefox 11 then it play fine...i read somewhere that firefox is not suported mp4 videos in html5.
If mp4 is not supported by firefox in html5,that means my code is using flash,because video is playing fine in firefox 11,or how can i check my code is using flash as fallback.
one more thing when i try to play 3gp video then it show error in all modern browser.
error:Sorry no compatible source and playback technology is found.
what is real problem ?? please help. thanks in advcance!!

For more information about Firefox MP4 support, visit this page.
Specify multiple alternative media resources for compatibility using source:
<video ...>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
...
</video>
Place object with flash inside video to provide fallback:
<video ...>
<source src="video.mp4" type="video/mp4">
...
<object type="application/x-shockwave-flash" data="flash_player.swf" ...>
<param name="movie" value="flash_player.swf">
<param name="flashvars" value="flash-variables">
...
</object>
</video>
.3gp support:
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Related

Autoplay attribute of video element of HTML 5 working in Firefox but not in Chrome or Opera

I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video width="400" autoplay>
<source src="../Videos/mov_bbb.mp4" type="video/mp4">
<source src="../Videos/mov_bbb.ogg" type="video/ogg">
<source src="../Videos/mov_bbb.webm" type="video/webm">
Your browser does not support autoplay HTML5 video tag.
</video>
<p><span>Video courtesy of </span>Big Buck Bunny</p>
</body>
</html>
Upon opening the file in Firefox everything is working as expected.
But, upon opening the file in Chrome or Opera a still image is coming and nothing is happening.
Why is it so?
I am using Ubuntu 18.04
A bit of a workaround. Adding the following after the closing /video tag could work.
<script>
document.getElementById('vid').play();
</script>
Does that work for you?
EDIT: After some extra digging I stumbled across this post https://stackoverflow.com/a/42414858/6524598. It seems to be the case that chrome only respects autoplaying of a video if the audio of it is muted. This would mean that the following would perhaps work for you as well:
<video width="400" autoplay muted >
<source src="../Videos/mov_bbb.mp4" type="video/mp4">
<source src="../Videos/mov_bbb.ogg" type="video/ogg">
<source src="../Videos/mov_bbb.webm" type="video/webm">
Your browser does not support autoplay HTML5 video tag.
</video>

Video is not getting played using video.js

Below is the html code which i am using to play videos in my video folder using video.js link
<!DOCTYPEs>
<html>
<head>
<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
</head>
<body>
<video id="sample" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
data-setup="{}">
<source src="/video/video1.mp4" type='video/mp4' target="_blank"/>
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
</body>
</html>
You didn't write in what browser are you trying to make the code work. Is it possible that your browser doesn't support the video format? Chrome supports .mp4, but for example Firefox doesn't, it supports .webm.
You can read more about this in the WebPlatform Docs

Making video tag play in all browsers

I have a video tag looking like this:
<video width="380px" height="190px" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
This plays the video in Firefox and Chrome. However, IE9 and 10 simply states unreadable source (the video 'box' itself turns up so the tag is supported). Safari doesnt seem to support the video tag and thus I only see my fallback message. However, if I go to the URL directly in any browser I can watch the movie in Firefox + Chrome and download it in IE + Safari.
What should I do to make the video playable in all browsers?
Add this line in your head somewhere.
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
Also try putting your source in the opening video tag.
<video source src="movie.mp4" type="video/mp4" width="380px" height="190px" controls></video>
Hope fully that helps
I usually have four versions of the same video for cross-browser compatibly:
<video width="320" height="240" 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.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked well for me cross-browser. Another thing to note is that for mobile, a higher-optimised .mp4 video is more likely to work (I've had issues with this in the past).

html5 video only works in safari

Im new to HTML 5 and learning from w3schools
I tries to get the html video code working for a file I have. Trouble is that the html only works in safari but not the other browsers I have.
Any ideas please?
thanks
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="candonjoel.mp4" type="video/mp4" />
<source src="candonjoel.webm" type="video/webm" />
<source src="candonjoel.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
Does candonjoel.webm exist? Can you show the URL of your code please?
https://github.com/kaihendry/recordmydesktop2.0/ is project to make screencasts easier from Linux to all browsers.

html5 video plays on all browsers except IE9

I wanted to post this question and answer because I wasn't able to find it anywhere.
So if you are playing with HTML5 <video> on the different browsers make sure the rest of your HTML is valid such that your video will play on IE9.
The following code works on Chrome 19, Firefox 12, Opera11, as well as iOS5 but NOT IE9:
<video controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
First check whether your browser support HTML 5 Video or not
Check browser supporting video or not
To get it to play on IE9,
You need this full markup:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<video controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>