I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.
There are a two problems to be solved here.
First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
Here are some options for how to handle this:
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
Use an older version of video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
I recommend 2 or 3.
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.
I personally used a custom link that triggers both play and fullscreen.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.
One easy way to solve the problem:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.
in video.js file go to this lines
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}
Related
I am writing a simple interactive animation for a website and am having an issue with the easeljs library.
The first part of my code has a spritesheet animation that I grabbed the sample code from https://blogs.msdn.microsoft.com/davrous/2012/03/16/html5-gaming-animating-sprites-in-canvas-with-easeljs/ and modified it accordingly.
The second part of my code has some interactivity (user click on some images and they produce sounds).
OK, if I use the library easeljs-0.6.0.min the animation will work but the code will raise an error saying that "object.on is not a function" (on click event that I use for the interactivity). This code causes it:
function ConfigureIcon(object)
{
object.on("click", function(evt){
}
}
Then if I try to use instead the library easeljs-0.8.0.min the interactivity will work but then the code will raise an error saying that "createjs.BitmapAnimation is not a constructor". This code causes it:
bmpEyesAnimation = new createjs.BitmapAnimation(EyesSpriteSheet);
Any idea?
Thanks!
In EaselJS 0.8.x, the BitmapAnimation type has been renamed to Sprite.
According to the release notes, this was done in version 0.7. The release notes give no other instructions about how to transition from BitmapAnimation to Sprite, which suggests you can simply rename it and it will work as-is.
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");
I have a page that plays an mp3 file when button pressed, using javascript like:
onclick="playAudio"
There is the obvious 300ms delay. I want to use this through html5 browsers only, using the nexus 7 only. So I dont want any backup code for IE6 etc. Every solution I've seen seems quite complicated and I can't get it to work.
Is there no simple javascript solution?
Check out the Fastclick project on github. If I understand your question, you just want to get rid of the 300ms delay on touch devices. This project is a polyfill to make touch uis much more snappy and responsive. Here is the url:
https://github.com/ftlabs/fastclick
Use Case:
Just include the fastclick library like so:
<script type='application/javascript' src='/path/to/fastclick.js'></script>
And then just instantiate it by putting following in your main app js file:
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
Hope that helps!
As I understand your question, this problem is related to playing audio and not necessarily related to interaction with buttons. So, on the basis of that I will try to answer your question in the following.
I assume you are using the HTML5 audio API for this. Have you taken a look at the preload attribute? It has a value called auto which tells the browser that it might be a good idea to preload the audio. The drawback of this is that you risk to cause unnecessary overhead to the server since you are almost always downloading the audio no matter what. Using this approach you can, through JavaScript, subscribe to an canplaythrough event, telling you when the audio has been downloaded and is ready to be played.
More details on this subject can be found here:
http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx
https://developer.mozilla.org/en-US/docs/HTML/Element/audio
I am creating one app for Windows 8 Metro style app using HTML 5 and JavaScript. I require to find at launch of the app whether it will be touch base process or mouse based process (smartphone or desktop computer).
I tried following things.
1) As per following,
http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.input.pointerdevicetype.aspx
but we are not sure what to pass in as “pdt” in function getPointerDeviceType(pdt)
Tried various things but it return me “undefined” only.
2) We tried Modernizr js framework to find for following code
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
But when we insert the latest js code of “Modernizr”, it gives us security error for appendchild command. Something like
“0x800c001c - JavaScript runtime error: Unable to add dynamic content.”
Can anyone please tell how we can achieve so that based on condition, we can execute code for touch based and mouse based execution of app.
Just got it solved. Can come useful for others.
I Put following code on which i need to find which css i need to apply.
helloButton.addEventListener("MSPointerDown", buttonClickHandler, false);
Here is the function:
function buttonClickHandler(eventInfo) {
if (eventInfo.pointerType == eventInfo.MSPOINTER_TYPE_TOUCH) {
// Do something for touch input only
console.log('Touch');
} else {
// Do something for non-touch input
console.log('Mouse');
}
}
You can set your code as per condition.
Your assumption that the app will only have one input type for the duration of execution is a bad one -- I change between mouse, keyboard, and touch on my devices all the time.
That stated:
If you are dynamically adding Modernizr, just include the Modernizer as a script tag in your HTML rather than adding dynamically
You need to use Windows.Devices.Input.PointerDevice.GetPointerDevices(); to get the devices, and then see which ones support touch using the function in the link you provided. (Details here)
You can detect which type of device a specific input event was for (e.g. onmspointerup et al), by looking at the pointerType property on the event object.
I'm trying to make an extension for google chrome. It will automatically click on the speaker icon in the google dictionary's result to make it pronounces the word automatically.
http://www.google.com/dictionary?langpair=en|en&q=love&hl=en&aq=f
i'm using this code: document.getElementById("pronunciation").click()
however, i wonder why it doesn't work? actually tag does support the standard methods - as w3schools wrote: http://www.w3schools.com/jsref/dom_obj_object.asp
Can you suggest any method in order to make it works?
Since the object is flash, sending it a click event will not work unless Google built click support into the flash file -- which they apparently didn't.
However, the actual audio file is a parameter to the flash program, and linked to in a child node.
For the given example, it is: "http://www.gstatic.com/dictionary/static/sounds/de/0/love.mp3".
This can be obtained with:
var soundFile = document.querySelector ("#pronunciation a").href;
Then pass this file to a library, such as SoundManager 2, and your script can play it automatically (may your coworkers/family have mercy on your soul. :) ).
The play icon is a flash player.
Most likely the onclick event isn't on the stage (i don't know if that would even work with a click on the object) but on a element inside the flash.