I created Slick Slide banners with iframe vimeo videos and images. I try to pause the current slider while playing the autoplay video.. I try with using "beforeChange' event for current slider pause, play only current slider video remain slider videos has to pause.. i don't understanding why not working where/what i am missing.
$(function() {
let $slideshow = $('.slick_slider');
$slideshow.slick({
initialSlide: 0,
autoplay: true,
autoplaySpeed: ImagePauses[0],
dots: false,
arrows: false,
fade: true
});
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
$slideshow.on('beforeChange', function(event, slick, currentSlide){
// pause old video (better performance)
if(!currentSlide) {
player.pause();
currentSlide.pause();
} else {
currentSlide.play();
player.pause();
}
});
});
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">
<div class="vimeo-wrapper">
<iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565964510" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
</div>
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
</div>
</div>
Related
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2GzKTGk"
data-embed="default"
controls=""
data-video-id="6304418462001"
data-playlist-id=""
data-application-id=""
data-object-fit="cover"
autoplay
muted loop
playsinline
>
</video-js>
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
</div>
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2GzKTGk"
data-embed="default"
controls=""
data-video-id="6304418462001"
data-playlist-id=""
data-application-id=""
data-object-fit="cover"
autoplay
muted loop
playsinline
>
</video-js>
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
$(document).ready(function () {
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
$(".swiper-button-prev, .swiper-button-next").click(function () {
videojs.getPlayer("overlayVideo").ready(function () {
var myPlayers = this;
myPlayers.muted(true);
});
});
});
By default I am playing the video as muted and when I unmute the video manually and click on swiper next or prev button, the video should go on mute, but currently it is happening only on clicking previous button but not muting on clicking next button. Can someone help me in achieving this. Thanks in advance
<video-js
id="overlayVideo"
You can't have two HTML5 elements or two players with the same id. You need to give them unique ids, and mute (or probably better, pause) only the specific player.
There's a few issues with video backgrounds in the Slick.js carousel that I am running into.
HTML:
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="images/01.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/02.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/03.jpg">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" autoplay muted loop preload>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
JS:
$("#mySlick").on('init', function(event. slick){
$(".carousel-item-background").each(function(){
$(this).find('.bgVid').get(0).play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid(){
$("video[class='bgVid']").each(function(){
var ve = $(this);
var $video = ve.get(0);
if ($video.paused){
$video.play();
}
});
};
Barring the CSS I excluded, the slider loads and appears fine. I can click next and previous through the slider all the way around. The first time I click NEXT all through the slider, when I arrive at the video slide, the video will start from the beginning, and the first time I click PREVIOUS to the video slide, even if I have waited a few seconds for the video to start playing, I can see during the transition between the FIRST slide and the LAST slide that the video has progressed, but when the transition ends, the video rewinds to the beginning and plays from there. I have NO afterChange calls in my script.
The second issue I have is responsive. I have a media query in the CSS, if the window is less than 768px wide, the video is set to display: none. I have a jQuery function, if the window is 768px or larger, the media query is nullified and the reloadBGVid() function is called. But no matter how I target the .bgVid, it simply will not play the video again.
The code you posted in your question contains errors and does not work at all.
I cannot find a reason to have both autoplay attribute in video tag and oninit event handler.
Also it is not clear where you're calling reloadBGVid function.
So I'm just leaving for you the snippet below in hope it helps:
$(document).ready(function() {
$("#mySlick").on('init', function(event) {
$(".carousel-item-background .bgVid").each(function(i, e) {
e.play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid() {
$("video.bgVid").each(function(i, e) {
if (e.paused) e.play();
});
}
});
body {background: #259}
#mySlick {width:436px; height:300px; margin: auto}
video {width:426px; height:240px; object-fit:cover}
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?1">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?2">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?3">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" muted loop preload>
<source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
If slide comes on video I want to play it and after completion it should slide again.Here I am able to play the video but not able to slide it back again after the video ends.
$(".main-slide").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
})
$('.main-slide').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('.embed-video');
if (vid.length > 0) {
$('.main-slide').slick('slickPause');
$(vid).get(0).play();
}
});
var videos = document.getElementsByTagName('iframe');
for (var i=0; i<videos.length; i++) {
videos[i].addEventListener('ended',myHandler,false);
}
function myHandler(e) {
$('.main-slide').slick('slickPlay');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="main-slide">
<div class="banner-image image slide1">
<img src="images/banner.jpg" />
</div>
<div class="banner-image image slide2">
<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&autoplay=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="banner-image image slide3">
<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&autoplay=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
video ends
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
I have several youtube iframes with TV channels on my website page.
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to use one java script to play video muted and to stop it on pause event but it doesnt work for me. The script is following
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event){
player.stopVideo(0);
}
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
I need to full stop video on pause event, because it is live tv channel, so if I press pause now, in 10 minutes I will get a record but not a live stream. How can I make my script work?
UPDATE
OP has multiple players and uses plain JavaScript, the following changes are:
Multiple players shared the same id, now each player has a unique id.
Added a <button class='stop' data-id='yt*'>STOP</button> for each player.
Each button has a data-id. It's value corresponds to it's player's id.
Wrapped <section id='videoChannels'></section> around everything.
Added the eventListener to #videoChannels so when a button is clicked #videoChannels is referred to as the target.currentTarget which can be compared to the event.target to determine the button that was clicked (i.e. event.target).
After the capture eventPhase the event chain reaches event.target (the button that was clicked) and the function ytCommand() is called on the player that corresponds to the button (see step 2.)
Working Demo
PLUNKER
Stopping YouTube Player
Access the iframe by using contentWindow method
Next cross-domain communication through an iframe is possible with the postMessage API.
Next post commands from YouTube iFrame API
Relevant Code
$('#stop').on('click', function() {
$('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Working Demo
FIDDLE
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop YTPlayer</title>
</head>
<body>
<section id="videoChannels">
<div>
<iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt0'>STOP</button>
</div>
<div>
<iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt1'>STOP</button>
</div>
<div>
<iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt2'>STOP</button>
</div>
<div>
<iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt3'>STOP</button>
</div>
</section>
<script>
var vidCh = document.getElementById('videoChannels');
vidCh.addEventListener('click', ytCommand, false);
function ytCommand(event) {
if (event.target != event.currentTarget) {
var btn = event.target.getAttribute('data-id');
var ytp = document.getElementById(btn);
ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
}
</script>
</body>
</html>