Turn Off Youtube Annotations Using JavaScript - javascript

There’re currently three ways I know of, to disable annotations in youtube videos:
You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).
Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.
I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.

Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.
var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created
var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
all_labels[i].click(); // and in that case, click it
}
}

User's code is correct, settings need to be click & then:
document.querySelectorAll("div[role='menuitemcheckbox']")[1].click()
I added it to my "turn off autoplay & annotations" script: https://gist.github.com/Sytric/4700ee977f427e22c9b0
Previously working JS:
document.querySelectorAll("div[aria-labelledby=\"ytp-menu-iv\"]")[0].click()

I know you don't want to use an extension for this but it is the most flexible and easy way to solve your problem.
Extension gives us the power to use a background script through which we can inject css and javascript to opened web page.
I made one extension on this
https://chrome.google.com/webstore/detail/hide-labels-and-end-cards/jinenhpepbpkepablpjjchejlabbpken
This also has a stop-start button for which I just inject the opposite code as before.
If you need any further help on this, i will be happy to do so.

iv_load_policy (supported players: AS3, AS2, HTML5)
Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotations to not be shown by default.

Here is a nice solution, just hide the div with annotations
$("div.video-annotations").css("display", "none");

Related

Remove "use two fingers..." warning on google maps with javascript

I have a web application written in javascript which uses the google maps api to map certain features. However, I am having some unwanted results when users with touchscreen computers try to use the map.
Specifically, I would like to get rid of the warning that tell users "use two fingers to move the map". Similiar to this picture (https://reyner.id/wp-content/uploads/Embedded%20Google%20Map%20Mobile%20Function.jpg)
The issue is due to the fact that when I take "screenshots" of the map (with html2canvas), the warning displays over the map and blocks the image. I think the easiest thing to do might be to disable that warning, but I can't find any documentation on how to do that.
Please let me know if it would help to include any codes or links.
you could use CSS to hide the message,
.gm-style-pbc{
display: none !important
}
I know the question was answered, but for future visitors, I would like to offer a more complete answer, building on the one provided by #Sudhir_Bastakoti:
$('#map-canvas').click(function() {
setTimeout(function() {stopTwoFingerWarning(); }, 2500);
});
function stopTwoFingerWarning() {
$('.gm-style-pbc').hide();
$('.gm-style-pbc').css('display', 'none!important');
}
The above functions will let the visitor see the warning on the first instance, but hide it after 2.5 seconds. Otherwise, how is a visitor to ever receive the instructions to begin with? They will not know how to use the map, and get frustrated.
I chose 2.5 to allow for the message to sink in, but set as you like.

Google Translate BUTTON producing odd results on some pages

UPDATE: even though I've put a bounty here, the answers provided are not even slightly helpful so save yourself the time and move on... sorry.
My URL is: http://colnect.com/en/forum/viewtopic!f%3D46%26t%3D35678
Click the "Translate" button offered by Google. This used to work just fine. Now it translates some of the blocks and for others shows only > instead of translation or keeping the original. I've attached here an "after" screen captures. If you follow the URL and try it for yourself you'll see more parts were being removed. Perhaps Google changed something in the way the button works or there's some Javascript bug there. Would be happy for any ideas here. Thanks
Note: cross-posted on http://productforums.google.com/forum/#!category-topic/webmasters/internationalization/rykImZlToVk
Not quite sure what this has to do w/ programming (if you're a developer for the site, making a browser plugin, etc.), but if I had to purpose a way that translation is being buggy I'd suggest these things:
Check that elements on the website's page are properly identified. No dead links, misroutings, wrongful JavaScript element calls, wrongful CSS element declarations, etc.
Check that the Google Translate API is set up correctly. If everything is working fine on Google Translate itself, everything should be fine w/ the core API.
The solution may be found in one of the suggestions on that topic's fourth page, first post:
I support option 1 ("Translate" icon for each individual post). I think it will be very convenient -
1/ Usually you are interested in a translation of only a few posts out of every page at most anyway. There is no need to translate the whole page.
2/ It will be possible to translate different posts in different languages in the same page.
3/ No need to scroll up the page to click "Translate"
4/ Will be able to see original text
What I'm believing is that, due to the nature of your fora, the translator assumes that an individual post is one language and will try to back-translate it to the user's preferred. What happens is actually evident in the (current) translator for the first post.
I would like to inform you that in the box no longer works the translator.
Let me know if you too have experienced the inconvenience.
thanks
becomes
I would like to Inform You That in the box no longer works the translator.
Let me know if you too have experienced the inconvenience.
thanks
with an appended ,[lang code] at the end of the post.
By the way, you can see the picture's problem here despite the rest being in English and a post in Spanish. I'm assuming the translator is thinking every post is in Spanish (or whatever language it is) and it decides to spit garbage when it doesn't know how to translate to the preferred language.
As much as I love having multiple languages in a single post or even a forum topic, a machine translation cannot tell the difference between "A" language and "A" language despite being the same and being tagged as (in the example) Italian, Spanish, or what have you. This is an error in Google Translate, known as "recursive translation", and may not be fixed for a while.
So, what I recommend is this:
Ask your users to preferably write in one language. This is for the sake of the machine translation so that the poster doesn't confuse it.
Add a dedicated translate button to each post. Not only will this speed up times, it will be way more convenient as outlined by the poster, and avoid any errors not tagged with their respective [lang tag].
Unless this is not implemented (and I believe it is), it would be best to have your own tagging system so Google Translate will know the difference between "A" and "B" languages. In addition to this, you can also mess around with the site's code so that {some foreign language}[lang code] will be wrapped around the text. For example:
{Vorrei comunicare che nella casella posta non funziona più il traduttore.
Fatemi saper se avete anche voi riscontrato l'inconveniente.
Grazie}[it]
{Paulo}[dnt]

Edit opened HTML Page, with Javascript

I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz
From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.
Yes, it is. You must find a tutorial about javascript DOM manipulation

Override browser spellchecking with your own?

I'm writing a form with javascript validation, I'd like to override the browser's built in spell checking.
For example, let's say I'm checking serial numbers and they all pass a regex text. I'd like to highlight the ones who don't in the browser much likes the browser highlights words with invalid spelling.
All I could come up with is disabling the browser's built in spell checking
So to sum it up
Is there a simple way to override a browser's built in spell check (sort of how like you override the comparator when you sort an array in javascript)
If there is not, is there a simple way to emulate such behavior?
Thanks a lot
The short answer; no, there is no Spellcheck API that JavaScript can hook into. Besides these kinda seem like different goals; a spellcheck is about natural language whereas you seem to really want input validation. You'd be better simply applying a different background / border colour or similar hint to the user via CSS when your JavaScript code detects an invalid serial (especially since each browser will render spellcheck errors differently anyway).
I haven't evaluated the code, but CkEditor manages to disable browser spell checking. It has a config setting that's set to true by default: disableNativeSpellChecker
config.disableNativeSpellChecker = true;
The setting is used within the "wysiwygarea" plugin, here's a link to the plugin code: wysiwygarea plugin
Maybe you can use it as a basis for your own code to disable browser spell checking.
Check out the demo from the Url below, it think it might be helpful in your case although it works just with HTML5.
http://jsfiddle.net/0GiS0/ZU74B/
Here is the code they used in the demo:
window.onload = function(){
var support = document.getElementById("support");
if('spellcheck' in document.createElement('textarea'))
{
support.textContent = "Your browser supports spellcheck";
support.style.color = "green";
}
}

Is it possible in Flash to launch a JavaScript function (which uses AJAX) in a page that contains the Flash object itself?

Here's our goal: in a website, show a nice menu "à la" iPhone in Flash and when we click on a menu, show a part of the site "under" the Flash menu.
Two options:
create a page with the
Flash menu that has an iFrame and
with Flash, open the menu in that
iFrame;
create one page with a div
on its bottom, with Flash, launch a
JavaScript (if you have any better idea please tell me !) function that downloads via AJAX the desired menu.
My #1 objective is to have only one page. Ideally it would embed the Flash object and launch a JavaScript function.
PS: I hate iFrames. iFrames are evil to me.
Don't hesitate to correct my question to make it proper English !
Thanks,
Olivier
Yes, this is very possible using ExternalInterface in the Flash document. That link explains the whole process.
A bigger question is that it sounds like you are using Flash to duplicate an iPhone animation and I imagine (unless you are doing the "Flip" animation) that it could easily be reproduced with normal JavaScript animation, possibly with a library like jQuery or MooTools to help normalize browser differences. You can even do the 3D animations in Safari 4.
An older method that is sometimes still useful is the getURL method. A good writeup of the differences is here: http://www.psyked.co.uk/actionscript/actionscript-geturl-vs-externalinterface-when-why.htm. In general, ExternalInterface is preferred, but sometimes you want to interact with the page with a function that not defined.
Usage:
getURL("javascript:myFunction(arguments);");
As Doug said, you may be able to use a JS library to recreate the iPhone animations. This would have the added benefit of your menu being navigable for search engines if this is a concern.
An alternative to Doug's suggestion is the old 'fscommand()' function. In your Flash code, you put "fscommand('name', 'value');" replacing name and value with whatever information you want to fire out to the web page.
On the web page, you need to have a JavaScript function which listens to the 'FSCommand' event of the Flash object, like this (IE sample, see docs for other browsers):
function OnFSCommand(name, value)
{
// whatever you need to do with name & value
}
var swf = document.getElementById(name-of-my-Flash-object);
swf.attachEvent("FSCommand", OnFSCommand); // IE-only - see docs for other browsers

Categories

Resources