I am just starting development on a JQuery Slider that will start with a video, and when the video is done the slider will begin. I'd like for the site to be able to work on both IE9 and lower, and the iPhone, which I assume will require an HTML5 option and a Flash option. I would like the slider to look like this:
http://popstache.com/
with a minimal UI, just the arrows and circles on the bottom allowing for slide selection.
I have been playing with Slidedeck at http://www.slidedeck.com/, and I know that videos can be embedded in it. My main concern right now is the video. I've heard about people using Flowplayer, but I'd rather not pay the $95 to remove the branding, and I do not believe that will work on the iPhone. Any suggestions? Thank you.
MediaFront's OSM Player is completely free.
So is jPlayer.
Related
I have a video element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).
Is this seriously not standard functionality?
I’ve added fullscreen to the video and source tags and even fullscreen="fullscreen" for good measure. The controls tag is working (I see the controls after all).
iOS’ controls are visually different and include the full screen button.
I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!
I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.
I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.
Thank you in advance for your help / downvotes. :)
I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.
My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.
The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.
Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).
I figured this out, it was at least half stupidity.
Heading
I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.
No Metadata
The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.
Does the fullscreen toggle button show up when you start playing the video?
According to Apple's documentation:
The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.
It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.
When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.
EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.
The new FB paper app website has html5 videos when seen from a non-mobile device.
A video like effect is achieved on the mobile website (tried on iOS browsers) using some kind of weird sprites.
Does anybody know how to implement that?
I think that used a method originally used by Apple.
Take a look at this
I'm working on an animation using CreateJS and spritesheet, but I don't understand why that don't work with iPad.
That works fine with Chrome browser.
The CreateJS framework should work with iOS.
You can find my code here:
Link no more available
Do you have any idea?
Otherwise, do you have any other solution to create HTML5 animation for iPad from the web?
In addition, I need to add sound to this animation with synchronization with the animation, so the animation must not lag, I need perfect performances.
Thanks.
Sorry, my first answer was not helpful. I took a deeper look here, and the issue is probably because of the size of the PNG. Your PNG is currently 4096x2048, which is double the acceptable size for iOS.
Ensure your images are less than 2048x2048 - you can use Zoë to export them from Flash, which will give you multiple images.
http://createjs.com/zoe
Cheers.
Is that no way to do it? I have a site want to build to using video for background, iPad runs perfect but iPhone's not.
Then I found out the problem is iPhone safari handle the inline html5 video by default full screen, some people said it could override by html5 settings with webkit-playsinline option, but I tried and no effect on the problem.
And I also found this link:
HTML5 video player behavior on iPhone and iPod in Safari Web Apps
The answer said the behivaor cannot be change even using the webkit-playsinline on it.
It that true? And if yes, are there any way to do the inline video in iPhone?
Thanks!
With iPad you can disable inlineMediaPlaybackRequiresUserInput in Objective-C for a web view.
On iPhone, Apple doesn't allow this option at all, so your at a loss on iPhone.
A workaround is a bit old-school, but you could use an Animated gif.
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
I wrote a module that takes care of playing the video and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video
Keep in mind that this still needs a "touch" to start, so it won't autoplay like on desktop.
I have a page with a tutorial (http://www.poromenos.org/tutorials/bittorrent/download), but the site layout obscures the flash player, which is too wide. Is there a way to show the flash above the content through the z-order (or something else, lightbox-y)?
You could place IFrame with player- it would be above all page content
I would definitely suggest using a lightbox instead. If you just tried to push it up in the z-index you'll cover navigation which is going to cause you usability issues. I'm a big fan of FancyBox - it's pretty quick-n-easy and it uses jQuery which you are already using. Looking at the download page you can see the details on Inline Content with a Flash example.
Lightbox is a good way. Or you can just add link to the video or optimize player's size.