Currently i have a bxSlider, which has a video on the second slide. I've got the video working inside of the slider fine with the video tag. But what I'm trying to do is get the video to play once the slide is active and current.
This is my current on slide after.
onSlideAfter: function(currentSlide, totalSlides, currentSlideHtmlObject){
$j(currentSlide).addClass('active-slide');
if(currentSlideHtmlObject == 1){
var video = document.getElementById("video");
console.log(video.play());
} else if(currentSlideHtmlObject == 2 || currentSlideHtmlObject == 0) {
$j('video')[0].currentTime = 0;
}
modifyDelay(currentSlideHtmlObject);
}
Ignore my console log, I was just seeing if the .play did anything. It doesn't. Yet the video doesn't seem to play once the slide shows. If i set the video to auto play it will work, but this just doesn't seem to work.
If I run:
document.getElementById("video").play();
I get the following: (which i don't fully understand).
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Thanks
You simply use the callback onSlideBefore(). More details in the source in the comments.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi BxSlider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.css" />
<style>
/* This centers the img and video */
img,
video {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<ul class="bx">
<li data-idx="0">
<img src="http://dummyimage.com/640x360/000/fff.png&text=1">
</li>
<li data-idx="1">
<!-- Set each video id so that it corresponds with the `data-idx`
So if slide <li> is data-idx="1", then video id="vid1"-->
<video id="vid1" class="vid" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>
</li>
<li data-idx="2">
<img src="http://dummyimage.com/640x360/000/fc0.png&text=3">
</li>
<li data-idx="3">
<img src="http://dummyimage.com/640x360/000/0ff.png&text=4">
</li>
<li data-idx="4">
<img src="http://dummyimage.com/640x360/000/b52.png&text=5">
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.js"></script>
<script>
var bx = $(".bx").bxSlider({
pager: false,
nextText: '',
prevText: '',
infiniteLoop: false,
/*
This callback will fire a function
before a slide completes it's
course to it's destination
*/
onSlideBefore: autoPlay
});
/*
This function just uses the `to` parameter
I put all of them there because bxSlider expects
them there, I have bad luck if I don't... don't ask:P
*/
function autoPlay($ele, from, to) {
/*
idx is the slide index number
if there is a video within
the slide then play it.
*/
var idx = parseInt(to, 10);
var vid = document.querySelector('#vid' + idx);
if (vid) {
vid.play();
}
}
</script>
</body>
</html>
If you're trying to get the 1st slide in the show to play you can do that using onSliderLoad() - and using a wrapper method to get both to work.
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
video: true,
onSliderLoad: autoPlay,
onSlideBefore: autoPlayWrapper
});
});
// Calls the autoPlay function with the index of the next slide
function autoPlayWrapper(asdf,asdf,index){
autoPlay(index);
}
// play the video in the slide at index
function autoPlay(index){
var idx = parseInt(index,10);
var vid = document.querySelector("#vid"+idx);
if(vid){
vid.play();
}
}
</script>
Related
I am working on a HTML page, and I want to have different images, and for each of them a popup video. Using a code (html, css, javascript) I can make this for one video: when I click on my image, a video opens in the same page.
But I need different videos for different pictures, and they all open the same first video. How can I direct each picture to a different video?
I have tried using variables in javascript, to connect the image to a video id, each with their own source (link to the video)
Now I tried to make different javascript functions for each video (numbered 1 and 2)
But they still open the same video
this is the java script code (where I added '1', I added '2' for the other one) (I also tried using the video id)
<script>
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
*lightbox_close1*();
}
}
function *lightbox_open1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function *lightbox_close1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
</script>
and this is what I have in html
<div id="light">
<a class="boxclose" id="boxclose" onclick="*lightbox_close1*();"></a>
<video id=**"V1"** width="600" controls>
<source src="10 Creamy Satisfying Pasta Dishes.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="*lightbox_close1*();"></div>
<div>
<a href="#" onclick="*lightbox_open1*();">
<div class="container">
<img src="Aperitive.jpg" alt="A" class="image" >
<div class="overlay">
<div class="text">Aperitive</div>
</div>
</div>
</a>
</div>
the other one is just the same but 2 instead of 1, the '**' are just for bolding
(I added image overlay in css)
I changed the code around a bit but the concept is the same I think. You want to change the source of the video when you click on another element. In this case an image.
You can put the video in a modal or pop-up window and set it to close on click. (this function is not included in the example)
All you need to do is to add another element to the unordered list and set the on click function to change to the video with the video element id in the arguments.
Full example below just plug your videos into the video1.mp4 and watch the magic happen.
<=========================================
Edited for clarification
=========================================>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Vid Stuff</title>
<style>
ul{
list-style: none;
text-align: center;
width: 50%;
border: 1px solid black;
}
li{
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
height: 100px;
cursor: pointer;
margin-right: 16px
}
</style>
<script>
//this function takes 2 arguments the video element id
//and the video source.
function changeVid(id, video){
//set the element for the change
var vid = document.querySelector('#' + id + ' source');
//change the source of the element
vid.src = video;
//load the video to play
document.querySelector('#' + id).load();
//logging purposes to see the change in action (optional)
console.log(document.querySelector('#' + id +' source').src);
}
</script>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video id="myvideo" controls>
<source src="video1.m4v" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul>
<!-- onclick of user set myvideo <video> to the video source specified -->
<li onclick="changeVid('myvideo', 'video1.m4v')" > Cat Video 1</li>
<li onclick="changeVid('myvideo', 'video2.m4v')" > Cat Video 2</li>
</ul>
</div>
</body>
</html>
I am building a slider of videos using flexslider and html5 video tag. How can I make the video autoplay when the slider item has a class of .flex-active-slide?
Any help is appreciated
Here is HTML:
<div class="flexslider_fade">
<ul class="slides">
<li><video onload=playVideo() onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
<source src="videos/myvideo.mp4" type='video/mp4' />
</video></li>
<li><video onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
<source src="videos/myvideo2.mp4" type='video/mp4' />
</video></li>
<li><video onplay=pauseslider() onpause=playslider() onended=resumeslider() controls preload="none" width="100%" height="100%">
<source src="videos/myvideo3.mp4" type='video/mp4' />
</video></li>
</ul>
and the JS:
$(window).load(function() {
$('.flexslider_fade').flexslider({
slideshow: true,
animation: "fade",
animationLoop: true,
video: true,
/* reload video on navigation */
before: function(){
$('video').each(function() {
$(this).get(0).load();
});
},
after: function(){
$('video').each(function() {
if($('.flexslider_fade li').hasClass('flex-active-slide')){
$(this).find('video').attr('autoplay', true);
}
});
}
});
});
function pauseslider() {
$('.flexslider_fade').flexslider("pause");
}
function playslider() {
$('.flexslider_fade').flexslider("play");
}
function resumeslider() {
$('.flexslider_fade').flexslider("next"); $('.flexslider_fade').flexslider("play");
}
Here is one way to accomplish what you need, basically when you are on the active slide, play the video. On before callback just reload video as you have right now. Below is a sample and link to a working example:
HTML:
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video controls id="myVideo1" src="test1.mp4" width="360"></video>
</li>
<li id="slide2"><video controls id="myVideo2" src="test2.mp4" width="360"></video></li>
</ul>
</div>
JS:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
video: true,
slideshow: true,
before: function(){
//reload video
$('video').each(function() {
$(this).get(0).load();
});
},
after: function(){
//get active id and set it
var active_id = $('.flex-active-slide').attr('id');
//check for which slide is active
if( active_id == "slide1"){
//play video and pause the slider
myVideo1.play();
$('.flexslider').flexslider("pause");
//on video ended go to next slide and play slider
myVideo1.onended = function(){
$('.flexslider').flexslider("next");
$('.flexslider').flexslider("play");
}
}
if( active_id == "slide2"){
//play video and pause the slider
myVideo2.play();
$('.flexslider').flexslider("pause");
//on video ended go to next slide and play slider
myVideo2.onended = function(){
$('.flexslider').flexslider("next");
$('.flexslider').flexslider("play");
}
}
},
});
});
Working sample here: https://jsfiddle.net/l33tstealth/L3m67fqe/51/
Sample derived from this answer on a another question: https://stackoverflow.com/a/28419557/7564143
Hope this information helps.
I have a probably small problem. Since i don't have controls on my html5 video (only play-pause button which is centered horizontally and vertically), it must be displayed again after the video was ended. I must to achieve that. But i don't know how, i've tried everything.
Here is my HTML:
<!-- Video placeholder -->
<div class="video-placeholder">
<!-- Video -->
<video class="video" controls poster="images/video-poster.png">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<!-- / Video -->
<!-- Play/Pause -->
<div class="play-pause"></div>
<!-- / Play/Pause -->
</div>
<!-- / Video placeholder -->
Here's the JavaScript (i've tried this so far, but it only "restart" video, but play-pause button is not showed):
// Video mechanism:
$( ".video" ).parent().click(function() {
if ( $(this).children( ".video" ).get(0).paused ) {
$(this).children( ".video" ).get(0).play();
$(this).children( ".play-pause" ).fadeOut();
} else {
$(this).children( ".video" ).get(0).pause();
$(this).children( ".play-pause" ).fadeIn();
}
});
// The end.
$( ".video" ).on( "ended", function() {
$(this).load();
});
// The end.
Every help is very appreciated!
Try this:
(function showPlayButton() {
if (document.getElementById('video-id').ended) {
document.getElementById('play-button-id').style.display = 'block';
}
setTimeout(showPlayButton, 1000);
})();
Fiddle Here
Is it possible to have javascript that pauses a slide containing video for that video to play to completion on a specific slide #N instead apply to any slide containing an <video>?
I currently have this code to pause the slide when it reaches #5 for this example:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if (currentSlide == 5) {
$('.sliderMain').slick('slickPause');
theVideo.play();
And this code to resume the slide once the video finishes playing:
document.getElementById('theVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.sliderMain').slick('slickPlay');
}
}
});
What I would like to do is include more videos in my slider and have the slider pause at each one to play the video instead of only on a specific slide like it is doing here:
if (currentSlide == 5) {
Slide 6 has a video but is not included in the above code for example. I would rather have the code detect if the slide has a video class for example.
This is a continuation of this question.
instead of
if (currentSlide == 5)
you can add an incremented class on each of your slides, and check what is inside in this if.
the html will looks like this:
<div class="slide1"><img src="http://placehold.it/900x500"></div>
<div class="slide2"><img src="http://placehold.it/900x500"></div>
<div class="slide3"><img src="http://placehold.it/900x500"></div>
<div class="slide4"><img src="http://placehold.it/900x500"></div>
<div class="slide5"><img src="http://placehold.it/900x500"></div>
<div class="slide6" id="slide-video">
<video width="900px" height="500px" class="theVideo">
<source src="http://vjs.zencdn.net/v/oceans.mp4" />
</video>
for example you ll do :
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if ($('.slide'+currentSlide+ ' video').length != 0){
$('.sliderMain').slick('slickPause');
theVideo.play();
}
});
You ll probably then know if you have a node video in your current slide.
hope this will help
I need a button that will resize a video on the webpage. The button must on first click make the video bigger, and on second click make the video smaller. I understand I need a variable to keep track of whether the video should be made bigger or smaller.
<!DOCTYPE html>
<html>
<head>
<title>Simple animations in HTML5</title>
</head>
<body>
<h2> Optical Illusion </h2>
<video id="illusion" width="640" height="480" controls>
<source src="Illusion_movie.ogg">
</video>
<div id="buttonbar">
<button onclick="changeSize()">Big/Small</button>
</div>
<p>
Watch the animation for 1 minute, staring at the centre of the image. Then look at something else near you.
For a few seconds everything will appear to distort.
Source: Wikipedia:Illusion movie
</p>
<script>
var myVideo=document.getElementById("illusion");
var togglesize = false
if togglesize == true
{
function changeSize()
{
myVideo.width=800;
togglesize = false;
}
}
else
{
function changeSize()
{
myVideo.width = 400;
togglesize = true;
}
}
</script>
</body>
</html>
Attache this function on click event;
var littleSize = false;
function changeSize()
{
myVideo.width = littleSize ? 800 : 400;
littleSize = !littleSize;//toggle boolean
}
http://jsfiddle.net/uNLHL/