Is there any way to bind to and detect the seeking and seeked events while the video is playing in fullscreen and the user scrubs to another video position.
Works fine in an embedded video tag in safari on the desktop. Thanks!
I have used small JS snippet:
var lastTimePosition = 0;
$("video").on("timeupdate", function(){
//Time difference between last event handled and current position
var diff = Math.abs(this.currentTime - lastTimePosition);
//If difference more that 1 second, handle event (on iOS Safari this event handles 3 times per second. You can increase this parameter to be sure it will handle only on manual seeking
if (diff > 1) {
window.location = "video://currentTime:" + this.currentTime;
console.log("Time:" + this.currentTime);
}
lastTimePosition = this.currentTime;
});
Add this JS snippet on your UIWebView or WKWebView and listen updates. How to get callbacks in Obj-C from JS see
UIWebView: How to invoke Objective C method from Javascript and send back data to Javascript in iOS?
WKWebView: http://www.joshuakehn.com/2014/10/29/using-javascript-with-wkwebview-in-ios-8.html
Related
I am fairly new to front end land, so bear with me... I have an HTML page with an embedded video through an HTML video tag like so:
<video id=... class=...>
<source src=... type="video/mp4">
</video>
This video resets back to the beginning when it is done playing. Now I would like to test this using protractor. Currently I can get the element, but I do not know how to play/pause the video, see how far along the video is, etc. from a protractor test. I can get the element through element(by.id('<id>')) and I can do the normal stuff like seeing if it is visible, click on it, etc. but have no idea how to get at the guts of the element.
UPDATE:
The issue with this is that the controls are provided by the browser as my video tag specifies the 'controls' attribute. That means the play/pause button is not part of the DOM and hence why I cannot get to it. Also, the browser is the one that sends an event to say that the video has ended. So, in order for me to test that the video resets after it has ended, I would need to hit the play button which is not listed as a DOM object. Is there a way to trigger an 'ended' event without playing the video? Or can I trigger it by setting the currentTime attribute to the duration attribute somehow?
you can't select play/pause controls by selectors , instead you can add a button by your own and add HTML audio/video events to it . So that you can automate using that button.
button.onclick = function () {
(videoSelector).play/pause();
}
To play the video you will have to select the 'play' button from the 'DOM' rather than the video tag by id say element(by.css('<.class of play button>'))
and if its present in the callback of isPresent() add the click event. To give a complete answer it will be good to have a snapshot of the 'DOM' at the time when video is played.
The best option i found at the moment is using plain javascript to automate the
execution of pausing, playing, etc. adding the following code either in a page object or a spec:
browser.executeScript(function () {
var video = document.getElementById('video');
video.play();
});
How can I automatically close the $cordovaInAppBrowser when it goes to my website and returns content "OK"? I would like to do this to avoid displaying the close button in the browser window.
Does anyone know how I can achieve this?
I did find the website that can solve this for those who also need to self close the browser in some condition.Here is the reference link : https://developer.salesforce.com/forums/?id=906F00000009ALSIA2
sample coding:
authWindow.addEventListener('loadstop', function(e) {
var loc = e.url;
//when url is changed check if the url contains your specific callbackURL
if (loc.search(data.callbackURL) >= 0) {
//at this point close your inapp browser
//you will land on the index page within your application.
authWindow.close();
//your code after successful authentication
}
});
you can use something like a timeout function or other than that a even listener other than i would suggest make a custom plugin and use it. The solution provided by #Blouraf is very hacky.
I did find some documentation on the cordova plugin that recommends a listener.
I've created website completely in angular + famous.
In desktop it's working great. When I try to open it in safari / chrome on iPhone it's working great as well but there is one problem. Using my finger I can't move page at all, only touch event is recognized, nothing more.
This is happening also in official examples. For example examples/views/Scrollview/example.html. If I rotate my iPhone 6 Plus to landscape I can't even access the browser toolbar to close the page, I need to kill the browser and start it again.
What I am suppose to do to fix this? Why is this even happening?
The problem is that you are using Famous in appMode. Try setting the following and see if that works:
Engine.setOptions({appMode: false});
When Famous is in appMode, it will add the following snippet when the context is created:
function initialize() {
// prevent scrolling via browser
window.addEventListener('touchmove', function(event) {
event.preventDefault();
}, true);
addRootClasses();
}
This is what prevents the browser page from moving.
function initialize() {
// prevent scrolling via browser
window.addEventListener('touchmove', function(event) {
event.preventDefault();
}, true);
addRootClasses();
}
I am very new to angular JS and working on a mobile application. As a part of it, I need to write a service that handles touch events like swipe-left, swipe-right, swipe-up and swipe down and I need to call back depending on which action is made. Please let me know if there any useful tutorials.
As mentioned in the comments ngTouch is a good place to start, however it only has swipe left and swipe right. I recommend using Angular Gestures; it's an angular implementation of hammer.js, and has pretty much everything you'd ever need:
doubletap
dragstart
drag
dragup
dragdown
dragleft
dragright
dragend
hold
pinch
pinchin
pinchout
release
rotate
swipe
swipeup
swipedown
swipeleft
swiperight
tap
touch
transformstart
transform
transformend
Another option is the angular-swipe module. It replaces ng-swipe and uses the same directives, adding up and down:
ng-swipe-up
ng-swipe-down
ng-swipe-left
ng-swipe-right
In html i used 5 tabs and i am able to swipe left or right smoothly.
my code given below.
RECEIVED | SENT | DELETED | ARCHIVED Reports
In html
ng-swipe-left="leftTab()" ng-swipe-right="rightTab()"
and In controller.
$scope.leftTab = function(){
if($scope.tab != 4 ){
$scope.getAlertsSummary($scope.tab + 1);
}
};
$scope.rightTab = function(){
if($scope.tab != 0 ){
$scope.getAlertsSummary($scope.tab - 1);
}
};
Here getAlertsSummary used for get tab data.
I'm trying to write a restartless add-on for Firefox Mobile that will insert content onto specific web pages. It all seems to work OK until I try disabling then re-enabling the add-on, at which point I get multiple responses to the page load event, and I can't figure out a way to sort them out.
Since Fennec uses the Electrolysis multi-process platform, I know that I need to split my code into chrome and content scripts. My bootstrap.js looks something like this (trimmed for clarity):
function startup(data, reason) {
mm = Cc["#mozilla.org/globalmessagemanager;1"].getService(Ci.nsIChromeFrameMessageManager);
mm.loadFrameScript(getResourceURISpec('content.js'), true);
}
function shutdown(data, reason) {
let mm = Cc["#mozilla.org/globalmessagemanager;1"].getService(Ci.nsIChromeFrameMessageManager);
mm.sendAsyncMessage("GeoMapEnh:Disable", {reason: reason});
}
function install(data, reason) {}
function uninstall(data, reason) {}
Basically, the bootstrap.js just launches a content script, and sends a message to tell it to clean up on shutdown. The content.js sets up an eventListener to watch for page loads, that looks a bit like this:
addMessageListener("GeoMapEnh:Disable", disableScript);
addEventListener("DOMContentLoaded", loadHandler, false );
function loadHandler(e) {
LOG("Page loaded");
// Do something cool with the web page.
}
function disableScript(aMessage) {
if (aMessage.name != "GeoMapEnh:Disable") {
return;
}
LOG("Disabling content script: " + aMessage.json.reason);
try {
removeEventListener("DOMContentLoaded", loadHandler, false );
removeMessageListener("GeoMapEnh:Disable", disableScript);
} catch(e) {
LOG("Remove failed: " + e);
}
}
function LOG(msg) {
dump(msg + "\n");
var consoleService = Cc["#mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService);
consoleService.logStringMessage(msg);
}
When I first run the extension, everything works fine. An instance of content.js is executed for each browser tab (and any new tabs I open) and my eventListener detects the page loads it is supposed to via the DOMContentLoaded event. When I disable the extension, everything still seems OK: page loads stop being detected.
When I re-enable the extension, it all goes wrong. I still get an instance of content.js executing for each open tab, but now, if I open new tabs, DOMContentLoaded triggers mutiple eventListeners and I can't distinguish which one should handle the event. Worse yet, some of the eventListeners are active, but do not give debug info via my LOG function, and do not all of them get removed if I disable the extension a second time.
I do want to watch all browser tabs, including any new ones, but I only want my extension to insert content on the page that triggers it, and only once per page load. I've tried the following without success:
Calling e.stopPropagation() to stop the event being passed to other listeners. No effect.
Calling e.preventDefault() and testing e.defaultPrevented to see if the event has already been handled. It never has.
Testing if (this === content.document) to see if the eventListener has been triggered by its own page content. Doesn't work, as I get multiple "true" responses.
Making the eventListener capturing. No effect.
Using the load event rather than DOMContentLoaded.
I can't set a shared variable to say the event has been handled as under Electrolysis, the different eventListeners will be executing in different contexts. Also, I wouldn't be able to distinguish between multiple tabs loading the same page and one page load being detected multiple times. I could do this via IPC message passing back to the chrome bootstrap script, but I then I wouldn't know how to address the response back to the correct browser tab.
Any ideas? Is this a Firefox bug, or am I doing something silly in my code? I am using Fennec Desktop v4 for development, and will target Fennec Android v6 for production.