I have added a text overlay with href link, its working with html5 video, but when i switch video in fullscreen mode, href link is not working, I can see the text(ui) in the fullscreen mode video, but unable to click.can anyone help me?
Jsfiddle
<video id="v" controls>
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay">
This is HTML overlay on top of the video! </div>
thanks
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>
I am trying to add a static image as fallback for video background in html 5 but not getting the output can anyone help.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg" title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
Check for you image path and replace the <video> tag in the title with < >
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg"
title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
I suggest that instead of using an image inside the video area, you use a background image.
#video-bg-elem {background-image: url(media/staticimage.jpg);}
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
Video not supported
</video>
</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.
I have been searching (unsuccessfully) for a reliable method to lazy load images while using the HTML5 spec for <picture>. Most solutions/plugins out there currently rely on using data- attributes. I could be wrong, but it doesn't seem this method will work in conjunction w/ <picture>.
I'm really just looking to be pointed in the right direction. If anyone has a solution that they're currently using, I'd love to see. Thanks!
Here is standard markup per the HTML5 spec:
<picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
</picture>
It's February 2020 now and I'm pleased to report that Google Chrome, Microsoft Edge (the Chromium-based Edge), and Mozilla Firefox all support the new loading="lazy" attribute. The only modern browser hold-out is Apple's Safari (both iOS Safari and macOS Safari) but they've recently finished adding it to Safari's codebase, so I expect it will be released sometime this year.
The loading="lazy" attribute is only for the <img /> element (and not <picture>) but remember that the <picture> element does not represent the actual replaced-content, the <img /> element does (i.e. the image that users see is always rendered by the <img /> element, the <picture> element just means that the browser can change the <img src="" /> attribute. From the HTML5 spec as of February 2020 (emphasis mine):
The picture element is somewhat different from the similar-looking video and audio elements. While all of them contain source elements, the source element's src attribute has no meaning when the element is nested within a picture element, and the resource selection algorithm is different. Also, the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs.
So doing this should just work:
<picture>
<source media="(min-width: 45em)" srcset="large.jpg" />
<source media="(min-width: 18em)" srcset="med.jpg" />
<source src="small.jpg" />
<img src="small.jpg" alt="Photo of a turboencabulator" loading="lazy" />
</picture>
Note that the <picture> element does not have any width or height attribute of its own; instead the width and height attributes should be applied to the child <source> and <img> elements:
4.8.17 Dimension attributes
The width and height attributes on img, iframe, embed, object, video, source when the parent is a picture element [...] may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels.
[...]
The two attributes must be omitted if the resource in question does not have both an intrinsic width and an intrinsic height.
So if you want all <source> images to be rendered as 500px by 500px then apply the size to the <img> element only (and don't forget the alt="" text for vision-impaired users, it's even a legal requirement in many cases):
<picture>
<source media="(min-width: 45em)" srcset="large.jpg" />
<source media="(min-width: 18em)" srcset="med.jpg" />
<source src="small.jpg" />
<img src="small.jpg" alt="Photo of a turboencabulator" loading="lazy" width="500" height="500" />
</picture>
For anyone still interested...
After revisiting this issue, I came across a fairly new script called, Lazysizes. It's actually quite versatile, but more importantly it allows me to do lazy loading of images while utilizing the HTML5 markup as described in the OP.
Much thanks to the creator of this script, #aFarkas.
Working example of lazy loading images using the picture element and intersection observer tested in Chrome and Firefox. Safari doesn't support intersection observer so the images are loaded immediately, and IE11 doesn't support the element so we fallback to the default img
The media queries in the media attr are arbitrary and can be set to suit.
The width threshold set is 960px - try a reload above and below this width to see either the medium(-m) or large(-l) variation of the image being downloaded when the image is scrolled into the viewport.
Codepen
<!-- Load images above the fold normally -->
<picture>
<source srcset="img/city-m.jpg" media="(max-width: 960px)">
<source srcset="img/city-l.jpg" media="(min-width: 961px)">
<img class="fade-in" src="img/city-l.jpg" alt="city"/>
</picture>
<picture>
<source srcset="img/forest-m.jpg" media="(max-width: 960px)">
<source srcset="img/forest-l.jpg" media="(min-width: 961px)">
<img class="fade-in" src="img/forest-l.jpg" alt="forest"/>
</picture>
<!-- Lazy load images below the fold -->
<picture class="lazy">
<source data-srcset="img/river-m.jpg" media="(max-width: 960px)">
<source data-srcset="img/river-l.jpg" media="(min-width: 961px)">
<img data-srcset="img/river-l.jpg" alt="river"/>
</picture>
<picture class="lazy">
<source data-srcset="img/desert-m.jpg" media="(max-width: 960px)">
<source data-srcset="img/desert-l.jpg" media="(min-width: 961px)">
<img data-srcset="img/desert-l.jpg" alt="desert"/>
</picture>
and the JS:
document.addEventListener("DOMContentLoaded", function(event) {
var lazyImages =[].slice.call(
document.querySelectorAll(".lazy > source")
)
if ("IntersectionObserver" in window) {
let lazyImageObserver =
new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.nextElementSibling.srcset = lazyImage.dataset.srcset;
lazyImage.nextElementSibling.classList.add('fade-in');
lazyImage.parentElement.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Not supported, load all images immediately
lazyImages.forEach(function(image){
image.nextElementSibling.src = image.nextElementSibling.dataset.srcset;
});
}
});
One last thought is that if you change the screen width back and forth, the image files are repeatedly downloaded again. If I could tie the above method in to a cache check then this would be golden...
On web.dev Google advices that picture tags can be loaded lazy.
https://web.dev/browser-level-image-lazy-loading/
Images that are defined using the element can also be lazy-loaded:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
Although a browser will decide which image to load from any of the elements, the loading attribute only needs to be included to the fallback element.