I am using VideoJS and it works fine in Chrome, IE9. However, when I switch to IE7, even the Demo VideoJS does not work
I get the following error:
SCRIPT438: Object doesn't support property or method 'defineProperty'
video.js, line 153 character 142
Is it something additional that I need to do?
Related
I am using Selenium C# to drive a Headless instance of Chrome
((ChromeOptions)_Options).AddArgument("--headless");
((ChromeOptions)_Options).AddArgument("window-size=1920,1080");
I have run into the problem that my javascript is always detecting both
$(document).height()
and
$(window).height()
as being 1080 in height, which is not accurate. The document height should be much taller in some cases. Is there a reason this is not working correctly and/or a work around to solve the issue?
In my troubleshooting, I grabbed the value for this javascript, and discovered that it was also 1080.
Math.max(document.body.scrollHeight, document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight)
This particular page is definitely taller than the screen, and I used the Selenium GetScreenshot() method to take a picture and verify the scrollbar exists and content exists below the visible area.
For clarification, this does work correctly when running the headed version of Chrome. And the javascript in question is being run from JQuery's method:
$(document).ready(function () {
L20n is really helpful when it comes to implementing a localization requirement in our web application project and works perfectly fine in Chrome and Firefox and almost gets us there in Internet Explorer 11.
We are using HTML (which is supported) in the translation strings, they are formatted like this example:
"About <strong> a </strong>"
It works beautifully in Chrome and Firefox:
Translation result in Chrome
Unfortunately when I switched to Internet Explorer 11, getting this lovely sight on the same part of the page:
Translation result in IE 11
We're not doing anything weird or super special, it's pretty basic implementation.
Question is - has anyone encountered this issue while working with l20n and if so - is there anything that can be done to get Internet Explorer to render tags in translation strings?
After help from #Sampson (cheers!) and pointing out that a) It was issue on IE11/Edge Mode not Edge b) IE11 does not support one of the HTML5 elements such as Template, I dug around a little bit before I was about to announce complete defeat and digging through l20n github pages:
l20n compatibility
Using babel polyfill
Using patched webcomponents HTMLTemplateElement polyfill (link provided on page
I added babel and modified polyfill js file and after quick deploy and nervous refresh, it appeared the solution worked. Testing it as we speak so that it doesn't cause issues with the app but all looks good so far.
I know this is a workaround but our IE traffic is small enough yet I was not able to give up on these users that would like to use what I am currently working on in Irish and coincidentally would end up using IE11.
Due to the lack of support for the <template> element in Internet Explorer 11, the following fails:
// https://github.com/l20n/builds/blob/0d58a55afa6ae5aa868b8002fae5ee0e2124e35d/l20n.js#L94
var templateSupported = 'content' in document.createElement('template');
It's worth noting that the l20n.js team doesn't consider IE to be supported.
I can't have the player working on IE8 with win xp (works well on IE8 with win 7)
I have two "source" tag with one ogv file and one mp4 file.
The player tags are added to the dom with ajax.
Then, the video-js player is loaded with "_V_("videoID", ..."
As said before, it works well with newer configurations, so the code is right.
If the player tags are not added to the dom with ajax, it works well. But in my case, I need to add them this way.
What I see when I load the page is that the player is there, the big play button is there. When I click play, I get the beginning of the video then it stops. Furthermore, the video is not in the good resolution, it's smaller and in the top left corner!
See picture (black is the player, and the white square is the badly shrinked video ):
In addition to that, I have a javascript error on line 1191 :
(I tried to comment out the line just to see what happens but no change)
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
Using : Version 3.2.0
Thanks for any help
PS: sound can be heard but it's all jerky and CPU hits 100% when playing
Found the bug!
I used the "seekIntro" function when the video is loaded.
When I remove the ".addEvent" line it works fine!
_V_("videoTag-<%=luo_Video.getId()%>").ready(function(){
myPlayer = this;
myPlayer.addEvent("loadeddata", seekIntro);
});
function seekIntro(){
myPlayer.currentTime(4);
}
Using IE everything goes well (i got a mp4 video with priority execution setted on flash). when i try to view my video on chrome all seem to be good too, but in few seconds (not always but often) videojs crashes.
This is the log:
error:MediaError
code:3
What should i do?
According to HTML5 spec error code MEDIA_ERR_DECODE = 3 means that video was failed to be decoded. Chrome could reach broken frame e.g. video was encoded incorrectly.
In my experience HTML5 video decoding has poor support when it comes to error handling. Flash is more bullet-proof here. I got an example when Chrome (HTML5) failed to play video but it was playing fine in FF (flash). Converting to different pixel map (yuvj420p -> yuv420p) resolved my issue.
It means that first you should try encoding video with different options. As an option you can use ffmpeg
I'm having a problem with layout in Safari that works fine in Chrome and FF. It seems that Safari includes the padding within the width while Chrome and FF don't. So what's 630px in FF
due to width + padding is only 600px in Safari. This: Padding in mozilla firefox and in safari seems to show that the box model is different in Safari. If so I would expect a standard solution would already have come up but when I google this, it seems that hardly anyone has this problem.
Is the box model in Safari really different and is there a standard solution? Or do I just have to 'debug' my CSS?
EDIT: apparently it's because the div was using display: table. When I changed it to display: block, it worked as expected. It's still strange though because it's working fine in other browsers (display: table).
Which doctype are you using? When I use < !DOCTYPE html > (the HTML5 doctype declaration) Safari and Chrome's padding behaviour is definitely exactly the same, and as the standards dictate.
In CSS box-sizing handles the box model. By default it's set to the 'normal' but probably incorrect 'content-box'. Support for box-sizing is reasonable across browsers now so you can probably move to 'border-box' but will need to handle it differently in IE6/7 (if you support them).
AFAIK Safari (webkit) should respect this.