Skip to content
This repository has been archived by the owner on Feb 25, 2018. It is now read-only.

Does this also work with videos? #29

Closed
eoctavien opened this issue May 11, 2015 · 12 comments
Closed

Does this also work with videos? #29

eoctavien opened this issue May 11, 2015 · 12 comments

Comments

@eoctavien
Copy link

I was able to download the master file and run it in visual studio. However I have a video (via HTML5 video tag) that uses object-fit (and I need it to work in Internet Explorer). Does anyone know if it is just for images or can I apply it to videos as well?

@anselmh
Copy link
Owner

anselmh commented May 12, 2015

Have you tried to use it with video and encountered a problem or didn’t tried it? In general it should also work with video although I never explicitely tested it with it.

@eoctavien
Copy link
Author

I have tried and it seems to not be working. I referenced both the css and js files. I have a video selector and I have my object fit property is set to fill, but I do not see the changes when I run it in IE11 (video letterboxes instead of filling). I am using ASP.Net web forms and my referenced files/the script are in the master page while the actual video element is in a content page if that helps at all... Perhaps I am missing a step? Any help or suggestions would be greatly appreciated.

@eoctavien
Copy link
Author

Here is some trivial code to better illustrate:

//////////////////On Master Page//////////////////////////
!DOCTYPE html
html xmlns="http://www.w3.org/1999/xhtml"
head runat="server"
titleWeb Project/title
meta http-equiv="X-UA-Compatible" content="IE=Edge" /
link href="Content/bootstrap.css" rel="stylesheet" /
script src="Scripts/jquery-2.1.3.min.js"``/script
link rel="stylesheet" href="../dist/polyfill.object-fit.css" /
style
video {
width: 100%;
height: 800px;
object-fit: fill;
}
/style
/head
body
Content Page Placeholder
/Content Page Placeholder
/body

//////////////////On Content Page//////////////////////////

div style="height:800px; width:100%;"
video id="video" autoplay="autoplay" loop="loop" preload="metadata" poster=""
video
/div

script src="../dist/polyfill.object-fit.js"``/script
script
// Call polyfill to fit in images
document.addEventListener('DOMContentLoaded', function () {
objectFit.polyfill({
selector: 'video',
fittype: 'fill',
disableCrossDomain: 'true'
});
});
/script

@anselmh
Copy link
Owner

anselmh commented May 13, 2015

Thanks. I’ve reconstructed the case partly successful in a non-supporting Firefox version. Does it work if you resize the window after the polyfill has initialized? In my case the resize event triggered the polyfill to work properly. If IE does the same, that narrows down the issue.

@eoctavien
Copy link
Author

It does not seem to work when I resize. Also, In my code, I should have wrote disableCrossDomain: 'false' instead of true. I am thinking it might just be the way I set this up. I'm not really sure, perhaps I am not referencing something correctly... Are you able to replicate the issue on IE11 at all using the code above?

@anselmh
Copy link
Owner

anselmh commented Jun 18, 2015

There are other reports now regarding this issue:

As the title states, this does not work with videos with Microsoft's new browser on Windows 10 Build 10130.

@cosmix
Copy link

cosmix commented Jun 18, 2015

Apologies, but it did not seem like a duplicate. My bug was specifically about Spartan/Edge and a recent release thereof. The polyfill seems to work well with IE11 in our case, hence I thought I'd file the more specific bug which described a situation whereby, most certainly, the polyfill does not seem to work at the moment.

@anselmh
Copy link
Owner

anselmh commented Jun 18, 2015

Wait, so video works well i IE11 with video but not in Spartan?

@cosmix
Copy link

cosmix commented Jun 18, 2015

It seems to be working ok on IE 11 (11.0.10011.0), but not on Spartan/Edge yeah – both as found in Windows 10 Insider Preview Build 10130.

@anselmh
Copy link
Owner

anselmh commented Jun 18, 2015

Ah, that is very interesting now and actually quite frightening as in MS Edge there’s no reliable way to UA detect it. I’ll try to figure out what’s going on there. Do images work at least in there, @cosmix?

@cosmix
Copy link

cosmix commented Jun 18, 2015

I think you can detect Edge by looking for the "Edge/12.0" at the end of the UA string.

Sorry I haven't tried images just yet --- I don't typically use Windows machines and I very infrequently use a VM for testing. I'll give it a try and let you know, however, the next time I get to use that Win10 IP VM. Given the state of Edge I expect it to have several regressions/issues that will be fixed before the final rolls out later this summer.

@anselmh
Copy link
Owner

anselmh commented Sep 29, 2015

Hey, I re-traced the problem and it works fine in browsers here except for the following caveats:

  • No browser passes autoplay attribute through JavaScript and exectues it. So you can’t autoplay videos using just the autplay attribute. Instead you’d need to use a complete JavaScript video player which might work better in that case.
  • MS Edge support is currently completely broken. See Not working in Microsoft Edge #45 for more info.

I’m therefore closing this issue now.

@anselmh anselmh closed this as completed Sep 29, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants