YouTube html5player won't play on iPad safari; protocol and port exception - ipad

I have a strange error occurring only on safari for iPads. I've added a youtube iframe element to the page that looks like this.
<iframe width="560" height="315" src="http://www.youtube.com/embed/dDAB35SYIr0?rel=0" frameborder="0" allowfullscreen></iframe>
As you can see I say the source is http and my site is http as well. Now on iPad Safari I get this console error message
Blocked a frame with origin "https://www.youtube.com" from accessing a
frame with origin "http://example.com". The frame requesting access
has a protocol of "https", the frame being accessed has a protocol of
"http". Protocols must match.
I think this is weird for two reasons
1. I specifically say "use http"
2. It works on other devices
Now if I change the protocol to https (now I'm on a https site as well) and try this, I get this error instead
Blocked a frame with origin "https://www.youtube.com" from accessing a
frame with origin "https://www.example.com". Protocols, domains, and ports
must match.
All errors references the html5player.js file.
How can I solve this?
Thanks for your help

Ok, so it seems webkit on IPad has a bug, a weird one. I read it here -> https://tmpworldwide.github.io/bugs/ios-tappy-bug.html
I'll quote a bit of it
Applying the :active pseudo-class to a universal selector (*) and including a property of -webkit-tap-highlight-color seems to be the culprit.
*:active {
-webkit-tap-highlight-color: tomato;
}
Now, here is the strange part. The bug is only triggered when the above CSS block is present and there is an input element present on the page with a type attribute value of "search". I know, crazy, right?
Another oddity here is that when you apply focus to the search input, type something in, and then attempt to play video, it will then work.
The solution for now is to change to input type="search" to input type="text".

Related

How can i access elements in a iframe of a cordova WKWebview ios app?

I want to access elements of our website that is embedded in a iframe of our ios App.
It has the same problem as file access.
SecurityError: Blocked a frame with origin "file://" from accessing a cross origin frame...
The file access problem is solved through this plugin https://github.com/globules-io/cordova-plugin-ios-xhr.
But access in a iframe is not solved.
How can i access elements in a iframe of a cordova WKWebview ios app?
I've run into a similar issue in my Cordova apps with WkWebView. You'll need to get the iframe to run under the "same-origin" of your app. This is the only workaround I've found. It involves writing content directly to the iframe, rather than giving it a src="...". This way, iframe runs as same-origin as parent. (Anything loaded via src="file://..." is treated as unique-origin in WkWebView, so blocks any cross-frame JavaScript.)
function frameEl_injectHtml(frameEl, injectHtml) {
// frameEl must exist in DOM before its contentWindow is accessible.
if (!frameEl.contentWindow) { alert("frameInjectHtml() but frameEl not (yet or anymore) in DOM."); return; }
frameEl.contentWindow.document.open('text/htmlreplace');
frameEl.contentWindow.document.write(injectHtml);
frameEl.contentWindow.document.close();
}
// Create <frame>, insert into DOM, and inject content.
var frameHtml = "<html><head></head>" +
"<body style='background-color:#eee; color:#000;'>" +
"iframe body" +
"<script>window.parent.alert('iframe even same-origin as parent.');</script>" +
"</body></html>";
var frameEl = document.createElement('iframe');
frameEl.src = "about:blank";
document.body.appendChild(frameEl);
frameEl_injectHtml(frameEl, frameHtml);
You'll have to load the contents of the website pages somehow outside of this workaround, e.g. with an ajax call.

Request Fullscreen in Dart

How does requestFullscreen in Dart works? I want enable Fullscreen-mode on mobile devices.
I wrote following Code. But it changes nothing.
querySelector(".btn").onTouchEnd.listen((l) {
var body = document.body;
body.requestFullscreen();
});
But it didn't worked.I'm becomming on click always same error document.body.requestFullscreen is not a function
Seems to be something like https://api.dartlang.org/stable/1.24.3/dart-html/VideoElement/enterFullscreen.html, so you need to call it on your video element.
Edit: Oh, yes, there's also https://api.dartlang.org/stable/1.24.3/dart-html/Element/requestFullscreen.html -- that might be the one you want.
Edit2: Apparently, this has already been asked and answered, and needs a workaround: How to request fullscreen in compiled dart

Print styles overriding screen styles after AirPrint in iOS webview

I am working on a hybrid HTML5/iOS app that uses the Safari Webview. We are using AirPrint to allow the user print the contents of the webview. The problem I am having is that after the print dialog is opened, the print styles are taking affect on the screen, and even after printing is complete or canceled do not go away. This does not happen in our Windows or Android versions of the app, which use CEF and Android System Webview respectively. Print styles in those versions of the application are only applied to the print out, as expected.
Anyone have any experience using AirPrint with Safari Webview that could shed some light on a solution? I have considered just adding/removing the link tag containing the CSS with javascript before and after printing, but that feels hacky, and doesn't answer the curious question of why print styles are being applied to the screen.
Any help appreciated! Sorry there is no real way to attach code to this!
Yes, this is indeed a not expected behaviour. However, we can try to solve this using JavaScript.
Theory: When the print is done, let's reload the stylesheets. The browser will paint the page again and hopefully using screen definitions.
Practice: As we don't have a JavaScript callback after printing, you could try reload your stylesheets using the window.onfocus event, as follows:
function updateStylesheets(){
var links = document.getElementsByTagName("link");
for (var x in links) {
var link = links[x];
if (link.getAttribute("type").indexOf("css") > -1) {
link.href = link.href + "?id=" + new Date().getMilliseconds();
}
}
}
window.onfocus = updateStylesheets;
In detail, it grabs all <link> tags and appends a random number after, forcing a reload on the stylesheets.
Please let me know if that worked, I'd be glad to help.

IOS Memory buildup when changing IFRAME src with angular/Embedding youtube in cordova?

I'm afraid im having the same probem as this unasnwered question.
I have a blank IFRAME In my cordova ionic IOS App for embedded YouTube videos.
I change the NG-SRC="" of iframe by clicking Next Video. But upon testing it appears that the phone/cordova/webview is caching the old content of the iframes. I can only get through 20 videos or so before crashing out of memory.
I have tried using angular.element.remove() to remove the iframe as well as setting the iframe src to blank first, and neither seemed to affect how much memory is in use, per Xcode. I've also tried the cordova plugin ClearCache and that didnt clear any memory either.
Please help! Is there a better way to embed youtube in a cordova app?
I have spent weeks working on this all to have it crashing down around me (no pun intended)
My Video view is like:
<ion-view view-title="Random Video">
<iframe id="youtube" sandbox="allow-scripts allow-same-origin" ng-src="{{video.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>
<h4>{{video.title}}</h4>
<button ng-click="nextVideo()">
</ion-view>
My controller is like:
angular.module('starter.controllers')
.controller('VideoCtrl', function(VideoService) {
$scope.video = {};
$scope.nextVideo = function() {
$scope.video = null; //doesnt seem to help
//$scope.$destroy(); //doesn't help
//angular.element(document.querySelector( '#youtube' )).attr("src", " ");
//angular.element(document.querySelector( '#youtube' )).remove();
//neither of the above 2 remove any memory
VideoService.getVideo().then(function(response){
$scope.video = response.data;
});
}
$scope.nextVideo();
});
Note, when I load my app onto a website instead, and load in chrome, I can cycle through videos without seeing the memory usage go up (looking at taskmgr.exe at least)
It might seem like setting the iframe to an empty string should be enough, but for some browsers and some situations it isn't. It might be necessary to recursively delete event listeners and elements one by one. Maybe surprisingly, the recursive method (1) below is faster than just setting to an empty string (2):
1.Recursive
while (box.lastChild) {
box.removeChild(box.lastChild);
}
2. Setting empty string
myNode.innerHTML = '';
See https://stackoverflow.com/a/3955238/1158376 for reference.
Additionally, in the recursive approach, one might need to apply special treatment to some items, for example first remove event listeners, nullify functions (http://javascript.crockford.com/memory/leak.html), and use dedicated cleanup methods, like with jQuery (http://javascript.info/tutorial/memory-leaks).
Another strategy you could try is to load a new web page with a fresh iframe for every video you play. Loading a new page should enable the browser to release the previously claimed memory.

Setting "origin" in youtube-ios-player-helper breaks programatic functionality

Using the YouTube iOS Player Helper library (https://github.com/youtube/youtube-ios-player-helper downloaded on 2015-06-16), if I add the line:
#"origin": #"example.com",
before:
#"modestbranding": #1
at line 30 in SingleVideoViewController.m, then the programatic controls no longer function to affect the video, and the progress bar no longer updates. Additionally, very few of the status messages are being shows/received.
I assume/hope "origin" would show up in analytics, to signify source, which is why I'm setting it.
Is there a specific format this text needs to be in, or something else I should be setting?
I'm cross posting this issue here as I have got no response to the GitHub issue
https://github.com/youtube/youtube-ios-player-helper/issues/121
You are not passing in a valid url for the origin parameter.
Try #"origin": #"https://example.com" or #"origin": #"http://example.com". Note the http(s)://.

Resources