I have a webm with transparency. If the browser can't show it, I want to show an image instead.
I tried the following first:
<video autoplay loop muted>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
<img src="http://placehold.it/350x150" />
</video>
This posed two problems:
Internet explorer doesn't show anything at all.
Firefox shows the webm with a black background; no transparency.
I gave up a little and took to Javascript (and Modernizr):
<img ... class="shittybrowser" />
<video ... class="gloriousbrowser" style="display:none;" />
if(Modernizr.video.webm){
$(".shittybrowser").hide();
$(".gloriousbrowser").show();
}
This fixed the problem in Internet Explorer but Firefox still claims to do webm, despite only half-assing it.
How do I make sure only browsers that can display webms with transparency does so?
You can set image as value of poster attribute at <video> element
poster
A URL indicating a poster frame to show until the user plays or seeks.
If this attribute isn't specified, nothing is displayed until the
first frame is available; then the first frame is shown as the poster
frame.
<video autoplay loop muted poster="http://placehold.it/350x150">
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"
type="video/webm" />
</video>
Related
I'm trying to display my captions with my audio, and it seems like chrome loads it, but i dont see it on the screen, maybe it's because it's at the bottom of the div body?
I see the controls on the screen, but i don't see the audio.
<audio id="player" autoplay="" src="data/audio/Voice 006.m4a">
<source type="audio/m4a">
<track src="data\audio\subtitles.vtt" kind="captions" srclang="en" label="English" default="">
</audio>
This is my .vtt file
WEBVTT
1
00:00.000 --> 00:02.111
Hi my name is sam
2
00:02.888 --> 00:06.555
I wanna see what letter names, letter sounds and words you know.
3
00:07.111 --> 00:10.555
Let's answer some questions together and see how you do.
The <audio> element does not directly support WebVTT.
One option is to play your audio using a <video> element, which does support WebVTT.
Initially the poster is visible before video call start after video call ends i am able to see a black background in place of poster in video container.
below is the html tag that i have used for this purpose.
<div id="videoSmall">
<video id="videoInput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video>
</div>
i have tried to reset "videoInput" div with this code
var tag = $("#videoInput").clone();
$("#videoInput").replaceWith(tag);
This code works and brings poster image back but the issue with this is when i am performing video call again without refreshing the page .. the poster is not vanishing in order to show video .
You can do this by adding ended eventListener to the video element, and call the video load() again.
Here is a working example: CodePEN
HTML:
<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
JavaScript / jQuery:
var video= $('#video')[0];
var videoNew= $('#video');
videoNew.on('ended',function(){
video.load();
});
This question already has answers here:
Display fallback image even if the browser supports html5 video
(2 answers)
Closed 6 years ago.
I have extensively read and tried every solution in other threads with no luck.
My issue is this: when a browser does not support video tag, the backup image that I have set up does not show, and the video-div shows nothing but the background of body.
Here is the code I am using for the video/image:
<div id="video-div">
<video id="landing-video" autoplay loop>
<source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
<img src="images/landing-video-backup.JPG" title="Your broswer does not support the <video> tag"/>
</video>
From MDN
poster
A URL indicating a poster frame to show until the user plays or
seeks. If this attribute isn't specified, nothing is displayed until
the first frame is available; then the first frame is shown as the
poster frame.
You need to use poster attribute not an image tag.
<video id="landing-video" poster="images/landing-video-backup.JPG" autoplay loop>
<source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
I wrote up the following html which shows a video background and has 2 fallback images(for mobile and old browsers)
<div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<!--<source src="whatever......"> Disabled for testing -->
<img id="browserFallback src="videos/video.gif" title="Your browser does not support the <video> tag">
</video>
<img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the <video> tag">
</div>
the below javascript displays the second img gif on mobiles instead of the video:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
document.getElementById("mobileFallback").style.display = "block";
}
however, because I have 2 img objects at the same time like above, the mobile fallback goes out of alignment and only half of it gets displayed for some reason. It works perfectly fine if i remove the "browserFallback" img.
Any ideas on why this happens?
Your code has a few simple errors in it which may solve your problem.
Namely:
You forgot to close the quotes on the id attribute of the first image tag
"Your browser does not support the <video> tag" should be changed to "Your browser does not support the $lt;video> tag". This will render in a browser as the < and > symbols respectively and may be confusing your HTML.
Try changing your code to this:
<div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<img id="browserFallback" src="videos/video.gif" title="Your browser does not support the $lt;video> tag">
</video>
<img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the $lt;video> tag">
</div>
I am trying to display my Subtitles in video. I have mp4 video and ttml file for the video. When put it in html code, the video is playing but no subtitle is coming[Checked in chrome].
When I checked in IE11 it shows the CC option in the HTML5 video player but there also no subtitle is coming.
Here is what I have tried
http://jsfiddle.net/ilaiya/s49zessy/
<video controls autoplay height="400" width="400">
<source type="video/mp4" src="https://ccdpoc.blob.core.windows.net/asset-b82767bd-bf28-4e03-a2d2-329d6df2b633/Index.mp4?sv=2012-02-12&sr=c&si=107ca7bf-272e-48a9-b824-a48da8b7fe90&sig=o8PPGNFD6k0B7PMwdvZdjEy%2FuRc2r4urqqFd5GJyN2k%3D&st=2014-12-10T10%3A40%3A14Z&se=2016-12-09T10%3A40%3A14Z">
<track src="https://ccdpoc.blob.core.windows.net/sourceaes34/subtitle.ttml" label="English subtitle" kind="subtitles" srclang="en-us" default>
</video>
Chrome does not support TTML out-of-band text tracks. Currently, only WebVTT can be used inside of the element.
In general, Chromium is trying to remove XML from Blink: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/vXuOTK5M0hM.