Video element event binding not working in Safari browser - wordpress

I am using wordpress default core player mediaelement.js to play self-hosted videos.
By putting the [video] shortcode, I am generating the video rendering code in the front end.
For event binding I am using the Mediaelement's events as described here:
$('video').bind('loadeddata', function(e) {
alert('loaded');
});
$('video').bind('playing', function(e) {
alert('playing');
});
$('video').bind('pause', function(e) {
alert('pause');
});
$('video').bind('ended', function(e) {
alert('ended');
});
This is working perfectly in Internet Explorer and Firefox. But in case of safari, it's not working.
Please provide any solution.

It is the weird behavior of Safari Browser as explained by Johndyer in issue number #536 quoting below:
This is a really frustrating part of safari in that it only happens
when quicktime isn't installed. In that case, Safari still acts like
it understands HTML5, but it fails in strange ways that I haven't been
able to detect. So just install QuickTime adn you'll be all set.
Its is working fine with Quicktime installation.

Related

iOS 14 Universal Links broken on default browser other than Safari

On iOS 14 you can pick another default browser than Safari. If you use another browser, that browser will ask the user to change their default browser. 
I have installed quite a few browsers (Chrome, Firefox, Edge, Opera, Brave...) and have set each of them as my default one.
Problem comes when I try to open a Universal Link (which was working just fine when Safari was the default browser), which seems to just not work. With Safari as default browser, the Universal Link would work, and the corresponding native app was getting opened. However, with any other browser different from Safari set as default, the feature is broken and the Universal Link doesn't open the native app.
Has anyone experienced anything similar?
Why might this happen and how might this be solved?
Any help is very much welcomed
For iOS 14+
I suggest to add this to your Info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
<string>https</string>
</array>
By adding this you can continue to use method canOpenURL(_ url: URL) -> Bool
guard let url = URL(string: "https://example.com") else { return }
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
}
There's a bug on iOS up until 14.1, have you checked this?
https://www.komando.com/gadgets/apple-releases-ios-14-1/754697/
Edit: works for me

Chrome how to open popup in new window instead of new tab (20170629_chrome 59.0.3071.115)

Editted: For my probelm, not sure but I think hat this update of Google Chrome do not support many options for some specific browsers. So when we has them in specs param of window.open(), it omits all the height=h,width=w,left=x,top=y which make chrome open link in new window instead of new tab
For my program, now I only keep this and this solve the problem:
window.open(form_url, form_name, "width=w,height=h,left=x,top=y");
//our problem code below
//window.open(form_url, form_name, "width=w,height=h,left=x,top=y,resizable=yes,location=yes,scrollbars=yes");
//End editted =================
Could someone help me in configuring Chrome so that popup will open in new window, instead of new tab? (Or any programmatically method for asp.net, c#)
It begin from today 2017/06/29, maybe newest update from chrome version 59.0.3071.115, and all popup in chrome would be opened in new tab instead of new window. This change our website behavior (our website use a main menu and others popup forms), and is very unexpected.
(Tested in some others site with ads popup, same behavior).
(Tested in Firefox: open popup in new window ok for all those sites, not new tab).
I have read changelog here but no mention about this change: chrome 59.0.3071.115
I have searched google, too, but got no luck, maybe because of my google skill, maybe because this is new change from Chrome so google can't find question about it?
Thank you for any help.
On programmatically open new window and not new tab, you can do it via JQuery:
<script type="text/javascript">
$(document).ready(fncOpenNewWindow);
function fncOpenNewWindow() {
$('#testURL').unbind();
$('#testURL').on('click', function () {
window.open("", 'Window Name', "height=200,width=200,modal=yes,alwaysRaised=yes");
});
}
</script>
This is the control:
Click Me
This is tested on Chrome. I haven't tested this on other browser but this should work fine with Chrome.
I have the problem too. I fixed by change toolbar=no or remove toolbar feature.
window.open('http://google.com','x', 'height=600,width=600,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no')

Blank page in IE8 and 9

I've recently built and launched this page: http://www.thaiestatenetwork.com
It works great in Chrome, Safari, Firefox and even IE10, but in IE8 and 9 all I get is a blank page.
I've read through post here on SO about similar issues and based on that I've tried this:
going over my templates in an attempt to find DOM errors.
Tried setting position:static on html and body
commented out #font-face in my CSS (since I was getting an error in IE on BrowserStack related to #font-face)
Checked for potential CORS issues. Found none.
None of it works.
Strangely too, when I tunnel to my local dev machine through BrowserStack, everything works like a charm.
I should add that the site is built using router https://github.com/tmeasday/meteor-router and runs on Heroku using this build pack: https://github.com/oortcloud/heroku-buildpack-meteorite
I really hope someone out there has that fresh pair of eyes that will lead me on the right track.
I've solved it!
The issue turned out to be related to the way I was initializing Google Analytics (GA). I was doing this:
Template.menu.created = function() {
// GA initialization code here
};
I had to do this:
Template.menu.rendered = function() {
if ( typeof ga === 'undefined' ) {
// GA initialization code here
}
};
So basically I was attempting to initialise GA on first creation of my menu template, but instead I had to latch on to the rendered callback and add a conditional to make sure I only initialise GA once.
Overall I am not thrilled with my approach to initialising GA, but that is another matter entirely. It works.

telerik asyncUpload not working in IE9

I'm trying to use telerik asyncUpload, it works fine in all browsers but in IE9, I should turn on compatibility mode in order to see my file upload process after I select the file, but in this demo site (http://demos.telerik.com/aspnet-ajax/upload/examples/async/webmail/defaultcs.aspx) it works fine in IE9 without need to turn on compatibility mode, how can I do something like this demo site for IE9?
when I select a file in browsers other than IE9, file name is displayed and a small progress bar showing file upload is also displayed, also a small remove button appears beside file name, but in IE9 I see nothing after select my file, I should turn on compatibility mode, I hope this description is helpful, but in demo site, everything works fine for all browsers, what am I missing?
also I'm going to store my images in database, do I need to perform postback? where I my files stored?
I found this article that sounds similar to the problem your having.
http://www.telerik.com/community/forums/aspnet-ajax/async-upload/select-button-with-not-show-the-select-files-window.aspx
Basically there has been a certain problem with the Flash module in IE9, which is related to the Flash. Which could be why your not seeing anything in IE9.
If this is the issue they suggest disabling the flash module with the following JS:
<script type="text/javascript">
Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; }
</script>

Changing Window Title in Internet Explorer via Flex-Actionscript

I am looking for a way to dynamically set the window title for a flex application in Internet Explorer. The most best way to do this is to call javascript from actionscript to set the window title via an "ExternalInterface."
ExternalInterface.call("eval(window.document.title = 'New Title')");
ExternalInterface.call("alert", "Hello ExternalInterface");
This works fine in browsers other than IE, and it even works in IE when accessing the flex application's swf file through an html wrapper.
ttp://localhost:8080/ChangeTitle/ChangeTitle.html
However, I need to access the .swf directly from the browser..
ttp://localhost:8080/ChangeTitle/ChangeTitle.swf
This causes the External interface call to change the window title to not work, but the alert still shows.
So the question is... why don't I just use the html wrapper? ... The answer: because the project is set up specifically to avoid using the html wrapper.
This is related to a known IE bug - http://bugs.adobe.com/jira/browse/FP-240
If anyone could suggest a work-around for this issue it would be greatly appreciated.
Thanks
Don't use ExternalInterface for this; use the BrowserManager class. You can first initialize it with a title:
var browser:IBrowserManager = BrowserManager.getInstance();
browser.init("", "my title");
Later you can adjust the title later on:
browser.setTitle("my new title");
I have several applications that use this and work perfectly in IE (though I haven't tested IE6).
More info on this topic: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64e50-7ff4.html

Resources