[TIMOB-24209] Android: <WebView> with link to video does not play after upgrade to TiSDK 6.0.0 (Regression)

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2017-01-20T17:32:53.000+0000
Affected Version/s	n/a
Fix Version/s	Release 6.0.1
Components	Android
Labels	Alloy, WebView, android, qe-6.0.1
Reporter	John Dalsgaard
Assignee	Gary Mathews
Created	2016-12-11T17:56:16.000+0000
Updated	2017-01-20T17:33:03.000+0000

Description

After upgrading to TiSDK 6.0.0 videos in a webview did not show any more. I have discussed the matter with Hans and have created this ticket with the findings. My original code looks like this: *video.xml*

<Alloy>
    <View class="formRow" id="row">
        <Label id="title"></Label>
        <WebView id="player"></WebView>
    </View>
</Alloy>

*video.js*

var args = arguments[0] || {};
const html="<html><body><iframe src='{1}' width='320' height='240' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></body></html>";

if(args.title && args.url){
	$.title.text = args.title;
	$.player.html = require('utils/util').format(html, args.url);
}

where the _format(..)_ method in _utils/util_ is a simple method:

function format(pattern, a1, a2, a3, a4, a5){
	// Replace 'place holders' like {1} with a1 etc.
	if(pattern){
		return pattern.replace('{1}',a1 || '').replace('{2}',a2 || '').replace('{3}',a3 || '').replace('{4}',a4 || '').replace('{5}',a5 || '');
	}
	return '';
}

.... and I call the _video_ controller like this: *videos.js*

var videos = [];
videos.push({title:'Introduktion til menu-funktionen', url:'https://player.vimeo.com/video/151036965'});
videos.push({title:'Sådan registrerer du en fisketur mens du fisker', url:'https://player.vimeo.com/video/151039720'});
videos.push({title:'Sådan indtaster du en overstået fisketur', url:'https://player.vimeo.com/video/151040599'});
videos.push({title:'Sådan får du overblik over dine fisketure og fangster via "Min side"', url:'https://player.vimeo.com/video/151041650'});
videos.push({title:'Sådan får du overblik over egne fisketure, fangster og statistik', url:'https://player.vimeo.com/video/151042851'});
videos.push({title:'Sådan redigerer du en fangst - hemmelig, pral og facebook', url:'https://player.vimeo.com/video/151043670'});
videos.push({title:'Find fredningsbælterne', url:'https://player.vimeo.com/video/194496467'});

setTimeout(function(){
	_.each(videos, function(v){
	    $.videoList.add(Alloy.createController('video', v).getView());
	});
}, 200);

... where videoList is inside a scrollview like this: *videos.xml*

<Alloy>
    <View id="mainView">
        <Require src="topbar" id="label_title"></Require>
        <ScrollView id="form">
            <View class="formRow">
                <Label id="label_videos" />
            </View>
            <View class="formRow">
                <Label id="label_videos_guide" />
            </View>
            <View class="separatorRow" top="20">
                <View class="separatorTopBorder"/>
            </View>
            <View id="videoList"></View>
            <View class="separatorRow" top="20">
                <View class="separatorTopBorder"/>
            </View>
            <View class="formRowFiller"></View>
         </ScrollView>
    </View>
</Alloy>

That all worked fine up to TiSDK 5.5 - but upgrading to TiSDK 6.0.0 broke it. It still worked on iOS but on Android the webview was simply not loaded. The title was visible - but nothing after that (per video). After the discussion with Hans I first tried to do the webview in js-only code. That worked for Android - but for iOS I could not start the video. I tried to set the zIndex to 1000 and set touchEnabled to true (though it is default) on the webview - but still couldn't start the video by pressing on the "play" button. Nothing happened. So I ended up implementing the previous model for iOS and the js-only for Android. Like this: *video.js*

var args = arguments[0] || {};
const html="<html><body><iframe src='{1}' width='320' height='240' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></body></html>";

if(args.title && args.url){
	$.title.text = args.title;
	// APP.log.trace("Adding video: " + args.title);
	if(OS_ANDROID){
		var webView = Ti.UI.createWebView({
		    html: require('utils/util').format(html,args.url),
		    height:Ti.UI.SIZE,
		    backgroundColor:'transparent'
		});
		$.row.add(webView);
	}else{
		$.player.html = require('utils/util').format(html, args.url);
	}
}

*video.xml*

<Alloy>
    <View class="formRow" id="row">
    	<Label id="title"></Label>
        <WebView id="player" platform="ios"></WebView>
    </View>
</Alloy>

And that seems to work as expected :-)

Comments

Hans Knöchel 2016-12-11

As a side-note, I feel like this could be related to TIMOB-24208 (Android / WebView / Alloy / 6.0.0 regression).
John Dalsgaard 2016-12-12

Another observation: On Android 4.4.2 (device - a Samsung Galaxy S3 Neo) the video does not start on first press on the play button. I need to pause it and then press the start button again - and then it plays.... This is also new behaviour.
Gary Mathews 2016-12-13

master: https://github.com/appcelerator/titanium_mobile/pull/8681 6_0_X: https://github.com/appcelerator/titanium_mobile/pull/8682
Josh Longton 2016-12-15

Verified as fixed, A webview with a video link now plays correctly. Tested on: {noformat} macOS Sierra 10.12.1 Nexus 5X (6.0.1) Nexus 6p (7.0) android emulator (4.4.2, 6.0) Ti SDK: 6.0.1.v20161214184817 Appc NPM: 4.2.8 App CLI: 6.0.0 Node v4.6.0 {noformat} *Closing Ticket.*
Eric Merriman 2017-01-20

Reopening to add version and to allow back port.
Eric Merriman 2017-01-20

Reopened in error, closing.

JSON Source