I haven't done much debugging on ios safari and I am having a strange issue. I need to play HTML5 video from vimeo. The embed code works as expected. If flash player is not detected then HTML5 video is presented to the user.
On desktop all browsers I turn of flash and works fine. On ios using ipad simulator portrait mode in safari the video plays but once I turn it to landscape and load the page and try to click the video to play nothing happens.
If you go to http://tennlife.com:82/drupal/projects/millcitymuseum and navigate to the 3rd slide on the page you can see what I mean.
What is the best way to debug this type of thing in the simulator if any.
Has anyone run into this type of issue and do you have any suggestions on a solution?
You can turn on the Debugging console in iPad and iPhone - http://maisonbisson.com/blog/post/14447/step-by-step-turn-on-the-iphone-ipads-web-debugging-console/
Also you can use Firebug Lite to inspect the DOM http://getfirebug.com/firebuglite
Related
I noticed the 360 Image Gallery example on the Aframe.io website is broken so I have been trying to fix it.
I've got it to work on Desktop and 2D mobile browser, but when I switch to VR mode in my mobile (iPhone) browser, there is no cursor and I can't change scenes anymore.
What am I missing?
https://glitch.com/edit/#!/bubble-glitter-specialist
Thank you!
Something change in Safari iOS 13.4.1 that broke VR mode. More info at https://github.com/aframevr/aframe/issues/4554
When I run it in desktop its okay , but when I do inspect element and change to mobile view it doesn't work the autoplay.
iframe src="https://www.youtube.com/embed/vsSQEUSQkIs?autoplay=1" allow='autoplay'>
That is the iframe Im using putting ?autoplay=1 makes it work autoplay to desktop, but not working on mobile.
What about your experience with actual Phones?
In my experience autoplay doesn't work with iOS Safari, however Chrome on an Android phone does seem to work.
I think Safari has some inbuilt prevention for videos autoplaying.
Mobile browsers have been making it harder for videos to autoplay on mobile, to prevent involuntary data use. It's most of two years since the question was asked but it was true even then.
The YouTube Iframe API documentation says:
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
A simple one - here is my site - http://michaelmedvedskiy.website
I'm loading it through the same wifi network, in my pc browser the background video loads fine - pc fullscreen perspective
And if i stretch the screen down to the mobile's perspective it works fine as well - pc stretched perspective
But on my mobile device (Sony Experia X5) it just doesn't load - mobile perspective
Why so?
Hopefully, I wrote the question properly, if I didn't, please remark my flaws, I will correct them.
Background videos are not auto playing on mobile devices. It's default setting. You may try to play manually using player API
I am using ✕ on my close button. In my chrome pc it displays the size that I wanted (font-size:20px) see the image below
However in my mobile I also use chrome but the size is smaller even they are the same page and I also check the view in desktop site but still the size is small see the image below
Js fiddle example https://jsfiddle.net/reginaldt/cag7870j/
codepen link: http://codepen.io/reginaldt/pen/yaJqyo
Any reason for this? Thanks.
UPDATE: I used samsung galaxy core prime on the mobile view to replicate the problem. But when I used samsung galaxy s6, it display the size properly.
How to test website compatibility for iPAD without having iPAD , in both condition Portrait and landscape?
on Windows PC
also, there is another web-site: http://ipadpeek.com/
but, if you have a special css file for ipad, this site cannot show it. you should change your main css file with ipad specific one...
also, you can rotate your ipad in ipadpeek.com
edit: there is an app for looking your layout on ios device here.
You'll probably have to use a windows browser to fake the browser-agent header. This page gives more information as well as the browser agent string.
You could use Chris Pederick's User Agent Switcher in Firefox, but you won't get webkit rendering. The best option is probably to use the developer tools in Safari and change the browser agent in the Develop menu.
You should also make sure your screen size matches the iPad (1024x768 if I'm not mistaken). To test landscape, just change the screen size.
What you won't get is multitouch and gesture testing...
What are you actually trying to test? If it's just a website, that should be sufficient.