i'm still working on my html5 videoplayer w/ flashplayer fallback. it is now part of a bigger kind of widget, that encapsulates tabs, sliders, carousels (extensively using jquery)
focussing on the videoplayer: the user can (repeatedly) pick videos to play from a carousel . once a carousel item is clicked, i put a div w/ a fitting background-image over my videoplayer, so as to have a splashimage working the same for every client. that 'selfmade splashimage' and the current frontitem of the carousel (which was just clicked) then are bound to the load() method of the video. obviously there's a lot of stuff happening in between: i check for support of <video> and support of formats (mp4, ogv). i also fade in and out a bunch of stuff. that was a short version of it. and it's all working pretty okay on all the browsers i tested. it IS somewhat working on the ipad as well BUT:::
when i click my splashimage/playbutton ( -> triggering the load() method) the ipad wont play nor load my video RIGHT AWAY. the videoplayer stays black. however, when i click (trigger load()) a few more times, at some point it will start to work as planned.
the ipad works fine on the w3 html5 video events page. so i copied that page for my purpose, replaced a video with one of my videos and it gives me the FAULTY behaviour. so the problem are my videos, aren't they? the videos are currently hosted on a non-streaming server, is that the problem? my knowledge on that subject is really narrow.
sorry for not including any code and talking very general and abstract about the whole thing but i hope it suffices.
EDIT::: problem (kind of) solved. apparently the server the videos were hosted on, was causing the problems -_-
Could it have something to do with this: how to get your HTML5 MP4 video file to play before being fully downloaded as it could be downloading the video, hence the wait.
Related
I'm experiencing an issue on iOS10 (Safari only, Chrome is perfect) which is being caused by a Vimeo embed which plays in fullscreen natively on iOS. The video plays perfectly, however when I click "Done" and the video closes it affects the positioning of the sections (website uses fullPage.js). Please see the URL below:
http://rorymstaging.wpengine.com/stack/#thestoryof2016
This doesn't seem to happen every time, but if you play the video and close it a few times you should see that the positioning is affected. The screenshot below shows the issue, obviously I'd love the video to return to the center of the screen when not being viewed:
I've tried inspecting the code to see how the positioning is being affected and have tried a few CSS only fixes but nothing seems to correct the bug. Any help would be greatly appreciated...
Lewis.
I'm hoping it's possible to make interactive presentations that play sounds on certain user events using the canvas, and have it work properly and load on iOS, either as a mobile site, phonegap type thing, or wrapped webview. I know html5 and video is a total dead end on iOS (stupid) because of the no-autoplay and no gobble all clicks issue. If I'm not using video but just moving pictures around (think "Ken Burns effect" with buttons too), and I want some short audio clips to play when a button is clicked, is this going to work on iOS or are there crazy no-autoplay-no-preload restrictions that prevent that too? Any pointers to working examples would be fine too, the signal-to-noise ratio on searching this question is abysmal. ;-)
For playing audio on iOS and android you have to use html5 audio tag .
<audio controls>
<source src="yourFile.mp3" type="audio/mp3">
</audio>
this comes with inbuilt control . If you want custom look and fill then there are some libraries in jquery ,you can use that .
So I have used java to load only a thumbnail of a youtube video. When the thumb is clicked, the image div is replaced completely with an embed of the video on "autoplay." Everything was working as I wanted BUT
On YouTube when I look at the Analytics/traffic sources the "Unknown — embedded player" views dropped 90%+ to almost nothing as seen on the picture at the above URL. This is apparently because "autoplay" views are not recognized by YouTube as legitimate views which i confirmed on stackoverflow and elsewhere.
So... I want the best of both worlds. I want the fast load speed that comes with loading only the thumb at first AND I want to avoid autoplay so the views actually count on YouTube when the thumb is clicked. My temporary solution is to set autoplay=0 which forces the user to essentially click the same thumb twice, though I would prefer to avoid the redundant click.
Here is a example page from my site that has 4 embedded videos.
Use waiting/loading image instead of video thumbnail. Then use jquery to replace that waiting image by youtube embeded code few seconds after page loaded.
I've been working on an iPad-specific site that uses HTML5 video and though I've got video playback working, I can't for the life of me get the poster image to appear. It looks fine on Desktop Safari. Here's the code:
<video src="video/about_the_man.mp4" controls height=360 width=480 poster="video/posters/about_the_man.jpg"></video>
I've using this link as a reference (listing 1.2): https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6
It says that on iOS the poster image will be shown until the user initiates playback, but right now all I'm getting is a black video-sized screen with a big play button in the center. I've looked at other postings on this top (here and here) but neither solution has worked for me. The only thing that's a little bit unconventional about the site is that the video element is in an inline lightbox, so initially on pageload it's not visible, but I don't know why that would make a difference.
I had the exact same problem. I decided to try my code on other iPad's, and it worked fine. The poster image showed up.
After scratching my head for a bit, the solution was to hard reset the iPad and try again. After a reboot, my iPad displayed the poster image as it should.
Maybe it will work for you?
I found there is a limit to the amount of images you can load on an iPad
Here is what it says:
I hit a mobile Safari limitation recently when building an AJAX-y site
on the iPad. If you load a ton of images eventually mobile Safari cuts
you off and will display a [?] instead of the image. After doing some
tests it appears that this limit is around 6.5 MB. Here’s a test page
I made that attempts to load 20 500kb images. When opening this page
on an iPad, 7 of the images don’t appear, even though in Charles they
are returning 200 – success. I’m assuming this is similar to the way
autoplay is disabled for the video tag on iPad/iPhone. Apple probably
wants to make sure users don’t get overloaded with downloads when
browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation.
Here’s another test page using the canvas tag, all the images should load.
I am using HTML5 video tags in a UIWebview on the iPad, and positioning them as needed using CSS. The key part of these videos is that they are designed to take up part, but not all, of the visible area on the page. When I'm doing this in the "normal" mode of displaying content only to the primary UIScreen, everything works great.
However, when an external VGA projector is hooked up as a second UIScreen, the video tag content immediately becomes FULL SCREEN. This seems to also happen in Safari when looking at, for example, YouTube videos. In searching the docs, there seems to be no way to stop / control this behavior.
Is there any way to stop a video tag from forcing its content to go to full screen when a second display is connected?
Unfortunately, using a UIWebView iOS 3.2 doesn't offer any way to do this. Video in a UIWebView always plays fullscreen on an external display using the TV out feature.
However, the good news is that iOS 4 does offer a solution. UIWebView has a couple of new properties:
allowsInlineMediaPlayback
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW32
mediaPlaybackRequiresUserAction
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW33
The former will allow the videos to remain 'inline' as opposed to using the full-screen player.