As the title explains,
I need to disable pausing when clicked on the video viewing area, since i'm trying to attach other events when clicked on that area.
I tried using this videojs.com But found no solution
in video.dev.js (version 4.1) line 3399 comment function body
// OnClick - Toggle between play and pause
vjs.PlayToggle.prototype.onClick = function(){
/*if (this.player_.paused()) {
this.player_.play();
} else {
this.player_.pause();
}*/
};
in video.js line 80 column 403 its the same function , comment function body
function(){/*this.a.controls()&&(this.a.paused()?this.a.play():this.a.pause())*/}
The easiest way - just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
If you don't mind editing the videojs files directly you can either set the CSS for bigPlayButton to none instead of block, or comment out the following:
// Make a click on the video act as a play button
this.activateElement(this.video, "playToggle");
and this behaviour will be gone.
I wanted to comment on Ashot his answer for the solution on Video JS 4.6.3, but my reputation is not high enough yet.
MrHunter provided the answer for Video JS 4.3.
In version 4.6.3 the same code is on line 99 of the file video.js and looks like this:
function(a){0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())};
After commented out it looks like this:
function(a){/*0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())*/};
This worked perfectly for me. Thanks to Ashot and MrHunter for leading me to the solution on the newest version of Video JS!
If you want to prevent pause on click on the video,
Just add these 2 lines in the script.
var videoEle = document.getElementById("videoTagId");
videoEle.onpause = () => { videoEle.play(); }
Related
I recently made a (responsive) redesign for a website of mine.
Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine):
If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine.
This even works if you click say 7 links in a row and then the first one again.
This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser.
With remote debugging I see nothing.
I don't even know where to start debugging this ...
Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.
I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
with:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.
A strange trick solution that works in a project I am working on is to reset the z-index:
* { z-index: 0 }
Found that hack by Ryan Ou (thx) in an Angular google group
I suspect that it might be Adobe Analytics on our site that "steals" some clicks. Had issues because of Adobe also when trying to set focus on a text field and reveal the keyboard after a click. They caught the initial click so that our became synthetic and became restricted by iOS.
I'm surprised to have encounted this same issue so many years after the original post. I'm exploring solving this as follows:
const onHover = useCallback(
(evt) => {
// ios browsers intercept the tap/click event and instead trigger a mouseover event.
// This happens ONLY if we subscribe to onHover events.
// But we can grab the original event target and directly call click.
if (isIos()) {
evt.target.click?.();
}
// whatever your normal onHover code is can now be called:
onOriginalOnHover();
},
[onOriginalOnHover],
);
This works in my test app. Will need further validation though.
I'm experiencing a major bug in IE 11 (latest version 11.0.9600.16521 on Windows 7). When on any form if I open a select dropdown all the other form fields on the page freeze. I can 'unfreeze' them by adjusting the Window size (causing a redraw). This seems to happen on any form what-so-ever.
To reproduce:
Open IE 11.0.9600.16521
Go to http://www.wikipedia.org/
Select any language from the language dropdown
Result:
language dropdown does not appear to get updated on the screen
the search box appears to be frozen - i.e. focus on select box and start typing but no text appears. However if you adjust the window size the form fields are updated and go back to working as normal (until you interact with another select element)
I can't find much in Google for this issue so maybe it's just something specific to my settings. Only thing that sounds somewhat similar to what I'm experiencing is this: http://connect.microsoft.com/IE/feedback/details/806679/ie-11-desktop-selecting-an-item-from-a-drop-down-list-on-a-webpage-causes-the-tab-to-crash. Anyone else able to reproduce this?
I had a similar issue with IE11 that turned out to be any modification to the .text property of an SELECT-option element. I eventually found the "hint" on stackoverflow here
How to fix IE select issue when dynamically changing options.
In my case I use straight JavaScript, and with so many inter-dependent SELECT boxes had to come up with a generic solution, so my solution was to intercept (defineGetter) assignment to any .text property of an HTMLOptionElement, and set a 1 ms timer to perform an add element and remove element as in the referenced post that is titled "I have the fix. We have to add and remove options list to trigger the rendering in IE8." Notice the reference to IE8, AFAIK IE has had several issues with SELECT boxes since at least IE7, possibly earlier.
So the code I added to one of my global scripts is as follows:
try { var IE11; // IE10 and IE11 removed ActiveXObject from the window object but it can still be instantiated
IE11 = new ActiveXObject('MSXML2.DOMDocument.6.0');
IE11 = null;
if (typeof(HTMLOptionElement) != "undefined") {
try { HTMLOptionElement.prototype.__defineSetter__(
'text',
function(original) {
return function(newValue) { var sel;
original.call(this, newValue);
if (!(sel=this.parentElement).fixIE) sel.fixIE = window.setTimeout(_fixIE_(sel), 1);
}
}(HTMLOptionElement.prototype.__lookupSetter__('text')));
} catch(e) {};
}
} catch(e) {}
}
// IE11 broke SELECT boxes again, modifying any options .text attribute "freezes" the SELECT so it appears disabled
function _fixIE_(selBox) {
return _fixIE_;
function _fixIE_(){ var lc = selBox.options.length;
selBox.options.add(new Option('',''));
selBox.options.remove(lc);
selBox.fixIE = undefined;
}
}
Phil
Go to programs
Then widdcom folder
Right click bttray
Go compatibility
Tick run as admin
Restart
I had the same problem in IE 11 on Dell Windows 7.
It was solved by turning off hardware rendering in IE, as you suggested in your link.
As the title says,I haven't realy started creating the code because I need a little help in here.Im not good at javascript or jquery scripting,I just started learning about html so I only know the basics.Now,getting back on topic.
I want an iframe disapear as soon as it's clicked but as I said I just started scripting.Anyone has any idea ?
Here's how you can do this with plain old JavaScript. Note that clicking the page loaded inside the iframe may not call you event handler which is why I've added a border to this example (clicking the border will execute the event handler). You may need to overlay the iframe with another element and capture the click event on the overlaid element.
<iframe src="http://someurl" onclick="this.style.display = 'none'" style='border: solid 10px red'></iframe>
you can use CSS to do this, give your iframe an id for example call it "iframe_id" like this:- #iframe_id.click{ display:none;}
Edit: as per your comment.
To include jQuery, put the following in your HTML <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then use this w3schools article to learn how to attach javascript to HTML.
In your Javascript, you can use jQuery like this:
// Run all of the following code when our document is loaded
$( document ).ready(function() {
// Setup an event handler. Says, when we click on an iframe, run this function
$("iframe").on("click",function(){
$(this).remove();//jQuery function to completely remove from DOM
/* OR */
$(this).css("display","none"); //jQuery function that completely hides in CSS
};
});
Since you said you're new to programming HTML, you will want to read and practice JS. Here's an introduction to JS and jQuery.
I am trying to show the poster image once the video ends and here is the code. However the poster image is not showing up. Any clues why this is not happening?
The ideal steps would be
1. Pause video
2. Init at first frame
3. Remove default controls
4. Show poster image.
Code:
document.getElementById("video1").addEventListener("ended", function () {
document.getElementById("video1").pause();
document.getElementById("video1").currentTime = 0;
document.getElementById("video1").removeAttribute("controls");
document.getElementById("video1").setAttribute("poster", "graphic.jpg");
});
Try this one:
document.getElementById("video1").addEventListener("ended", function () {
this.load()
});
I am trying to add an Event Listener to a Htm5-Canvas which is managed by Kineticjs (the Canvas was created via a Stage of KineticJS).
I tried out (using jQuery):
$(selector).keydown( function(e) {... } )
with the following Selectors:
window (it is working, but it is listening to the whole Window and thereby not good)
All Canvas-Elements $('canvas') <-- not working
The Container, where KineticJS and its Canvas are embedded <-- not working
The Container-Div of KineticJS (created by Kinetic) with $('.kineticjs-content').keydown( function() { ... } ) <-- not working
Only $(window) is working. After experimenting with plain Html5-Canvas i figured out, that the Canvas-Element has Built-in-Support for Keyboard-Events.
So i think, KineticJS is doing something magic around here. Wrong Selector-Usage can be excluded.
I checked every Selector with this code: console.log( $(selector).length )
Can anyone help here? Thx in advance!
I suggest using one of the Keyboard Plugins out there:
http://robertwhurst.github.io/KeyboardJS/
http://dmauro.github.io/Keypress/
They work well together with KineticJS.
If you can include javascript into it, here is the code:
if(keyIsPressed && keycode == somenumber){
doSomething();
}
As of right now On only supports mouse and touch events.
Each layer has its own canvas that you can grab and attach events to.
From the limited experience I have with this (2 days), I saw that each layer you add becomes a canvas, so if you have a reference to the topmost layer in a variable (i.e. topmostLayer), you can do
var canvas = $(topmostLayer.getContext().canvas);
With this in place, what #devnull69 suggested just works:
canvas.attr('tabindex', 0);
canvas.keydown(function (ev) { ... });
I have it in place in my application and works fine.
see link, you need:
var canvas=layer.getCanvas()._canvas;
$(canvas).attr('tabindex', 0); // increase tabindex if needed
canvas.focus();
$(canvas).keydown(function (e) {
console.log(e.keyCode); // your handler here
});
You'll have to make sure that the canvas element has the focus before it can accept keyboard events. Unfotunately the .focus() method didn't work for me in Firefox, so I tried this and voilà
$('canvas').attr('tabindex', 0);
$('canvas').keydown(function(e) {
alert(e.keyCode);
e.preventDefault(); // to stop the key events from bubbling up
});
Click the canvas and it will have the focus.