Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-24209

Android: <WebView> with link to video does not play after upgrade to TiSDK 6.0.0 (Regression)

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: Release 6.0.1
    • Component/s: Android
    • Environment:
    • Story Points:
      5
    • Sprint:
      2016 Sprint 25 SDK

      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

        Attachments

          Activity

            People

            • Assignee:
              gmathews Gary Mathews
              Reporter:
              jda John Dalsgaard
              Reviewer:
              Frankie Merzadyan (Inactive)
              Tester:
              Josh Longton
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-10334
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code