I have a youtube video slideshow which gets populated with the use of a template:
<script id="tFlowplayer" type="text/html">
<div class="rv" id="{{name}}">
<iframe class="{{id_v}}" width="575" height="323" src="{{id_v}}" frameborder="0" allowfullscreen></iframe>
</div>
</script>
when I click on next or prev I need to stop the current youtube embedded video playing:
<nav class="arrows">
<button data-goto="prev" class="arrow arrow-left" rel="prev">Prev</button>
<button data-goto="next" class="arrow arrow-right" rel="next">Next</button>
</nav>
The following is the click event for the navigation, I guess this where the action will be happening:
$('[data-goto]').on('click', function (evt) {
var $this = $(this),
where = $this.attr('data-goto'),
video_id = $('[data-play]').attr('data-id');
if (where === 'prev') {
swiper.prev();
} else {
swiper.next();
}
});
Related
I use videojs plugin to customize a video player.
I have 30 modals with one different video in each modal (Youtube, Dailymotion, Vimeo).
I added two buttons next/prev to pass between each modal (modal always open).
All work fine. Each video is well displayed.
But I have two problems :
Each time I switch on a new modal is displayed the video is automatically played.
When I close a modal the video continue to be played.
For the excerpt of my code I used the ID #popin-1 but each modal have a different ID id="popin-1", id="popin-2", id="popin-3", id="popin-4"
The links of each modal look like this :
Open my modal
The HTML code of each modal :
<div id="popin-1" class="popin__item">
<div class="popin__wrapper btn-action">
<div class="popin__inner">
<div class="popin__canva">
<div class="popin__video">
<div class="popin__video-container">
<video
id="vid-1"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
width="640" height="264"
data-setup='{ "techOrder": ["youtube"], "autoplay": true, "fluid": true, "sources": [{ "type": "video/youtube", "src": "http://my-video-url.com"}] }'
>
</video>
</div>
</div>
<div class="popin__content">
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
And finally my js function. I tried
$('.btn-open').each(function(i, el) {
var modal = $('#' + $(el).attr('data-modal'));
var overlay = $('.popin__overlay');
var close = $('.btn-action');
var player = videojs('popin__item');
function removeModal() {
modal.removeClass('show');
overlay.removeClass('show');
$('body').removeClass('no-overflow');
modal.player.pause();
}
function removeModalHandler() {
removeModal();
}
$(el).click(function(e) {
e.preventDefault();
modal.addClass('show');
overlay.addClass('show');
$('body').addClass('no-overflow');
});
close.click(function(e) {
if($(e.target).hasClass('btn-action')) {
e.preventDefault();
removeModalHandler();
}
});
});
If you are using bootstrap modal you should be able to use this code.
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
https://getbootstrap.com/docs/4.0/components/modal/#events
CONTEXT:
The page has multiple videos
Each video on the page is previewed on mouseover (done)
When mouseover on video, the overlay button appears for each video (done)
When mouseover on overlay button, video preview continues to play (or restart) --> can’t figure this one out
I GetElementsByClassName , save into variable and then loop through all videos on the page and adding EventListeners with appropriate play() / pause() functions -> works just fine for 'mouseover' video previews.
The moment I 'mouseover' on the button, video stops and I get "Uncaught TypeError: e.target.play is not a function at HTMLDivElement.videoPlay" error in my console.
When I do a test in my console, I can play each video using the appropriate index in the following:
buttons[0].nextElementSibling.play()
But for some reason, I can't make it work in the function.
Any ideas on how to make it work?
HTML
<div>
<!-- Video segment -->
<div class="vid-segment">
<a class="vid-btn" href="#">
<i class="fa fa-shopping-cart"></i>
<span>Add to cart</span>
</a>
<video class="video-preview" witdh="352" height="198" muted>
<source src="static/videos/video1.mov" type="video/mp4">
</video>
</div>
<!-- Video segment end -->
<!-- Video segment -->
<div class="vid-segment">
<a class="vid-btn" href="#">
<i class="fa fa-shopping-cart"></i>
<span>Add to cart</span>
</a>
<video class="video-preview" witdh="352" height="198" muted>
<source src="static/videos/video1.mov" type="video/mp4">
</video>
</div>
<!-- Video segment end -->
JavaScript
function videoPlay() {
loop = true;
play()
console.log("Video plays")
}
function videoStop() {
currentTime = 0;
pause()
console.log("Video stops")
}
const videos = document.getElementsByClassName('.vid-segment')
const buttons = document.getElementsByClassName('.vid-btn')
for(var i = 0; i < videos.length; i++) {
videos[i].addEventListener('mouseover', videoPlay);
videos[i].addEventListener('mouseout', videoStop);
buttons[i].addEventListener('mouseover', function() {
buttons[i].nextElementSibling.play()
})
}
I figured it out! The answer is as follows:
const videos = document.querySelectorAll('.video-preview')
const buttons = document.querySelectorAll('.vid-btn')
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener('mouseover', function() {
console.log('play')
videos[i].play()
})
videos[i].addEventListener('mouseout', function() {
console.log('pause')
videos[i].pause()
videos[i].currentTime = 0;
})
buttons[i].addEventListener('mouseover', function() {
console.log('button hover')
videos[i].play();
})
buttons[i].addEventListener('mouseout', function() {
console.log('button hover')
videos[i].pause()
videos[i].currentTime = 0;
})
}
I am trying to have a light box pop up for videos. it works fine with one video. When trying with multiple videos the 2nd video link dont work. When clicked I get Uncaught TypeError cannot set property 'src' of null.
Nothing happens when clicked but video1 starts in the background you cant see it only her the sound. Any help is appreciated.
here goes JS
// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}
here goes html
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>
I think your problem here is that you're using IDs multiple times.
You got id="playme" on both anchor-tags and id="video" on both lightbox-divs.
So yeah. First, you should really only need a single video player -- simply change the src of that player and it should do what you want. The following is messy and ugly and really not the way i'd necessarily do this, but it works. Rather than having multiple lightbox/player elements, there's one. When you click the link, the onClick passes an id, which is matched against an array of objects. If a match is found, it changes the src of a SINGLE video-player element to the matched src and displays it.
From what I'm reading, this may be closer to what you're looking for.
var arrayOfVideos = [{
id: 'youtube',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}, {
id: 'youtube2',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}];
// Function to reveal lightbox and adding YouTube autoplay
revealVideo = function revealVideo(div, video_id) {
// This just shows what we're displaying, purely for debugging.
console.log("Showing the video "+video_id);
// We have a single videoplayer div. We'll simply toggle its src.
var video = document.getElementById("video-player");
// All possible links have been saved as an array of ids and src properties.
// Here, we simply get the first element with the matching id
var videoObject = arrayOfVideos.filter(function(obj) {
return obj.id === video_id;
})
video.src = videoObject[0].src+'&autoplay=1'; // Adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
hideVideo = function hideVideo(div, video_id) {
var video = document.getElementById("video-player");
var cleaned = video.src.replace('&autoplay=1', ''); // removing autoplay form url
video.src = cleaned;
document.getElementById(div).style.display = 'none';
}
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube2')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="video-player" src="" width="1280"></iframe>
</div>
</div>
</div>
</div>
I want to have a video player popup showing up when an image is clicked. I don't want the player embedded on the page and visible by default.
HTML:
<a href="#popupVideo" data-rel="popup" data-position-to="window" class=
"ui-btn ui-corner-all ui-shadow ui-btn-inline"><img class="..." src="...chuck.jpg"></a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298"seamless=""></iframe>
</div>
Javascript is over here
Here i have a function called EventHandlers that will add the eventlistener to every element with the class name Vids. The ID of each video will be used to set the iframe src.
Example
http://player.vimeo.com/video/41135183?portrait=0
ID = 41135183 for this Video.
Your image ID should be set to the video ID you want to play.
You will need to add your own styles but the functionality is all here and working.
I hope this helps, if it does please make sure to mark the question as answered.
Thanks.
<script>
function EventHandlers(){
document.getElementById("ExtVid").addEventListener("click",function(event){CloseVid();},false);
//Set events for all images with the class Vids
Vids=document.getElementsByClassName('Vids');
for(var i=0;i<Vids.length;i++){
Vids[i].addEventListener("click",function(event){VideoDisplay(event);},false);
}
}
function VideoDisplay(e){
//Check & remove Iframe.
if(document.getElementById('VidFrame')){
console.log("removing Video Frame");
var VidFrame=document.getElementById('VidFrame');
VidFrame.parentNode.removeChild(VidFrame);
}
//Buile the Iframe
var VidID=e.target.id;
var target = document.getElementById('VideoPopup');
var element = document.createElement('iframe');
element.setAttribute('id', 'VidFrame');
element.setAttribute('src', 'http://player.vimeo.com/video/'+VidID+'?portrait=0');
element.setAttribute('height', '298');
element.setAttribute('width', '497');
element.setAttribute('frameborder', '0');
target.appendChild(element);
document.getElementById("VideoPopup").style.display="inline";
}
function CloseVid(){
if(document.getElementById('VidFrame')){
console.log("removing Video Frame");
var VidFrame=document.getElementById('VidFrame');
VidFrame.parentNode.removeChild(VidFrame);
}
document.getElementById("VideoPopup").style.display="none";
}
</script>
<body onload="EventHandlers();">
<img class="Vids" id="41135183" src="#"/>
<img class="Vids" id="41135181" src="#"/>
<img class="Vids" id="41135176" src="#"/>
<div id="VideoPopup" style="display:none;height:100%;width:100%;position:fixed;top:0;left:0;z-index:10;background:rgba(0,0,0,.4);">
<iframe id="VidFrame"></iframe>
<button id="ExtVid" style="position:absolute;top:10px;right:10px;"> Close Video </button>
</div>
</body>
I have found a solution to starting/pausing multiple vimeo videos from seperate buttons, but I would like to use images for the play and pause buttons.
Can anyone help me ammend the code? I guess I need to replace the html button code with images and then reference them in the javascript, but I can't seem to get it to work.
Many thanks.
my html is:
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
<div>
<div>
<h1>Player 2</h1>
<div class="api_output"></div>
<iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
The javascript is:
var VimeoEmbed = {};
VimeoEmbed.init = function(e)
{
//Listen to the load event for all the iframes on the page
$('iframe').each(function(index, iframe){
iframe.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
});
};
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('button.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
//On document ready
$(document).ready(VimeoEmbed.init);
I think it'll be something like this
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<img class="simple" id="api_play" src="play.png">
<img class="simple" id="api_pause" src="pause.png">
<!-- ... same for player 2 -->
And in the js
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('img.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};