Hi,
I've built a mobile app targeting iOS and Android. Its a very simple HTML 5 based app that incorporates video. It works fine on iOS and in a browser testing it but on android (tested on a 2.3 device and the latest release on a Samsung 4) the player loads but the video does not seem to load or play. Just get controls. I've searched the internet for hours trying to find a solution but can't find anything that works.
I'm fairly sure its not the encode but basing that on the fact that I pulled an example mp4 encode taken from and android example. Tried MP4's and M4V containers. They both work in the native browser when testing on the Android device.
SDK: 3.1.2.GA Android: 2.3+ OSX: 10.8.4 Titanium Studio, build: 3.1.2.201308091617
Code sample:
HTML
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset="> <title></title> </head> <body> <video id="video" autobuffer controls height="240" width="360"> <source src="test.m4v"> </video> <div id="msg"></div> <script type="text/javascript"> // array of the events we want to track var events=new Array("abort","canplay","canplaythrough","durationchange","emptied","ended","error","loadeddata","loadedmetadata","loadstart","pause","play","playing","progress","ratechange","seeked","seeking","stalled","suspend","timeupdate","volumechange","waiting"); var vid=document.getElementById('video'); var msg = document.getElementById('msg'); // add event listeners to the video for (var i in events) { vid.addEventListener(events[i], showEvent, false); } function showEvent(e) { var addMsg = ""; if (e.type == "durationchange") { addMsg = e.type + "[" + vid.duration + "]"; } else if (e.type == "seeked") { addMsg = e.type + "[" + vid.currentTime + "]"; } else if (e.type == "timeupdate") { // do nothing as there are a lot of these } else if (e.type == "volumechange") { addMsg = "volume " + (vid.muted ? "muted" : vid.volume); } else { addMsg = e.type; } if (addMsg != "") { msg.innerHTML = addMsg + ((msg.innerHTML == "") ? "":", ") + msg.innerHTML; } } </script> </body> </html>ApplicationWindow.js
// Application Window Component Constructor function ApplicationWindow() { // If you don't want margins around the Translucent or Web View you can set the gutter to zero. var gutter = Ti.Platform.displayCaps.platformWidth * 0.025; // The translucent view is a stylish rounded rect behind the web view. var translucentViewOn = true; // If you want the translucent view or the web view to fade in slowly, set this to true. var animationsOn = true; // If you don't want a navBar with the corresponding back button you can set this to false. // If so, this requires you to have a back button in your HTML on iOS. Android uses standard hardware back button. var titleBarOn = true; // Set the background color appropriately. var backgroundColor = '#f1e9cf'; // Popup menu/drawer for forward/back. Without this cross-file links will have no way of getting back to the // calling file without a UI in the HTML proper. var drawerOn = true; var osname = Ti.Platform.osname; // Create our main window var self = Ti.UI.createWindow({ // If no image desired, you can remove this line and set the backgroundColor instead. backgroundImage : '/images/background.png', navBarHidden : !titleBarOn, // iOS only // barColor : barColor, modal : true, exitOnClose : true // Android only }); if (translucentViewOn) { // Nice translucent rounded rect in the background. var translucentView = Ti.UI.createView({ left : gutter, top : gutter, right : gutter, bottom : gutter, borderRadius : 5, borderWidth : 1, borderColor : backgroundColor, backgroundColor : backgroundColor, opacity : animationsOn ? 0 : 0.75 }); self.add(translucentView); if (animationsOn) { setTimeout(function() { translucentView.animate(Ti.UI.createAnimation({ opacity : 0.75, duration : 2000 })); }, 1); } gutter = gutter * 2; } // Create a WebView, this will host the HTML var webView = Ti.UI.createWebView({ left : gutter, top : gutter, right : gutter, bottom : gutter, // This allows the translucent view and the background to shine through. You could set this to a standard RGB color and change the opacity if desired. backgroundColor : translucentViewOn ? 'transparent' : backgroundColor, opacity : animationsOn ? 0 : 1, enableZoomControls : false, // Android only pluginState:Ti.UI.Android.WEBVIEW_PLUGINS_ON_DEMAND, // Default assumes that all HTML is in the HTML folder and the first file is index.html, you can change the next line to suit your HTML. url : '/HTML/index.html' }); self.add(webView); if (animationsOn) { setTimeout(function() { webView.animate(Ti.UI.createAnimation({ opacity : 1, duration : 2000 })); }, 1); } // Load the platform specific UI. var ApplicationWindowPlatform; if (Ti.Platform.osname == 'mobileweb') { // Work around missing platform-specific require feature in Mobile Web. ApplicationWindowPlatform = require('mobileweb/ui/ApplicationWindowPlatform'); } else { ApplicationWindowPlatform = require('ui/ApplicationWindowPlatform'); } ApplicationWindowPlatform(self, webView, titleBarOn, drawerOn); return self; } //make constructor function the public component interface module.exports = ApplicationWindow;tiapp.xml
<?xml version="1.0" encoding="UTF-8"?><ti:app xmlns:ti="http://ti.appcelerator.org"> <id>XXXXXXX.androidvideotest</id> <name>androidvideotest</name> <version>1.0</version> <publisher>Jme</publisher> <url>XXXXXXXXX</url> <description>not specified</description> <copyright>2013 by Jme</copyright> <icon>appicon.png</icon> <persistent-wifi>false</persistent-wifi> <prerendered-icon>false</prerendered-icon> <statusbar-style>default</statusbar-style> <statusbar-hidden>false</statusbar-hidden> <fullscreen>false</fullscreen> <navbar-hidden>false</navbar-hidden> <analytics>true</analytics> <guid>333f6df9-c99b-4bbf-bc69-9eb57da30e01</guid> <property name="ti.ui.defaultunit" type="string">system</property> <iphone> <orientations device="iphone"> <orientation>Ti.UI.PORTRAIT</orientation> </orientations> <orientations device="ipad"> <orientation>Ti.UI.PORTRAIT</orientation> <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation> <orientation>Ti.UI.LANDSCAPE_LEFT</orientation> <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation> </orientations> </iphone> <android xmlns:android="http://schemas.android.com/apk/res/android"> <manifest> <supports-screens android:anyDensity="true"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_GPS"/> <uses-permission android:name="android.permission.ACCESS_ASSISTED_GPS"/> <uses-permission android:name="android.permission.ACCESS_LOCATION"/> <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17"/> <application android:allowBackup="true" android:configChanges="orientation" android:hardwareAccelerated="true"> </application> </manifest> </android> <mobileweb> <precache/> <splash> <enabled>true</enabled> <inline-css-images>true</inline-css-images> </splash> <theme>default</theme> </mobileweb> <modules/> <deployment-targets> <target device="android">true</target> <target device="blackberry">false</target> <target device="ipad">false</target> <target device="iphone">true</target> <target device="mobileweb">false</target> <target device="tizen">false</target> </deployment-targets> <sdk-version>3.1.2.GA</sdk-version> <property name="ti.deploytype">test</property></ti:app>Has anyone else successfully got video working in HTML on Android using Titanium?
Thanks, Jamie