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.
Related
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'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.
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'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing
Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.
Is there any way to emulate this kind of 360 degree product view scroll/drag functionality with video, so taking a piece of video and being able to scroll it left and right as though it was a set of images? I've found this tutorial which is about the 360langstrasse.sf.tv/page/ site which is pretty interesting, but it's pretty custom to their specific needs and pretty complex. Is there any way to just take some video and have the kind of left/right scroll/drag functionality that you would get with an image-based 360 degree script? I would just like a little video to load in a placeholder, and then you can drag it left and right.
I've thought about converting frames to jpegs and then stitching them into a panorama, but that gets very big very quickly. Would prefer a video solution, where one can just drag the video itself.
You could shoot the video of the object spinning. Then play it forwards for spinning one way and reverse for spinning another.
Using 2 videos could also work - one for spinning one way and the other video the opposite way.
This is possible in Flash but I'm not sure about HTML5 video across browser vendors.
Is it possible to play HTML5 video in reverse?