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.
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)
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 have an HTML5 video that I want to play/pause when you click anywhere on the video. The code I wrote below works, but if I click the video a few times it starts to get slow and will even freeze sometimes. I saved the selectors in variables hoping that would take care of the issue, but it hasn't made a noticeable difference. Is there a bug in my code that I'm not seeing and the console isn't detecting? Or is there just a better way to write this so it isn't so slow? By the way, the intro-vid ID is on the <video> element in the HTML.
var $video = $('video')[0];
var $introVid = $('#intro-vid');
// If the video is playing, pause it when clicked
$introVid.on('play', function() {
$introVid.click(function() {
$video.pause();
});
});
// If the video is paused, play it when clicked
$introVid.on('pause', function() {
$introVid.click(function() {
$video.play();
});
});
EDIT: Here is the HTML
<video id="intro-vid" controls>
<source src="placeholder.mp4" type="video/mp4">
<source src="placeholder.webm" type="video/webm">
Your browser does not support the video tag.
</video>
You should not bind event handlers inside of other handlers, this way them quickly multiply causing troubles. Try this instead:
var $video = $('video')[0];
var $introVid = $('#intro-vid');
$introVid.click(function () {
$video.paused ? $video.play() : $video.pause();
});
Is there a way to cleanly stop the html5 video playback ?
There are options like:
Set videoElement.src = "" . This throws an error on the video element, with code = 4.
OR
call videoElement.load(). This sets the readyState = 0 but there is not much documentation around it.
UX Perspective
Looking on Google for the difference between pause and stop gave me various results which I can summrize as:
Pause: Playback is stopped. Hitting play again continues from last position.
Stop: Playback is stopped. Hitting play again continues from beginning
At least from the UX point of view that covers all grounds
Stopping of loading of media
If your real goal is to stop the buffering process from happening as well, then your current approach seems to be entirely correct, running the following code is not triggering any errors for me in any browser I tried.
var video = document.querySelector("video");
video.play();
setTimeout(function() {
video.pause(0);
video.setAttribute("src", "");
}, 5000);
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png" style="height:180px">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>