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/
Related
I have a fullscreen background video running in a page using an html5 video tag to play a local hosted video there is a css nav menu running across the top. I want to launch another video fullscreen over the top of the existing video when a user clicks the menu. I have no idea how to do this. The video is running responsively using fitvid.js so I don't need to scale the video in this code. Can anyone help me?
You can easily change the background with some Javascript:
<script>
function changeBackground {
document.getElementsById("nav-Id");
onclick = "import your background video here"
}
</script>
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.
Now, I embed video from youtube and I have a trouble Which I can't draw anything (text, image, etc.) when video is fullscreen. So, what can I do to draw text or image (div) to show it when video fullscreen. I tried to use z-index, but it's not successful. I want to make new controller for my video player don't user youtube controller, but video was embed from youtube. So, when user user fullscreen mod, I want to show a div which contains control like play, pause, etc. I already use ?wmode=transparent but it's not work with fullscreen, It mean my controller not showed when I stay in fulscreen mode
You haven't given much information, but this website details what you require, I think.
http://www.electrictoolbox.com/div-layers-float-over-flash-vimeo-youtube/
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.
As it takes time for the video player to load the mp4 video, does HTML5 support playing a "loading" logo when loading the video ?
Since my asp.net apps is a mobile page, it needs the user to click on the video to play the video (android, iphone not support autoplay). So, I cannot make a "loading" logo as poster, otherwise, the user will be confused about it. I want to display a loading logo when user click play button on iPad.
thanks
Joe
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
Also a simple solution to add a preloader image while loading the video:
HTML:
<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">
the poster is a transparent image 1px.
CSS:
video {
background-image: url(images/preload_30x30.gif);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
}
Use the tag id poster
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
More info can be found http://www.w3schools.com/html5/att_video_poster.asp
You could probably do it with JavaScript by creating an image overlay with an animated "loading" gif which you only display when the video is loading and is not ready to play.
You'd have to write JavaScript to link up with the Media API for detecting when the video is ready to play and so forth though (so you could hide the image again), but it should be possible.
My solution was to add the following inside of the window.fbAsyncInit = function():
var finished_rendering = function() {
var el = document.querySelector('div#loading_msg');
el.style.display="none";
}
FB.Event.subscribe('xfbml.render', finished_rendering);
Found: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
Personally I think the most elegant way to do this is by using some code like this,
<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>
<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>
To make it even better you could use ontimeupdate instead of onplaying which would fire continuously.
As for the delay time actually not 1 but 4 seconds -to me- is the best.