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');
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 have a html 5 video on a page like this:
<video preload="none" id="movie" poster="http://my_poster_url.com/sourcefile.jpeg" controls>
<source id="mp4" type="video/mp4" src="http://my_mp4.com/sourcefile.mp4"></source>
<source id="webm" type="video/webm" src="http://my_webm.com/sourcefile.webm"></source>
</video>
Below that video I have a navigation where you can skip to different times in the video. It works perfectly when the video is playing, but when paused following error occurs:
InvalidStateError: An attempt was made to use an object that is not,
or is no longer, usable
Here the function:
$('#my_video_navigation a').click(function () {
var start_in_seconds=...//a variable that gets the time from a json based on the navigation index
$("#movie").get(0).currentTime = start_in_seconds;
$("#movie").get(0).play();
}
I added an if/else statement wether the video is paused or not:
if ($('#movie').get(0).paused) {
$("#movie").get(0).play();
}
and then tried to set the current time like above and even with a set timeout function so that it will wait till the video loaded and is playing but that didn't work. What am I doing wrong or what did I forget?
You should change the currentTime field of the media element, as you can see here in the API doc. There is also an example code here, at MDN
For reference, the sample code there:
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(); // Returns the starting time (in seconds)
mediaElement.seekable.end(); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(); // Returns the number of seconds the browser has played
where the mediaElementID is the id of the audio or video tag.
Edit: It seems I've misread your question. I will take a further look.
Im using a video as a background on one page of a site that did autoplayed until I plugged in the Razorfish / Parallax-JS from https://github.com/razorfish/Parallax-JS/
I can still right click the background and see the play option but No matter what I do I cannot get the video to autoplay anymore. Someone asked a similar question on GitHub but no answer.
My Video tag opens like this...
<video id="video_background" preload="auto" muted="" volume="0" autoplay >
I have tried all the following and many different variations but no luck...
document.getElementById("video_background").setAttribute('autoplay', true);
$("#video_background")[0].load();
$("#video_background")[0].play();
$("#video_background").get(0).play();
$('#video_background').attr({'autoplay':'true'});
Every other part of the plugin is working so it would be great if I could find a solution.
Try this
<video id="video_background" autoplay loop muted preload="auto">
You can work your way around it, by detecting page change and tell HTML5 player to play, when desired page is reached.
$(window).on('hashchange',function(){
if(document.URL.indexOf("#intel") >= 0){
var v = document.getElementsByTagName("video")[0];
v.play();
}
});