I'm working on children's products and we have audio playback on click, mouseenter and focus for a lot of navigation and interactive elements for children who can't read.
But if a screen reader or other accessible tool is on this audio can be distracting and get in the way, overlap with the tool's audio and so on.
Is there any standard practice or method of getting around this?
I know I can't really detect if a user is using an accessibility tool but I don't really know what my options are.
You have to put a button on the top of the page to disable all sounds and keep the user choice in session.
The WCAG 2 requirement for self playing audio is that if it plays for more than 3 seconds, you must supply a control to pause/stop the audio.
https://www.w3.org/TR/WCAG20/#visual-audio-contrast
In addition, you should have a mechanism for choosing to not have any sound effects.
Related
After some time of inactivity my laptop screen will darken and then turn off, as specified by my power saving settings. However if a YouTube video is playing then this doesn't happen. So either youtube.com is preventing this or my OS disables this power save feature when a webpage is playing a video.
I'm making a web application exercise timer. As the user is exercising when using it, they don't touch the mouse or keyboard meaning that the energy save kicks in and turns off the display. From test usage I can say this is very annoying!
How can I disable this behaviour while a exercise timer is running? I suppose I could hack it with a hidden video playing in the background but I was hoping for a better solution.
This question is a duplicate of: Can I prevent phone from sleep on a webpage
However it's a bit out of date, there is now a Wake Lock API but it's still experimental: http://boiler23.github.io/screen-wake/
Ive decided to go with a library, this seems the most popular: https://github.com/richtr/NoSleep.js
i'm searching for a long time a solution for my necessities but i can't find anything help me.
Well, i have a html5 player with a video (with exception, if not support, use flash) i wanna insert a banner into this video at a certain time and for a certain duration, full screen and normal size.
what javascript code should i use?
the html should be easy:
div
banner (hidden)
video
/div
what javascript code should i use?
2° Question: i always have this player, i want that when the user click for the first time on play, happen something, like open an full size image, or open a video, ecc.
I not found so much on internet about advertising and coding, and i'm not very good with javascript.
So, i hope some one there can help me, thank you.
Display your ad image on page load and ask user to click to play video.
Load your video with a proper player plugin
Start playing video
Continuously check video duration using player API
At a specific duration like (15th second) display and overlay div on top of your video
Done.
Also if you're not that good with javascript probably it's better to start with something less complicated.
I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.
I am making a digital storytelling which is a website containing images and audio tracks. I came across skrollr today and found it interesting. Now I am wondering if anybody knows a solution to using skrollr with audio tracks - so that the audio will stop and start based on the scroll-position. I appreciate all ideas and creative thoughts.
Link to skrollr: https://github.com/Prinzhorn/skrollr
Skrollr only animates changes in CSS. You'll need to use javascript to do what you want.
This is easy enough to do with jQuery. Set an event handler to watch for scroll events, then check if the document is scrolled within particular bounds, then do whatever you want (e.g. play/pause audio). There are a million solutions for playing audio. I'd recommend howler.js.
What's the best way to show an animation from after effects on a website onload?
It needs to play like a load screen in all major browsers and iOS devices.
What's the best way to show this?
I tried html5 and the auto play didn't work on iPad. I don't want to use flash. The animation is too complex for just JavaScript. Is it worth trying to make a high quality animated GIF?
Well, your main problem with virtually any onload video is going to be load and buffer time, especially on a mobile device. If the splash screen takes half a minute to load, the experience will be very subpar, and there's virtually nothing you can really do to reduce that load time short of making the video low quality (a large animated gif will have the same problem).
My recommendation would be to try coding the animation using pure HTML5 animation effects if possible. They will render faster, use only static images, javascript and CSS, and will be more widely compatible with modern desktop and mobile browsers.
Unfortunately, it is not possible to auto-play html5 video on an iOS device. At least as of iOS 5, Apple has disabled both auto-play and pre-loading, presumably to save bandwidth for users who may be on limited or expensive mobile data plans.
Unless you're willing to skip the video, the only workaround is to get the visitor to click or touch something on the page. Mobile Safari will allow you to play a video using Javascript methods (as opposed to the native player controls), but the first call to .play() has to come from a "click" or "touch" event handler.
You can limit this requirement to iPads and still allow desktop browsers to auto-play, but there doesn't appear to be any kind of reliable feature-detection method, so you have to parse the User Agent string (navigator.userAgent).
There isn't much documentation on the strange, non-standard things Mobile Safari does with video, but this article has some very good, detailed information and some code samples:
http://blog.millermedeiros.com/html5-video-issues-on-the-ipad-and-how-to-solve-them/
Edit: And then there's this elaborate and absurd workaround that Apple uses on its own site.
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI