VideoJS Flash fallback not working at all - html5-video

I'm relatively new to VideoJS; I've used it successfully in all browsers EXCEPT ie < 9. I've seen a few threads started and kind of answered RE the Flash fallback for IE 8 and earlier.
My issue is that I can't get the Flash fallback working at all. I'm using the CDN version of VideoJS and assuming that I don't need to upload anything or make any other changes to my code other than what is outlined on the VideoJS demo page.
In IE 7 and 8 I get nothing. I don't get a SWF dynamically embedded; when I check my log and do some debugging via the console I can still see the tag; I am assuming that I should be seeing a dynamically generated and embedded .swf file for the fallback.
I've seen in a couple of threads that the latest release of VideoJS is broken / Flash fallback is not working. I've also tried a few of the workarounds outlined on the various boards - nothing at all is working for me.
Is anyone else having this issue / have you managed to resolve it? the v("path_to_swf") fix is not working... absolute paths are not working... preload="none" is not working...
Any help is greatly appreciated!
Thanks!

Without sample code, I have no idea if this will help, but IE will not initialise embedded Flash objects that have the style: visibility: hidden; (including any parents of that object). You can probably see the Flash object be requested by looking at the network traffic, but it won't fire any of the Video.js events until visibility is set to visible.
IE9 will use the HTML5 player, and IE7/8 will fallback to the Flash player (which is why the problem can't be observed in IE9, unless the techOrder has been changed to list flash first).

Related

Vimeo autoplay not working Safari 11

I've loaded this embed code to our website on the homepage.
https://player.vimeo.com/video/254985863?autoplay=1&loop=1&autopause=0&background=1" width="1903" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
You can see the site here
The video autoplays perfectly everywhere except Safari. In Safari it just loads the cover image. I am guessing that safari 11 thinks the video has sound but it doesn't. Is there a setting to show safari that this is a muted video?
I believe this is a very recent Safari bug, possibly in 11.0.3 or 11.0.2. I've just reported this to Apple, please do the same so that they get on it: https://www.apple.com/feedback/safari.html
It's definitely treating the video as if it has sound - if you set the 'Settings for this website' to 'allow all autoplay' then it will work - which is useless because the default is 'Stop Media with sound'
We were experiencing the same issue with Safari (only) for background video and I have been paying close attention to this thread since it was raised back in February (I did report the issue to Apple as suggested) but upon checking the live site again today this is now working correctly once again.
Neither the Vimeo videos or website code has been changed but the videos are now playing in Safari as expected (previously it was displaying a static image only). I am still running the same version of Safari as I was before, when this was an issue (11.0.3), so I can only assume that something has changed on the Vimeo embed side of things. Perhaps they have updated the mute code.
It is now working correctly again, but I can find no mention of anything changing on the Vimeo side.
on https://www.apple.com/safari/
"Stop auto-play videos.
Safari prevents unexpected and unwanted videos with audio from automatically playing while you browse. Just click the play button if you want to view them. Have a favorite site where you always want videos to play? Use per‑site settings in Safari to enable media auto-play."

l20n: Why does IE fail to render HTML tags that translation string contains?

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.

YouTube iFrame API quality parameter "vq" bug - video playback with black screen

There seems to be a huge issue with the iframe url parameter "vq" (in this case "vq=hd720").
If you use this paraneter, the video screen in the flash player turns black.
This example URL worked until today:
http://www.youtube.com/embed/dFVDJlM6zLY?vq=hd720
(feel free to replace the example YouTube ID)
Now, this example works only without the "vq" parameter (vq=hd720):
http://www.youtube.com/embed/dFVDJlM6zLY
The problem is, that we delivered this YouTube iframe in a lot of websites for a lot of clients and it worked quite well for month (years?). Now every single site has black youtube videos!!!
Does anyone know if this parameter was depricated?
Was there a new YouTube API release today?
The parameter was already discussed and recommended in diffrent forums:
e.g. Force youtube embed to start in 720p
Any ideas how to force Google (YouTube) to solve this problem?
It seems that the only way out of this (currently) is to remove the vq parameter or set it to auto. This seems like a widespread problem though, that has occurred very recently. You may wish to star this issue at google make them take notice:
https://code.google.com/p/gdata-issues/issues/detail?id=6009
I was having a similar issue but when I tried to force an embeded youtube video to play in HD at a dimension smaller than the HD resolution.
I was able to get around the "black screen" HD issue by using the old embed code.
If you set the video size to the highest resolution you can then use vq=hd720 parameter and set the video width and height to a lower resolution
<object width="1280" height="720"><param name="movie" value="//www.youtube.com/v/VIDEO_ID?hl=en_US&version=3&rel=0&vq=hd720"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/kyilUYoxcww?hl=en_US&version=3&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Hope this helps!
Just had this exact problem. Found changing it to vq=auto works in the code. But on the videos we're working with it's coming out at a slightly lower quality than we'd like.
Nevertheless, this at least removes the blackout.
What are your 3d settings set to? Here's what I've noticed...
1) Taking away the vq=hd setting works.
2) Turning the 3D setting on the video player ON (or sometimes OFF the ON again) makes the
video work.
3) Curious about number 2, I went to the video settings on the video (the admin settings) and changed the 3D settings under Advanced. I changed it from "Disable 3D for this video" to "Please make this video 3D." For some reason this works -- the vq code is back to working the way it should.
HOWEVER I don't know if I would recommend doing this! The reason I set all my videos to "Disable 3D for this video" in the first place was because if I left on on the on the default "No Preference," it often caused glitches in the video.
Has YouTube changed anything with the 3D settings recently? I think thay may have but am not certain.

idangerous swiper prevents HTML5 play button working in ie10

I have an embedded HTML5 video which works fine in all browsers (or fails gracefully, if the browser is old or lacks video support). But since my site uses iDangerous Swiper (http://www.idangero.us/sliders/swiper/api.php), the custom video controls - the 'play/pause' button - does not work in Internet Explorer 10.
If I remove the swiper js code embed from the head area of my HTML, the embedded video plays fine in ie10. The problem seems to be that Swiper is intercepting the click on the play button in ie10 - and therefore the solution seems to be to disable Swiper for at least that small area of the page.
But it's not clear how to do it.
There seems to be a very scantly documented new feature in the June 2013 Swiper release which lets one create a 'noSwiping' class, but wrapping the video in a div with this class does not solve the ie10 problem.
Has anyone else needed to disable Swiper for an element and succeeded in doing so, particularly regarding ie...? I would be very glad to see a code example. My own project is still on localhost.
All you have to do is to add the html5=1 in the src attribute of the iframe :
The video will be displayed as HTML5 if available, or fallback into flash player.
you can read this:
Force HTML5 youtube video
I had a problem with a embed video of youtube inside a dangerous swiper, but the solution of TSL works for me!
I had added the html5=1 and solve my problem!
thanks!

Video.js changing source and seeking simultaneously

I am trying to build a site using video.js to view videos. We need to switch videos while maintaining the currentTime value from the old video. The way I have it working right now is using the loadedmetadata event to set currentTime. The problem I am seeing with this is that the first frame of the video gets shown momentarily while the player seeks to the right time. I am new to JS programming so perhaps I am doing something wrong but I do not see anything in the docs that can help me overcome this. I am trying to render H.264/mp4 videos in Chrome. Thanks!
Changing the preload setting to 'metadata' might help this in the browsers that support that setting.
preload="metadata"
Then it supposedly should only load the metadata and trigger the loadedmetadata event, and not show the first frame. That is unless providing any new src forces preloading, and I'm not sure off the top of my head.
HTML5 video doesn't give us a lot of options around seamless switching videos unfortunately. The media source API proposal from Google/Microsoft/Netflix aims to fix this. http://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
You could try this:
https://bitbucket.org/felixschwarz/videojs-hdtoggle/
As seen here on the old videoJS-Forum I think you might have to declare preload="auto".
In the linked forum-threat there are also some changes I made documented.