I want to have a few HTML5 animations on one page but don't want them all to play at once/when the page loads. Instead I'd like for each animation to auto-play when a user scrolls to the section where each animation is. What is the appropriate tag, code, etc. to make that happen?
A couple of examples elsewhere:
nest.com/living-with-nest/
- When you scroll down to day 2 the blue and orange arrows animate in
apple.com/ipad/features/
- When you scroll down to the camera section, the lens video/vr plays
- Same with the Smart Cover, Airplay and other sections
Thanks!
Different parts in your question :
Have html5 animations : use the video element
not start animations immediately : simply don't specify autoplay
start the video :
document.getElementById('myVideo').play();
check if an element is visible : using jquery you can simply use offset().top, window.innerHeight and scrollTop :
var visible =
$(window).scrollTop()+window.innerHeight>$e.offset().top
&&$(window).scrollTop()<$e.offset().top+$e.height(); // $e is the video element
detect scrolling : use the jquery scroll function
I made a fiddle to illustrate how you can detect when the scrolling reveals or hides an element : http://jsfiddle.net/dystroy/zj5Sz/
Note: This answer is specific to Animate CC(Flash) generated HTML5 projects as you mentioned in the comment
There is now a quick and easy way of controlling such settings using Animate CC & Muse 2017.
Export your Animation as an OAM file or upload the animation to CC Libraries,.
Open your website in Muse.
Import the OAM file or use the Animation from CC libraries in Muse. Place it at the appropriate position.
Open Scroll Effects Panel in Muse -> goto Animation tab -> select Animation checkbox and Autoplay selected.
Preview the webpage in browser and it should play only when you scroll down and canvas comes in view.
Related
I'm looking to build a microsite that has a fullscreen 360 video. I've been doing some research but can't seem to find the answer. Is it possible to have a full screen 360 video using JWPlayer, Bitmovin or another HTML5 player with static navigation elements on top if it? I think it would be feasible by changing the z index of the top element but haven't been able to verify this. Thank you.
Bitmovin Player does support this use case either through the Player API (your own controls that control the player through JavaScript) or by modifying the player Skin (available in Bitmovin-Player v7).
So let's say you want to overlay a Play button over the video you would just define a element that then calls .play() on the player instance.
$('.play-button').click(function () {
player.play();
});
The button can then easily be skinned and placed above the player with CSS.
Although changing the viewport is not supported through the API or the Controls. These get handled by touch-controls on the Video element (or the device gyro).
I have a webapp written in HTML5.
The Home page contains a <video> tag.
The video is correctly played when I load the page for the first time, and if I use controls (pause, play, fullscreen) too.
In order to maintain the webapp always in the fullscreen view, I used only one html page, and when a button (or an anchor) is clicked, I hide the container div (representing the content of the logical "home page"), and show the selected one, when the "home" button is played I show again the original container div.
Originally, the video continued playing when I clicked a button to pass to another virtual page, so I pause it by jquery.
The problem is: only on iPad, when I come back to the first container (that means the home page), the video is no more available, I can't see the poster and the video itself, and the div is black screen.
Some notes I hope could restrict the problem:
The video is statically loaded in a <video> tag and source
attribute.
I've tried to start with an empty src and load it by
jQuery (as explained in many tutorials and in stackoverflow too), it's the same.
The same if I try to create a playlist in
which I select different videos and load the selected one in the
<video> tag using Javascript.
I also tried to reload the page with jQuery, but doesn't work.
The constant beahviours are the following:
Every technique I tried to implement is working well on PC with
Firefox and on the Mac with Safari.
The problem on the iPad appears only when I try to come back to the initial page.
I'm not convinced the problem depends on the technique of show/hide I used, but on the iPad behaviour. I've read some other ways to maintain the webapp in fullscreen view, but apply only to <a> tags (such as this:), I need div stylized as buttons (and managed in jQuery) too.
Thanks if someone can help
I think if you use flowplayer is better it is good implementaton that it work on IPhone and Andriod, it is free.
How do I force a video to play over an image when clicking the image thumbnail, and simultaneously scroll back to the top where the player is?
My issue and the context: I am working on a big photographic and video project and for that I decided to (try to... :) I'm not a programmer) build and launch a customized web TV entirely within a Google Blogger blog.
Everything works fine and look beautiful but I decided to fake a customized player (that is actually just a JPEG image) at the exact same place where the player is playing.
The player is working well, but it is playing underneath the image (fake player), so you will hear the sound from player but will not see the video. I would like to know how to force my player to play over this image.
Here is the link of the web TV: http://montreal-images-tv.blogspot.com/
My second issue is that when clicking the thumbnails, the site is supposed to go back to the top to see the player area, but it doesn't work very well!... :(
How can I force the site to scroll automatically to the top when clicking the thumbnails?
PS: I have already tried code like href="#top" with an anchor and it didn't work!
Have you tried adding a z-value to the video container? (higher than the image) eg. z-value for image is 1 and z-value for video is 2.
#video {
z-value:2;
}
#image {
z-value:1;
}
As for the scrolling, I'd try use a little jquery as it has a really nice effect.
$('.clickedClass').click(
function(){
$('html, body').animate({
scrollTop: '0px'
}, 'slow');
});
Any element with the class 'clickedClass', when clicked, will scroll to the top of the page.
UPDATE: here's a jsfiddle for the scrolling: http://jsfiddle.net/CMQNT/
I want to use the Charmless youtube player in my application and I want to remove youtube logo from the Player. How can i achieve this thing? My application is developed using AS3.
Simply add ?modestbranding=1 to the end of your URL.
See more here.
modestbranding (supported players: AS3, HTML5)
This parameter lets you use a YouTube player that does not show a YouTube logo.
Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar.
Note that a small YouTube text label will still display in the upper-right corner of a paused
video when the user's mouse pointer hovers over the player.
try this API player code.
http://www.youtube.com/apiplayer?version=3&modestbranding=1&showinfo=1
Chromeless player, the modestbranding has no effect unless "showinfo=1" is must for API player.
I tried to remove youtube logo by many ways. But I didn't get success to remove it from the youtube player.
Finally I check the youtube player functionality and behavior. When video is attached to the player then it will be displayed in center. if player container height is bigger then video height so both (top and bottom) side Black strip will be appeared. Just we have to hide the Black Strip from the user display area using masking concept. (In Flash we can apply the mask to container and same thing will be done using the DOM model in Javascript.)
In directly it will be removed as per end user perspective not actually. so Indirect way youtube logo is removed from the player.
you can try GKPlugin this plugin using JWPlayer 5.x at:
https://drive.google.com/folderview?id=0B0OhZLpuvlSRTDZLMXowQWNMZTA#list
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.