I'm using the video.js plugin and have a video intro that plays when my site loads. It works by autoplaying as soon as the page loads and it is in a div container that is z-indexed and overlayed over my home page.
I have jquery set to delay() and then fadeOut() the div out revealing my home page.
Good in theory only everyone has different connection speeds and the fadeOut() often happens too early or too late.
Is there a way to fadeOut() my div when the video has stopped?
Here is my jQuery:
$(document).ready(function() {
$("#overlay-video").delay(10000).fadeOut('slow');
});
EDIT: I have also just tried the following but this also does not work:
$(document).ready(function(){
$("#movie-id").bind('ended', function(){
alert("planet earth");
});
});
Thanks for the replies my HTML looks like this:
<div id="overlay-video">
<!-- Begin Video.js -->
<video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
<!-- End Video.js -->
</div>
My jQuery is working because I can fadeOut the video element fine.
Couple things:
only a single doc.ready fxn is needed for all your scripts on your home page
use the on() method (with jQuery 1.7+)
Most importantly, fadeOut() needs to be inside the on('ended') function
As a general HTML5 <video> solution, this should work: http://jsfiddle.net/trpeters1/XzCMb/1/
$(document).ready(function(){
$("#movie-id").on('ended', function() {
console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
});
});
However, Video-js appears to require a call to the video.js object, so do this instead: http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video
_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
this.addEvent("ended", function(){ //adding "ended" event to video-js object
{ console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
}
});
});
Related
I've made a jquery script to pause the background music on click a video but it don't work. Can anyone help me?Here's my javascript:
<script src="../style/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#trailer").click(
function(){
$("#bgm").get(0).pause();
}
)
}
);
</script>
Here's my HTML:
<video height="340" width="864.5" id="trailer" onclick="goFullscreen('trailer');">
<source src="video.mp4" type="video/mp4">
</video>
<embed src="sound.mp3" hidden="true" autostart="true" loop="true" id="bgm"></embed>
Anyway, my embed mp3 can't loop too, can anyone correct it for me?THKS.
probably the embed element does not have the HTMLMediaElement interface which includes the pause() method. you can use the HTMLAudioElement <audio> instead.
than: access the audio element directly from your click event handler.
$("#bgm").pause();
my HTML5 video autoplay is not working.
<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">
I also tried without the ="true" value, and it doesn't work either. I've already used the same code in other sites and it worked just fine.
I'm using a framework based on fullPage.js, but i looked for something related on the files and didn't find anything.
The site is at http://agenciamilk.com/site/2/ if you wanna take a look. Thanks
You should use the afterRender callback the fullpage.js plugin offers.
afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).
You can take a look at a live example here or you can even find it in the examples folder of the fullpage.js download.
And you can easily see the source code its using:
$(document).ready(function () {
$('#fullpage').fullpage({
verticalCentered: true,
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
afterRender: function () {
//playing the video
$('video').get(0).play();
}
});
});
UPDATE
This is no longer necessary in fullpage.js > 2.6.6.
It will automatically play the video when accessing the section as far as it has the tag autoplay in it:
<video autoplay loop muted controls="false" id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
In case you only want to play it on section load (not on page load) use data-autoplay.
More info at the documentation.
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
Mentions here in the "Differences Between HTML and XHTML" section.
Sorry I don't have enough rep to just comment yet. You tried:
autoplay="autoplay"
?
You can use the "isInViewport" plugin (linked below) to find out which video is currently in the viewport and execute some js code accordingly.
$(function () {
$('#fullpage').fullpage({
verticalCentered: true,
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
afterRender: function () {
$('video').each(function () {
if ($(this).is(":in-viewport")) {
$(this)[0].play();
}
}
});
});
Bare in mind that looping through every video element is not the most efficient method to employ, but this should be enough to get you started.
jQuery plugin: isInViewport
Or you can just use autoplay property, something like
<video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
//----use just this one---^
I have the following javascript executes when the video tag has loaded via ajax, as suggested at the bottom of the following link https://github.com/videojs/video.js/blob/master/docs/setup.md
<video id="video-1" style="max-width:90%; height:auto">
<source src="/link/to/video.mp4" type="video/mp4">
</video>
_V_("video-1", {controls:true}, function(){});
and this javascript basically breaks the controls and render it as text as below:
Play
Fullscreen
0:00
0:05
-0:05
Loaded: 0%
Progress: 0%
00:00
Mute
if I take out the options for controls as below and it works
_V_("video-1", {}, function(){});
I have the javascript library and css in the head element
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Looks like I need to add the class into the video tag
<video id="video-1" class="vjs-default-skin">
I followed the quick-start guide for videojs and placed the following code inside the body of my html document:
<video id="video" class="video-js vjs-default-skin" controls width="941"
height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
All works fine. Autoplay and controls in place.
As I needed to remove the video when the video ends I placed the following code right after the video tag:
<script type="text/javascript">
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
The problem is that everytime I try to detect some video the autoplay doesn't work anymore. Even the following doesn't trigger autoplay:
<script type="text/javascript">
_V_("video").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
Any idea on how I can keep the autoplay and listen to the ended event?
Well, I'm not sure if this is the most correct implementation but:
<video id="video" class="video-js vjs-default-skin" controls
width="941" height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
<script type="text/javascript">
interval = setInterval(videoLoaded, 100);
function videoEnd(){
$('#someid').slideToggle("slow");
setTimeout("$('#someid').remove()", 700);
}
function videoLoaded(){
if(!_V_.players.video){
return false;
}
_V_.players.video.play();
_V_.players.video.addEvent("ended", videoEnd);
clearInterval(interval);
}
</script>
From what I have read, the alternative is to load the video through js only.
This is a problem (from what I read) with the way videojs initializes the video objects. More details can be found here.
Hope it helps some bumper :)
actually better is to start videoLoaded function using setTimeout function, because you can not control your player (if you will need it).
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me