jQuery plugins conflict - conflict

See:
http://global-arts.4pixels.co.uk/global-arts-kingston/events-detail.html
I'm using MediaElement.js for the video at the top of the page and Flexslider for the Slider at the bottom. Both play happily together in desktop browsers, but on iPad and iPhone the video doesn't load and the slider has no images.
Has anyone encountered conflicts that only happen in iOS and is there a way of isolating the two scripts from each other? Similar to noConflict for clashing libraries.
a

Related

Bad Smooth Scrolling on Vue JS 2 + A-Frame

I implemented an A-Frame animation inside a single section on a Vue Js 2 webapp project.
I also added a smooth scrolling component for the global app. My A-Frame block is set to "embedded" to not take the the full screen size.
On Development everything looks nice. When I go live my smooth scrolling is really bad espacially on mobile device. I looked to disable A-Frame on mobile device but no info on the doc, I tried to do it with css with media queries but still the same issue.
I don't know from where it comes and which part of code I have to fix. No error on the console.
Anyone met this kind of issue please?!
Thx
I've not run into this issue before, but you could try to place the aframe scene in a separate file, then use an iframe in your main page and see if it improves.

Video.js for Vimeo

I use video.js for vimeo. Played on the desktop in a custom player with my styles, it's good, but on the tablets and mobiles played in a default browse player. Why? I want custom player in mobile too. Can you help me?
In a recent version video.js was updated to use the custom skin on touch devices, so you might try updating your version. But this will still only make a difference on tablets that don't go to fullscreen video. On iOS devices and most(?) android devices, whenever the video goes to fullscreen it uses the native controls, and there's nothing we can do in the browser to change that. Hopefully in the future the devices will adopt the requestFullscreen browser API so we can use custom controls in that context.

HTML5 Video - Auto select correct resolution

I'm working on a page that has a list of houses for sale. Each listing has a short video with the option of watching in the page or full screen.
I'm struggling a little with having the videos on the page at one resolution and the fullscreen at a higher resolution - this is needed especially for devices that automatically go fullscreen when the play icon is pressed.
I've had good results with video.js (http://www.videojs.com/) for the page resolution but it doesn't appear to support resolution change on fullscreen. I found this thread with comments about the HTML spec and changing resolution mid-stream: https://github.com/videojs/video.js/pull/233.
I'm told the embedded Youtube player selects the correct resolution automatically but the branded player makes this a non-starter.
Also I've found that in IE10 without Flash that the embedded Vimeo player doesn't function and in Chrome without Flash the Vimeo and Youtube players fail as well... so much for HTML5!
So anyone have a solution for showing video at the correct resolution (low/high) for the state of the player (contained/fullscreen)?
Your question answered a query of mine. It looks like auto switching resolution is still not implemented in videoJS other than for YouTube videos. There is a demo at videoJS Resolution Switcher and you can see in the console that changing window resolution to full screen has no effect.
I've been using the JWPlayer for several years with no problems at all. It reliably supports auto switching has many features and very good support.

Will Retina.js Work Properly in iPhone UIWebView?

Building a small iPhone app in XCode and I'm trying to implement a couple images inside a UIWebView. I know the JS library Retina.js works flawlessly in most browsers but I'm not sure how it would handle in a Web View?
It's possible to just use the CSS3 media queries to handle this instead, but that's a lot of extra code. Would love to hear if anybody has experience with this.

Mimic versatile behaviour of Apple's UIWebView with Sencha Touch

Given a URL to a...
PDF, Apple's UIWebView component will display the PDF in the PDF
reader.
video, Apple's UIWebView component will display the video in
the video player.
music file, Apple's UIWebView component will play
the music in the video player.
What is the best way to mimic this functionality in Sencha Touch?
Many thanks
EDIT: Also, how do you display a website in a panel? I've tried using an embed and an iframe, but these aren't scrollable on the device.
I don't understand, this should work just like that? Are you thinking of rendering pdf/video/music inside Sencha Application?
If yes, check out Sencha examples for audio/video. For pdf you will need some new code. I would suggest using pdf.js inside Sencha panel, haven't tried it though.
This was answered in sencha touch :: how to create a panel for website-preview inside iFrame.
Anyway, if you want to get the same effect as a UIWebView in senchatouch, I recommend using PhoneGap as long as your intention is that your webapp is used only on mobile devices. PhoneGap Plugins available to use the native WebViews each mobile OS. The plugin, both for IOS to ChildrenBrowser called Android. Sorry about the other systems can not help more.
Without a lot of hacky code, you can't.