Multiple video.js players fail on flash fallback - javascript

I have the page http://video-stock.co.uk setup with 4 videos, all using video.js. It works fine with chrome etc which use the html5 implementation, but when I view in ie7/8 and the flash fallback, the big video and the first of the small videos are fine, but the other 2 small videos are black, and have no play button overlay, and are unresponsive to clicking, although a right-click does bring up the flash context menu.
I have next to no knowledge of working with flash to play videos, except the odd embed in Wordpress, and I was glad to find Video.js to sort all that out for me. All I can see in the code is that the correct video files seem to be getting sent into flash, but maybe it is because the flash player (.swf) file is being called more than once? Just a novice guess. Any help gratefully received.
Edit, for completeness I set up a test for flash on the page in chrome etc - if you go to http://video-stock.co.uk/?flashdefault you can view the page with all players in flash. It works fine on chrome, ff and even IE7+8. To get the flash default I have used:
_V_.options.techOrder = ["flash", html5, "links"];
I will change the default to that order if I receive no replies from you helpful lot.

After the edit I went to the site in IE without the flashdefault query var and all four players were working.
The only thing I changed was adding preload="auto" to the small videos, and that seems to have been the fix. Although it could have been getting the flash videos into the cache using the flashdefault that fixed it, until some new videos are added we won't find out. To Moderators, should I accept this answer now or wait till I know for sure?

Related

HTML video player in IE9 with Angular

I've been looking for to long for a HTML video player which can load stream url's via Angular, and play them on IE9 ( via flash or whatever) on Chrome, FF, Mobile, ... via HTML5
I tried:
videogular
videoJS
video-for-everyone
sublimevideo
...
and looked on way to many pages for a working sollution. But couln't find any wich worked, I know this isn't the place to ask for a resource, documentation, file, ... But after searching for this long, this is prorbably the only place someone may know what I'm looking for
But for still asking a question for the player I got the most working:
that was the configuration on this page: http://www.realeyes.com/blog/2013/02/06/cross-browser-video-players/
this plays some videos but some uploaded videos (.mp4) won't play on chrome and FF

Detect if the UIWebView can play video inline on iPhone ( allowsInlineMediaPlayback )

I am trying to tell if my video is going to play inline once the user starts the video (as apposed to fullscreen/in the native video player) on an iPhone in a UIWebView before the video has started. I have no way of knowing if the UIWebView has the setting allowsInlineMediaPlayback = YES as i do not know in what app or on what page my video is being displayed.
My goal is to only show the video if it can be played inline.
Is there any way to read the allowsInlineMediaPlayback setting from javascript, or detect if my video will play inline or not?
Everything I have read on the apple developers website seems to suggest that it will automatically play in full screen mode in safari. Now if they are using another app, as far as I know you do not have access to that apps UIWebViews properties. However, in an attempt to not be totally useless, here is a link to all of the methods you can query and you might find some useful information in there.
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html#//apple_ref/doc/uid/TP40009355-CH18-SW27
Some more information that may be useful to you.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

Fancybox jQuery media helper - player stuck on loading

So, I'm kinda new to jquery, and this is the first time I've had to deal with the issue I'm having at the moment.
I think it's an interference with Wordpress suddenly updating to 3.9 - 3.9.1 or something, though I can't specifically nail it down.
So the way this site works is that I had the boxes with the videos work like they do now, you clicked play and it would pop up in a fancybox and start playing the video.
It still does this - however, it will just show the loader, and not actually load the fancybox.
And before you ask, I could only get it working in the first place with jquery 1.11, due to various conflicts, but now it suddenly wont work at all.
http://ramborg.com/commercial <- You can see the issue here.
The videos shown are mostly Vimeo, I'm pretty sure they all are, but maybe there has been some YT also added, but that wouldn't matter, if the media helper actually worked.
Any ideas, and input would be greatly appreciated, before I just revert down to an older version of WP to make it work again.
EDIT: Appearntly the fancybox will EVENTUALLY load, it's just heavily delayed. It took like 1-2 minutes into a video before it loaded. If you goto Stills the fancybox will load almost right away (it's just an image). It's almost like it wont open the fancybox until the video is done buffering?
EDIT2: From what I can garner from console/inspect in Chrome, is that it's struggling with loading player.js from Vimeo? Is that the error the rest of you see aswell? Any way I could solve this issue?
I just checked. The videos all load promptly, and no errors in the console in chrome. Try loading the page both while logged in to wordpress and logged out to see if there is a difference.

Best method to display html5 video on IOS

I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.

Youtube/vimeo iframe won't play in firefox

I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)
I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.
I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.
I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.
Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.

Categories