Inquiry
I am creating smooth transitions between pages via jQuery's .fade() effect. The second page (page2.html) contains HTML5 video elements (either .webm or .mp4 depending on the browser). How can I preload these movies prior to page2.html loading in order to eliminate the brief flash/blip indicating the location of the video element itself? (You know, the greyish screen showing precisely where the player is.)
To be clear, I am not asking how to eliminate the white flash between page loads; I simply want to have the video player ready and movies completely loaded before ever displaying page2.html itself.
Code Examples
AJAX fade transitioning:
$('#wrapper').fadeOut(2500, function() {
$(this).load('page2.html', function() {
$(this).fadeIn(2500);
});
});
HTML5 video from page2.html
<video id="example" preload="auto" autoplay="autoplay" loop="loop">
<source src="video/example.webm" type="video/webm" />
<source src="video/example.mp4" type="video/mp4" />
</video>
Thanks to Bart.
var loaded = false;
//If the video is loaded...
example.addEventListener("canplaythrough", function() {
//Make sure it only fires once
if (loaded == false) {
loaded = true;
//Fade in the content
$('#wrapper').fadeIn(2500);
}
});
Related
I'm working on a page that, on my client's request, loads playing a background soundtrack.
Of course it's just for those users who are not navigating with audio autoplay disabled.
So the simple piece of code used to start playing the music is something like the following:
<audio autoplay id="background-soundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
I'd like to make music stop (even better: make it fade out in a matter of a few seconds) as soon as the user clicks anywhere on the page -- it should work tapping on mobile devices too.
Can you please suggesitng me a smart way to achieve my goal?
It doesn't matter if it's pure JavaScript or jQuery.
Thanks!
try this jquery:
$('document').on('click','body',function(){
if ($('#background-soundtrack').paused == false){
$('#background-soundtrack').animate({volume: 0}, 1500,
//1500 duration time
function(){
$('#background-soundtrack').pause()
});
}
});
The HTML5 audio elements has the pause method, that you can use at "onClick" (work in touch too) event on body, document, window...
Like this (I delete the "-" in id):
document.onclick = function(e){
backgroundsoundtrack.pause();
}
<audio autoplay id="backgroundsoundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
I have two video files in my design. The first one is logo reveal animation and the second one is logo animation. I want to load the first video only when the page loads every time. And i want to load the second video after the first video ends.
Here my target is: 1st video plays when the page loads(only one time - every page load). If the first video ends, the second video will plays in the loop. I don't want to show the logo reveal(1st) again and again. How to do this. Hope i'll be getting the solution.
Here are the code i have.
HTML :
<video width="400" controls id="myVideo" autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
JS
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$("#myVideo")[0].load();
}
Demo : https://jsfiddle.net/jLa1s62w/
You almost got it.
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$('#myVideo').attr("loop", true); /* 1 */
$("#myVideo")[0].load();
document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */
}
1) Loop attribute so the second video loops.
2) Remove event listener so the video isn't replaced again.
https://jsfiddle.net/yuriy636/jLa1s62w/1/
Note: If you are using jQuery, you can also use jQuery's event method:
$('#myVideo').on('ended',myHandler) and $('#myVideo').off('ended',myHandler)
Thanks in advance for any help you're able to give. The issue I'm having is that the following code is in a javascript function when a button is clicked. The desired behavior is that on button click, a video fades in, plays for 10 seconds, and fades back out. Then when the button is clicked again, this behavior repeats.
Issue is, the second time the button is clicked, the video fades in but is already at the end of the video and then fades out after 10 seconds. Any idea why the vid.currentTime is not properly resetting the video?
var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();
vid.fadeToggle(1000);
setTimeout(function() {
vid.fadeToggle(1000);
}, 10000);
and this is where the video file is imported
<video id="video" width="100%" Style="Display:none">
<source id="src" src="src.webm" type="video/webm" />
</video>
Additional info has come to light. This only happens in Chrome, and doesn't happen even in Chrome when it's opened locally, only when the html page is served statically via express.
Try
vid.load(); instead of vid.currentTime = 0;
Maybe you can try to add autplay to the video attribute, but I think the video will start looping.
<video id="video" width="100%" Style="Display:none" autoplay>
OR you can add this function or javascript line to your button function.
vid.load();
source: http://www.w3schools.com/tags/av_met_load.asp
Figured out that this was only an issue in chrome and seems to have to do with this question:
can't seek html5 video or audio in chrome
I am using video.js, here is my DEMO
<video class="video-js vjs-default-skin" src="http://vjs.zencdn.net/v/oceans.mp4" controls="true" preload="yes" poster="http://www.videojs.com/img/poster.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
When I click on play button video starts to play, it is ok works how it should, but when I scroll down without pausing the video, it still plays. I want to add some script which will do this - onscroll it will autostart video and I will see the first look with poster image.
Also I have one button (named "Scroll to video section") which is under video section, when you click on button it scroll to the video section but it must show video's first look as well - paused and with poster image. I was wondering how can I do this.
Please find this JsFiddle which has the behaviours you appear to require.
The function below was added to pause the video when any scrolling occurs.
jQuery(document).scroll(function () {
jQuery(".video-js")[0].player.pause();
});
You can change the function called to .play(); if you want the video to play on scrolling.
Please refer to this discussion thread to understand the functions that make the video play and pause.
The code above has been changed to the 3rd code snippet listed below to allow additional functionality.
The function below plays the video 3000ms (3 seconds) after the "Show Video Section" button is clicked.
setTimeout(function () {
jQuery(".video-js")[0].player.play();
}, 3000);
The code below resets the video to show the "poster". The current time is stored in order to allow the video to restart from where the user left off.
Please refer to this Stackoverflow question for more details.
jQuery(document).scroll(function () {
var time = jQuery(".video-js")[0].player.currentTime();
jQuery(".video-js")[0].player.pause().currentTime(time).trigger('loadstart');
});
The code below was used to change the Js Fiddle to start the video at the beginning on the scroll event.
jQuery(".video-js")[0].player.pause().currentTime(0).trigger('loadstart');
I'm not sure if it's the structure of my code or there's something I'm missing in my code, however it's seems I am have a slightly slow loading with my html video in Safari. The video plays for at least 1sec before it's actually visible... is the a way I can create a delay before the video starts playing? click here
<video preload="auto" autoplay volume="3" id="video-wall__content">
<source src="video/ad.mp4" type="video/mp4">
<source src="video/ad.ogv" type="video/ogg">
</video>
I have added...
$(window).load(function () {
$(document.body).fadeIn(2000);
('#video-wall-wrapper').get(0).play();
});
Try this.
$(window).load(function () {
$(document.body).fadeIn(2000, function(){
('#video-wall-wrapper').get(0).play();
});
});
The video will start only when fadeIn is complete. As per specs, fadeIn accepts 2 arguments.
duration: A string or number determining how long the animation will run.
complete: A function to call once the animation is complete.
This is holds true for every async event in jQuery. You always have a way to provide callback functions.
<video preload="auto" autoplay volume="3" id="video-wall__content">
autoplay: Instructs the UA to automatically begin playback of the
video as soon as it can do so without stopping.
Source.
So yeah, that basically defies the whole sense of starting the video with jQuery.