Metadata/Autoplay
yavorski opened this issue · comments
Hi I am testing this in latest edge i think
Microsoft Edge 38.14393.0.0Microsoft EdgeHTML 14.14393
It is not working at all...
Doesn't work in ie11 too...
Version 11.576.14393.0
are you seeing any console errors? i can confirm that this is working in IE11 and Edge (we are using it in a project right now and we are having no issues in these browsers).
Can you provide some code for how you're using it?
Doesn't have access to windows now, but i think the issue was caused by using min-height on the element. Will check tomorrow.
Hi, Yes I confirm now.
So the video tag gets wrapped in <object-fit> tag, but the video does not start play.
It is showing only the poster of the video.
Also there is no errors in the console.
Here is the full code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>object-fit-videos test</title>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
html {
height: 100%;
font-family: metric, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
color: #fff;
}
#video-test {
width: 100%; /* it's a block element but still... */
height: 420px;
}
video {
display: block;
object-fit: cover;
object-position: left top;
font-family: 'object-fit: cover; object-position: left top;';
}
</style>
</head>
<body>
<div id="video-test">
<video preload autoplay loop poster="https://www.html5rocks.com/en/tutorials/video/basics/poster.png">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
</video>
</div>
<script src="node_modules/object-fit-videos/dist/object-fit-videos.min.js"></script>
<script>objectFitVideos();</script>
</body>
</html>
And screenshot attachment:
I don't think this is an issue with object-fit-videos. I am seeing the same behavior in Chrome, where object-fit and object-position are natively supported.
I was able to resolve with
#video-test {
width: 100%;
height: 420px;
overflow: hidden;
}
video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
font-family: 'object-fit: cover; object-position: left top;';
}To be honest, your screenshot looks correct to me. It looks like it's positioned at the top and left, and is filling the space appropriately.
What behavior are you expecting that you are not seeing?
Hi, i updated the code with the one you provided.
The video is still not starting to play in edge.
I expect at least the video to start, and not show only the poster.
Also there is a noticeable delay, before the poster is stretched. (However the video does not start)
Screenshot 1)
Screenshot 2 - after around 3,4 seconds, after load )
Could you provide a working example on the web. Maybe i could test that with the edge i have. And see if it is working as expected.
10x in advance.
I can't provide our current project that is utilizing this polyfill, it is not public unfortunately. I will take a deeper look here, though.
Ok, here is a live example, https://yavorski.github.io/v-obj-fit/
Does this work as expected in your edge browser?
The source code is here https://github.com/yavorski/v-obj-fit
Demo is updated, to load the script properly.
How ever the video is still not working in the edge versions i mentioned above.
Set up my own test case with your original code. I think the delay is related to loading metadata - we can't find out the resolution of the video until the metadata loads, so we can't really polfyill anything until that event is fired. If it takes a few seconds to download metadata, you'll see the delay. You might consider trying to hide the video until the fit occurs. There are some graceful ways to handle that I think.
I am guessing the autoplay isn't triggering because we move the video element into a wrapper and for some reason that bonks it. This wasn't our usecase, so we didn't catch that issue. We may be able to resolve, but if this is your true usecase, you might consider just .play()ing the video manually after the metadata event fires.
I experienced this issue today and thought I'd chime in. Here's my solution that seems to be working. This is rough and could be rewritten in an object oriented method but you get the gist.
objectFitVideos();
var vid = document.getElementById("testVideo");
vid.addEventListener("loadedmetadata", getmetadata);
function getmetadata(){
vid.play();
}
if (vid.readyState >= 2) {
getmetadata();
}
Just adding the play() function when the loadedmetadata event fired worked fine in IE 11 but not the newer versions of Edge. I had to add the additional check if the readyState property was greater than or equal to 2. Thanks to this post for that last bit http://stackoverflow.com/questions/33116067/addeventlistenerloadedmetadata-fun-doesnt-run-correctly-firefox-misses-eve
Great script BTW thanks!
I've also experienced this issue, Edge 38.14393.0.0 (14.14393). The polyfill works and does a proper stretch, but the browser no longer respects the autoplay attribute. I would suggest the polyfill should check the metadata, and if autoplay is set, ensure the video has started playing after applying the wrapper and styles (as @RickHocutt is doing).
If I'm able to squirrel away some time I'll try to submit a PR for that functionality.
This should be fixed in the next release in the next day or two. Luckily we already handled the loadedmetadata/readyState combo, so it was fairly straight-forward to play() the video if autoplay is set.