Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

HTML 5 Video not playing in a WebView on Android

$
0
0

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


Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>