I'm using VideoJS to play a video on a web page.
I would like, at the end of the video to execute a java script in oder to hide the video DIV and display a other DIV.
Is somebody could help me to do this?
Maximilien
Use the video.js API
videojs('my_video_1').on('ended',function() {
// do something
})
Thank you misterben you solution is working fine.
I did the following to adapt to what I had:
<video id="video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="800" height="450"
poster="images/fond.png" data-setup='{}'>
<source src="video/video.mp4" type="video/mp4" />
<source src="video/video.webm" type="video/webm" />
<source src="video/video.ogv" type="video/ogg" />
</video>
<div id="replacingdiv">
<img class="replacingimg" src="./images/invitation.png" alt="Invitation" />
</div>
videojs("video").ready(function() {
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
function resizeVideoJS() {
// Get the parent element's actual width
var width = $(window).width();
if ( width < 800) {
myPlayer.width(width - 10).height( (width -10) * aspectRatio );
$('.replacingimg').width(width - 10).height( (width -10) * aspectRatio);
}
}
myPlayer.on('ended',function() {
$('#video').delay( 2000 ).fadeOut( "slow" , function() {
$('#replacingdiv').fadeIn("slow");
});
});
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
<body>
<div class="vidBox" id="box">
<div class="wrapper">
<div class="videocontent">
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="posterWTA.png"
data-setup={}>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<track kind="subtitles" src="Subtitle.srt" srclang="en" label="01"></track>
<track kind="subtitles" src="Subtitle_2.srt" srclang="en" label="02"></track>
</video>
</div>
</div>
<div id="other" style="display:none; width:400px; height:300px; background-color:#f0f0f0">
This appears after the video ends
</div>
</div>
<script>
var vid=document.getElementById('my_video_1');
vid.addEventListener("ended", hideVideo, false);
function hideVideo() {
var vid=document.getElementById('my_video_1');
var other=document.getElementById('other');
vid.removeEventListener("ended", hideVideo, false);
vid.style.display='none';
other.style.display='block';
}
</script>
Related
I have a problem with my javascript code, maybe you can find what I'm doing wrong. My Play() event does not do what I want.
I want to "re-make" a page of the ferrari site with an onmouseover event. This code is written with a HTML widget inside of elementor, maybe is that the reason why something isn't working.
Hope to hear from you!
My code;
<div class="wrapper1" >
<video id="Hvideo" width="320" height="240" preload="auto">
<source src="https://www.youtube.com/watch?v=HJVHZR3KkjM" type="video/mp4">
</video>
<button id="Htext" onmouseover="Play()" onmouseout="Pause()">HVAC</button>
</div>
<script type="text/javascript">
var Htext=document.getElemenetById("Htext");
var Hvideo=document.getElemenetById("Hvideo");
function Pause(){
Hvideo.pause();
}
function Play(){
if(Hvideo.paused)
Hvideo.play();
}
</script>
image
www.ferrari.com
Having an issue that has been frustrating me the last few days.
I have some videos on a site that are loaded dynamically from sitecore, and display on a page with thumbnail images. When you click those images you are taken to a lightbox with the video.
The problem is, the video plays in Chrome, Firefox and IE8 -, but not IE9 +. I thought it may be an encoding issue, but I have converted this video so many times to every format available to the web to no avail.
I am setting the plugin to load the video as flash first, then if flash isn't available, load as html5. This will clear all worries in terms of browser support of HTML5 video.
I was thinking that it may be the lightbox and videoJS plugin fighting with each other, or the fact that i am hiding videos and showing them, which i know can sometimes cause issues. I have decided to use a different lightbox, and people seem to have said that colorbox is a decent one to use with videoJS, especially since it has some built in callbacks onLoad.
On to the problem and the code:
The problem:
This lightbox is working, but videoJS seems to throw a few errors when i try and reset the player, which is breaking the videos in IE since its such a dumb browser.
As you can see in the demo link at the bottom, the videos play in IE just fine when they are just set on the page, but when you open the lightbox by pressing "vid1" or "vid2" you are riddled with console errors and the videos no longer play.
The code:
HTML + jScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script>
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<link type="text/css" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".inline", this).colorbox({
inline: true,
rel: 'videohook',
width: '650px',
onLoad: function() {
//grab the video ID and store it
var vidID = $(this).attr("data-vidID");
//Reset the video players
videojs.players = {};
//set the videoJS player for this video.
videojs(vidID);
}
});
});
</script>
<a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
<a rel="videohook" data-vidID="my_video_2" class="inline" href="#video_2">vid 2</a>
<div id="video_1" class="video">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" poster=""
data-setup='{"techOrder": ["flash", "html5"]}'>
<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/ogv'>
</video>
</div>
<div id="video_2" class="video">
<video id="my_video_2" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" poster=""
data-setup='{"techOrder": ["flash", "html5"]}'>
<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/ogv'>
</video>
</div>
</body>
</html>
Console errors im getting:
Uncaught TypeError: Object #<HTMLObjectElement> has no method 'vjs_getProperty'
LIVE DEMO:
Go here to see the errors for yourself: http://kodistro.com
In this case, my solution is to inject the video tag HTML into the lightbox content (when opening) and then call videojs().
So, in pseudo-code:
<script type="text/javascript">
$(document).ready(function() {
$(".inline", this).colorbox({
inline: true,
rel: 'videohook',
width: '650px',
height: '274', //the size most be fixed
onLoad: function() {
var appendVideo1 = '<video id="my_video_1"......> </video>'; //insert the <video> tag. Note.Remove attribute data-setup='{"techOrder": ["flash", "html5"]}'
$("video_1").append(appendVideo1);
},
onComplete: function() {
videojs(my_video_1); //initialize video-js
},
onClosed: function() {
videojs(my_video_1).dispose(); //destroy video-js
}
});
});
</script>
<a rel="videohook" data-vidID="my_video_1" class="inline" href="#video_1">vid 1</a>
<div id="video_1" class="video">
</div>
video.js Hello. I'm trying to have a video autoplay when slider starts. That part is working. Problem occurs though when it loops through and comes back to the video, the video will not replay. I've tried to figure it out with a loop="true" but if I do that it just plays video over and over and then slider doesn't work. Any advice? Thanks! (I can add my code if needed)
<meta charset="utf-8">
<title>AnythingSlider Video Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>
<!-- Anything Slider -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>
<script>
// DOM Ready
$(function(){
$('#slider')
.anythingSlider({
resizeContents : true,
autoPlay : true,
addWmodeToObject : 'opaque',
buildStartStop: false,
navigationFormatter : function(index, panel){ // Format navigation labels with text
return [][index - 1];
}
})
// Initialize video extension
// see https://developers.google.com/youtube /player_parameters?hl=en#Parameters for a list of parameters
.anythingSliderVideo({
startPanel : 1,
// video id prefix; suffix from
$.fn.anythingSliderVideo.videoIndex
videoId : 'asvideo',
// auto load YouTube api script
youtubeAutoLoad : false,
wmode: 'transparent&autoplay=1', // (hack) add autoplay code here
// see: https://developers.google.com/youtube /player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,
fs : 1
}
});
});
</script>
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<!-- START AnythingSlider -->
<ul id="slider">
<!-- HTML5 Video -->
<li class="panel5">
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" autoplay="true" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
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' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English">
</track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
</li>
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul> <!-- END AnythingSlider -->
<br>
</div>
<br>
You can add the autoplay parameter of the <video> tag to "autoplay" instead of true. This worked for me using Anything Slider.
Really don't know what's wrong with my code! I'm tryng to attach the end event to my player by i get this error in my firefox console:
"TypeError: this.addEvent is not a function"
I tried in so many way, but coudnt solve this problem!
<!DOCTYPE html>
<html>
<head>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>_V_.options.flash.swf = "video-js.swf";</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="400" height="500" data-setup='{}'
poster="http://video-js.zencoder.com/oceans-clip.png">
<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' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>
<script>
var myPlayer = videojs("example_video_1");
videojs("example_video_1").ready(function(){
var myPlayer = this;
var videoEnd = function(){
console.log('ended')
};
myPlayer.addEvent("ended", videoEnd);
});
</script>
</body>
</html>
Can u help me please?
thanks a lot
video.js has recently been updated to version 4 and some things in the API have changed. You'll need to use myPlayer.on("ended", videoEnd);
API docs: https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md
Has anyone been able to create a full-screen overlay using Video.js player? We are looking for a way to display a div over the video, and have it available even when in full-screen mode.
This is what I've done on a recent project using JQuery UI dialogs, but the solution applies to whatever element you want to display over the video.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#overlay').dialog({
width: $(window).width() * .8,
height: 100,
position: { my: "center", at: "bottom", of: window },
autoOpen: false,
zIndex: 2147483647
});
});
int = setInterval(function(){checkNews()},checkNewsInterval);
function checkNews() {
var url = 'news.php';
$('#overlay').load(url, function() {
$('#overlay').dialog('open');
return false;
}
</script>
<body>
<div id="video-container">
<video id="myvideo" class="video-js vjs-default-skin" controls
preload="auto" poster="" data-setup="{}">
<source src="<you_video_source>" type='video/mp4'></source>
<param name="allowfullscreen" value="true" />
</video>
</div>
<div id="overlay"></div>
</body
</html>
The trick being the property:
zIndex: 2147483647
either set in the dialog setup or as a CSS in:
#overlay {
z-index: 2147483647;
}