[TIMOB-27347] Ti.UI.WebView not playing embed vimeo video

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	engSchedule, ios, player, vimeo, webview
Reporter	Antje Schattat
Assignee	Eric Merriman
Created	2019-07-18T15:19:15.000+0000
Updated	2019-09-10T15:42:01.000+0000

Description

I have a webview with embedded vimeo player. The video will be displayed but will not play in iOS. For Android it works without problem. Further tests have shown that it no longer works with Youtube. The integration of the player via Javascript does not play the video.

$.webview.html = "<html><head><body><iframe src=\"https://player.vimeo.com/video/ video_id \" width=\"350\" height=\"200\" frameborder=\"0\" allow=\"autoplay; fullscreen\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></body></head></html>";

I can not explain this anymore and would be grateful for a tip. regards

Comments

Joshua Quick 2019-07-18
Antje Schattat 2019-07-19

Thank you for your prompt reply. I found the cause. The window got a swipe event and after that the start of the Youtube / Vimeo video stops working. If I remove the swipe event, it works again. The problem is only with iOS, with Android, the video still works. Is there possibly a solution here, so that both works (video and swipe event)? The problem is with the integration as iFrame or directly through the URL. $.wvVideo.url = 'https://player.vimeo.com/video/' + video; $.wvVideo.setHtml(html, { baseURL: "https://player.vimeo.com" });
Joshua Quick 2019-07-19

Hmm... I know that Apple's WKWebView will navigate forward/back when you swipe it horizontally. But you would have to have navigation history for it to do that. Out of curiosity, does the iframe video work okay when building with Titanium 7.5.x? I ask because we changed iOS' Ti.UI.WebView implementation from Apple's deprecated UIWebView to WKWebView as of Titanium 8.0.0 and there might be a behavior difference. _(I don't have an iOS device/simulator available to me at the moment. So, I hope you don't mind me asking.)_
Antje Schattat 2019-07-19

No, even with the SDK 7.5.2.GA the video does not work as soon as the swipe event is in there.
Vijay Singh 2019-07-19

[~aschattat] Can you check if setting property [willHandleTouches](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView-property-willHandleTouches) helps? If no, can you please share complete test case to reproduce issue? Thanks!

Antje Schattat 2019-07-20

_WillHandleTouches_ does not help, see example. The sample code can be copied to a new Alloy project for testing. Thanks. *index.xml*

   <Alloy>
   	<Window class="container">
   		<WebView id="webview" willHandleTouches="true"></WebView>
   	</Window>
   </Alloy>

*index.js*

   var html = "<html><head><meta name=\"viewport\" content=\"initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" />";
   			html = html + "<style>body { margin: 0; }</style><body>";
   			html = html + "<iframe src=\"http://player.vimeo.com/video/158243063\" width=\"350\" height=\"200\" frameborder=\"0\" allow=\"autoplay; fullscreen\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>";
   			html = html + "</body></head></html>";
   			$.webview.setHtml(html, { baseURL: "http://player.vimeo.com" });
   		
   $.index.addEventListener('swipe', function(e) {
   	console.log('swipe');
   });
   
   $.index.open();

Without the swipe event the video starts. So, if I comment out this code:

   $.index.addEventListener('swipe', function(e) {
   	console.log('swipe');
   });

Sharif AbuDarda 2019-08-22

Hello [~aschattat], [~vijaysingh], I was able to verify the issue with the above sample code in iOS platform using the latest SDK 8.1.0.GA. It seems using the swipe event is causing the issue. Without it, there is no issue of the video playing in the webview. Thanks.
Antje Schattat 2019-08-22

Exactly, without swipe event it works. However, my client would like both - Swipe for the Window and Vimeo video in the WebView (part of the window-content). Thanks.

JSON Source