Video event issue: User touching screen before time to play - html5-video

Hi this question is for anyone who may be able to show me how to resolve this user issue. I have a script that plays a video with the user able pause and resume on touch. This was easy enough to do and works fine. At a certain point the script pauses the video for the user for a set time so the user has time to read the information on the screen. The intent is for them to be able to to resume playing the video after reading the information. If the user waits long enough, the touch to resume works fine. But, because some users read faster than others it is obvious I need to detect the touch even when the video was paused by the script - this is the part I need help with. Currently, if the video is paused by the script and the user touches the screen before the set time for the pause expires, the play button will show but pressing it to play will not resume the script until that time expires. I presume I need a listener inside the function the script used to pause the video. I am not quite sure the best way to handle that. Here is a snippet of my approach so far:
var myVideo = document.getElementById("myVideo");
function playPause() {
var el = document.getElementById("playButton");
if (myVideo.paused) {
myVideo.play();
el.className ="";
} else {
myVideo.pause();
el.className = "playButton";
}
}
myVideo.addEventListener("click", playPause, false);
var pause42 = function(){
if(this.currentTime >= 42 && !myVideo.paused) {
this.pause();
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pause42);
}
};
myVideo.addEventListener("timeupdate", pause42);
Any help is appreciated!

FYI problem solved. Posting the answer here if it helps others.
var pause42 = function(){
if(this.currentTime >= 15 && !myVideo.paused) {
this.currentTime = 42;
this.pause();
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pause42);
}
};
myVideo.addEventListener("timeupdate", pause42);

Related

Multiple occurence of web notification

I want to show a web notification to the user if they left the page open for 10 seconds. I have already taken the notification permission.
Problem here is the notification occurs multiple times even if the user comes back to the page in less than 10 secs. Already use clearTimeout for flushing myVar value....but no luck.....any help!
var myVar;
window.onblur = function myFunction() {
myVar = setTimeout(function () {
var notification = new Notification("XXX page is open in background ");
}, 10000);
clearTimeout(myVar);
};
want to make in such a way that only if user goes out of the page multiple times the notification will trigger everytime....but if he comes back to the page it will not appear..
Well, it could be due to testing. You must realize that window.onblur is triggered each time you leave the page. So if you leave, enter, leave, enter, leave, you will get 3 popups; each event runs independantly.
What you should do is call clearTimeout() in your window.onfocus event; don't forget to clear your myVar variable in both your popup handling code and your onfocus event (and test for it being null or not).

How to mute/unmute mic in webrtc

I have read from here that how i can mute/unmute mic for a localstream in webrtc:WebRTC Tips & Tricks
When i start my localstream mic is enable at that time by default so when i set audioTracks[0].enabled=false it muted a mic in my local stream but when i set it back true it enable to unmute. Here is my code mute/unmute for a localstream:
getLocalStream(function (stream,enable) {
if (stream) {
for (var i = 0; i < stream.getTracks().length; i++) {
var track = stream.getAudioTracks()[0];
if (track)
track.enabled = enable;
//track.stop();
}
}
});
Can someone suggest me how i can unmute mic back in a localstream.
I assume that your method getLocalStream is actually calling navigator.getUserMedia. In this case when you do this you'll get another stream, not the original one. Using the orignal stream you should do
mediaStream.getAudioTracks()[0].enabled = true; // or false to mute it.
Alternatively you can check https://stackoverflow.com/a/35363284/1210071
There are 2 properties enabled and muted.
enabled is for setting, and muted is read-only on the remote side (the other person) (I have tried, setting muted does not work, basically, value cannot be changed)
stream.getAudioTracks()[0].enabled = true; // remote one will get muted change
Ahhh there is a good way to do this:
mediaStream.getVideoTracks()[0].enabled = !(mediaStream.getVideoTracks()[0].enabled);
You should read and set the "enabled" value. The "enabled" value is for 'muting'. The "muted" value is a read-only value to do with whether the stream is currently unable to play.
The enabled property on the MediaStreamTrack interface is a Boolean value which is true if the track is allowed to render the source stream or false if it is not. This can be used to intentionally mute a track. When enabled, a track's data is output from the source to the destination; otherwise, empty frames are output.
In the case of audio, a disabled track generates frames of silence (that is, frames in which every sample's value is 0). For video tracks, every frame is filled entirely with black pixels.
The value of enabled, in essence, represents what a typical user would consider the muting state for a track, whereas the muted property indicates a state in which the track is temporarily unable to output data, such as a scenario in which frames have been lost in transit.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/enabled
Step 1) call jquery.min.js
Step 2) use below code ,
A) To Mute
$("video").prop('muted','true');
B) To unmute
$("video").prop('muted','');
single Icon mute and unmute like youtube
function enablemute(thisimag) {
if($(thisimag).attr('src')=='images/mute.png')
{
$("video").prop('muted','');
$(thisimag).prop('src','images/unmute.png');
}
else
{
//alert('her');
$("video").prop('muted','true');
$(thisimag).prop('src','images/mute.png');
}
}
above function enablemute should call from onclick

Return to beginning state at the end of the video

I'm using video.js (4.1.0), and would like to return to the ready-to-start state at the end of the video. I don't see how to do this.
If I do
myPlayer.on("ended", function(){
});
and load the poster frame in there, using myPlayer.posterImage.show(); it covers the entire video object, even if a user starts playing the video again.
If, at the end, I do this:
this.pause();
this.currentTime(0);
it has the video paused at the beginning, rather than the ready state with poster frame.
Any thoughts on how I can accomplish this?
The poster image should disappear again when playback restarts - do you have a link where it does not? It does in this fiddle, where the posterImage and bigPlayButton are shown and currentTime is set to 0.
var vid = videojs("myVideo");
vid.on("ended", function(){
vid.posterImage.show();
vid.bigPlayButton.show();
vid.currentTime(0);
})

Clicking on marker cluster wants to open spider with exact same location markers by default

I was trying to implement MarkerCluster (MS) with
Overlapping Marker Cluster (OMS). Everything seems to work just fine.
However, I am looking to modify the way OMS is works so that if I click on a cluster that has 2 points under it
When I click on any Cluster with 2 points in it with exact same geo location, its opens a marker and when I am clicking on that marker it's opening spider with 2 markers.
What I want when I am clicking on the
Cluster, straight a way it will open up spider with 2 markers, already
spend lot of times but still nothing worked.
I already tried many solutions, like
1.
I can track the marker when I am adding to OMS(oms.addMarker), and can
click depending on zoom_changed event of google map, but its not firing
spiderfy rather its firing click event of what we added to markers.....
2.
I have see a event spiderfy, so I tried to trigger that event with a
marker object (oms.trigger('spiderfy', marker);) but nothing working...
Here I am adding code snippet too:
mc = new MarkerClusterer(map, markers.locations, mcOptions);
google.maps.event.addListener(mc, 'clusterclick', function(cluster) {
enter code hereclusterClicked = true;
// HERE WE WANTS TO FIRE SPIDER FUNCTIONALITY ...
});
I could solve this problem, first of all it is obvious that you have implemented and Overlapping Xluster Marker Marker Cluster in your google maps.
My solution is something very simple.
We capture the click event of markerCluster.
obtain the markers of markerCluster.
check whether all the markerCluster markers are in the same position.
if they are in the same position we make a click event trigger the latter obtained the markerCluster marker.
In short this is the code:
var markerClusterer = new MarkerClusterer(map, allMarkers, {styles: styles[0], clusterClass: 'poiCluster', maxZoom:18});
google.maps.event.addListener(markerClusterer, 'click', function(cluster) {
var markers = cluster.getMarkers();
if(estanTodosEnLaMismaPosicion(markers)){
//to wait for map update
setTimeout(function(){
google.maps.event.trigger(markers[markers.length-1], 'click');
},1000)
}
return true;
});
function estanTodosEnLaMismaPosicion(markers){
var cont=0;
var latitudMaster=markers[0].getPosition().lat();
var longitudMaster=markers[0].getPosition().lng();
for(var i=0;i<markers.length;i++){
if(markers[i].getPosition().lat() === latitudMaster & markers[i].getPosition().lng() === longitudMaster ){
cont++;
}else{
return false;
}
}
if(cont==markers.length){
return true;
}else if(cont<markers.length){
return false;
}
}

Chrome WebDriver hungs when currently selected frame closed

I am working on creation of automated test for some Web Application. This application is very complex. In fact it is text editor for specific content. As a part of functionality it has some pop-up frames. You may open this pop-up? make some changes and save them - closing current frame. May problem is in that fact, that close button situated inside frame will be eliminating. And this force Chrome WebDriver to hung. My first try was like this:
driver.findElement(By.xpath("//input[#id='insert']")).click();
driver.switchTo().defaultContent();
But it hungs on first line after executinh click command as this command close frame.
Then I change to this(I have JQuery on the page):
driver.executeScript("$(\"input#insert\").click()");
driver.switchTo().defaultContent();
But this leads to same result.
Then I use this solution:
driver.executeScript("setTimeout(function(){$(\"input#insert\").click()}, 10)");
driver.switchTo().defaultContent();
And it hungs on second line. Only this solution works:
driver.executeScript("setTimeout(function(){$(\"input#insert\").click()}, 100)");
driver.switchTo().defaultContent();
but only if you don't take into account, that it is unstable - some timing issue may occur.
So may question is there more cleaner and more stable way for switch out from closed frame?
P.S.: executeScript - self defined function to decrease amount of code. It simply executer some js on page.
Update:
I realized I was wrong. This problem is not for all iframes. It's occur when tinyMCE popup used. Situation is exactly like in this topic. So it's doubtful I will find answer here, but who knows. Solution described above will help, but only for very short amount of time, meaning that after several seconds pass chromedriver will hangs on next command.
This is how i would do it in Ruby, hopefully you can change it for java
$driver.find_element(:xpath, "//input[#id='insert']").click
$wait.until {$driver.window_handles.size < 2} #this will "explicitly wait" for the window to close
handles = $driver.window_handles #get available window handles
$driver.switch_to.window(handles[0]) #navigate to default in this case the First window handle
hope this helps
Problem was in this line of tinyMCEPopup code:
DOM.setAttrib(id + '_ifr', 'src', 'javascript:""'); // Prevent leak
Executing this script on page fix hang problem(but possibly creates leaks :) ):
(function() {
var domVar;
if (window.tinymce && window.tinymce.DOM) {
domVar = window.tinymce.DOM
}
else if (window.tinyMCE && window.tinyMCE.DOM) {
domVar = window.tinyMCE.DOM
}
else {
return;
}
var tempVar = domVar.setAttrib;console.log(123)
domVar.setAttrib = function(id, attr, val) {
if (attr == 'src' && typeof(val)== 'string' &&(val + "").trim().match(/javascript\s*:\s*("\s*"|'\s*')/)) {
console.log("Cool");
return;
}
else {
tempVar.apply(this, arguments);
}
}
}());
Bug and solution also described here
Note. Code above should be added to parent frame, not into popup frame.