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.
Related
I load a UIWebView with an html script that contains embeeded video (almost all from youtube). Reproducing videos was working ok. But since this was tested on iOS 10 the full screen takes all the screen but the video itself dont increase nothing, just only center and dont change size. But if i try with iOS 9 or 8 the full screen resize the video to fit all the screen
I think iOS has implemented new rules about the default video player on webview, or something is missing on the html script. I was trying to add tags like on the script and css rules, but nothing yet. Thanks.
if on iOS 10，use wkwebview，otherwise uiwebview，if else solve it
Sorry for the badly worded title, it's hard to summarise this.
I've got a fixed header at the top of my website, and then I've got some videos that are iFramed in (from Vine and YouTube mostly). My problem is that even though the header is fixed, with a higher z-index, and it's APPEARING higher than the video iFrames, it's not behaving that way. This seems to be due to the iOS Video frame, or whatever you want to call it.
I've put this mock together to show you what I mean:
https://dl.dropboxusercontent.com/u/324723/Web/vid_iframe_fixed_issue.html
Expected behaviour is - Scroll down, then tap on the header while it's overlapping some text. The header text has an anchor hover tag, so it'll turn black. This is what should happen.
Refresh, then scroll the page down until the header overlaps the first video (Vine), then try and click on the header, over where the video should be (say the letter "A"), it'll load up the video.
Refresh, then scroll down the page until the header overlaps the second video (YouTube), and try again: it'll work properly, because YouTube has a splash screen. However, if you then load the YouTube video, click 'Done' to get out of the video, and repeat this process, you'll have the same issue as with the Vine video, because the splash screen is gone and the iOS Video frame has replaced it. Vine has no splash screen, so this issue is apparent immediately.
Why is it displaying the header above the videos, but still prioritising the video on tap? This is only an issue with iOS, Android seems fine. Am I doing something wrong, or is this an inherent issue with iOS?
edit: This is an issue on other sites too (see Mashable or Instagram). I'm not so sure there's a way around this.
I'm working on a WebApp that is supposed to run mostly on iPads. The App plays several videos and has some interactive components as well.
My problem is cosmetic: even though the HTML5 Video Tag works fine, the custom controls that I've created control the video/audio playback just fine, for the life of me I can't figure out how to make the black bars on the side of the video disappear.
The embedding is completely standard:
<video id="video" src="./video/video.mp4" width="1024"></video>
I just want the damn video to be exactly as wide as the iPad screen, but no matter what size I specify, there are always black bars on the side. The only workaround i found is to oversize the video and then give it a negative margin so it'd center, but surely there must be a better solution... Especially because the width of the black unwanted "margin" isn't constant and changes according to the specified width of the video. Has anyone had the same problem before? Any idea or help will be greatly appreciated. Thank you all.
Thanks for the input. It turned out that I had to specify the height for the video element as well, for some reason Safari on the iPad doesn't scale the video and the controls properly; as soon as I explicitly specified the pixel equivalent of 16:9 within the actual video tag,
in the HTML file, the bar disappeared.
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.
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.