Search code examples
iosextjsvideosencha-touch-2sencha-architect

Prevent native video player in sencha touch 2


I'm building an app for iOS and android using sencha touch 2.3.1 (using sencha architect 3 as my IDE if that's useful to know) and I want to be able to play video inline, as opposed to an embedded video that opens up the native video player after the user taps on it. A perfect example of the functionality I'm after would be the Vine app (at least for iOS, I haven't looked at it on android), videos simply play right there on the page without the native iOS video player taking over.

I'm aware of the allowsInlineMediaPlayback property of UIWebView, but I have no clue how to set that, or even whether I can, since I'm not building a native app in xcode (in fact I have no experience doing so, this is my first attempt at building any sort of mobile application).


Solution

  • I managed to get this working by installing cordova on my machine, then running the

    sencha cordova init

    command on my sencha project folder. After that I simply made sure allowsInlineMediaPlayback was set in my cordova config and that my video tag/object in Architect had the webkit-playsinline attribute set to "1".

    If you're interested I am still able to continue my normal development and build workflow in Architect (Architect is now compatible with Cordova, though make sure you add

    { "path": "cordova.js", "remote": true }

    to your app.json manually. Note you only need that entry in the js section of your app.json and DO NOT NEED THE ACTUAL CORDOVA.JS FILE TO BE IN YOUR PROJECT FOLDER, Architect will handle this when you run your build command).