I have a page with several JWPlayer instances. I would like to stop, or pause the video that is playing if and when the user clicks on another one. Right now videos play at the same time and it is quite annoying.
I tried the stop and pause methods for JWPlayer but I can't get them to work.
Thank you in advance, here's my code so far (2 videos but there are several others).
<div class="col-lg-4">
<div id="video1"></div>
<script type="text/javascript">
jwplayer().stop();
jwplayer("video1").setup({
file: "video1.mp4",
image: "1.jpg",
width: "100%",
aspectratio: "16:9",
logo: { hide: true },
skin: "bekle"
});
</script>
<p>Description</p>
</div>
<div class="col-lg-4">
<div id="video2"></div>
<script type="text/javascript">
jwplayer("video2").setup({
file: "video2.mp4",
image: "2.jpg",
width: "100%",
aspectratio: "16:9",
logo: { hide: true },
skin: "bekle"
});
</script>
<p>Description</p>
</div>
The stop() in the first video doesn't work and actually deletes the player that doesn't load at all.
I iterate through all the players on the page and then make sure all are paused except for the one I want to play:
<script src="https://content.jwplatform.com/libraries/your_player_here.js"></script>
<div id="videoA"></div><br><br>
<div id="videoB"></div><br><br>
<div id="videoC"></div><br><br>
<div id="videoD"></div><br><br>
<script>
jwplayer('videoA').setup({
file: 'bunny.mp4'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
jwplayer('videoB').setup({
file: 'tears.mp4'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
jwplayer('videoC').setup({
file: 'sintel.mp4'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
jwplayer('videoD').setup({
file: 'http://content.jwplatform.com/manifests/s8BPzDe0.m3u8'
}).on('play',function(){
pauseOthers(this.getContainer().id);
});
function pauseOthers(id) {
console.log('Playback just started for: '+id);
var videos = document.getElementsByTagName('video');
for (i=0;i<videos.length;i++) {
if (id != videos[i].parentNode.parentNode.id) {
jwplayer(videos[i].parentNode.parentNode.id).pause(true);
console.log('Pausing: '+videos[i].parentNode.parentNode.id);
}
}
}
</script>
Related
I have a button that when clicked, pops up a video that can played.
The problem is that if you close the popup while the video is playing, closing the popup does not stop the video, but it keeps playing in background.
<div>
<a id="click-me">Click Me</a>
</div>
<div id="popup-mpdal" style="display:none;">
<div class="">
<video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
<source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
</video>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
It's a little unclear as to what's going on here, but when the modal is being closed you aren't doing anything to either pause or reset the video. Here's a pretty simple way to stop it.
var video = document.getElementById("videoplayer");
function pauseVideo(){
video.pause();
}
Now if you call pauseVideo() inside the click handler for your buttons it should stop the video.
I'm attempting to add a play/pause button to a Wistia hosted video. I have it mostly working however when I add in multiple videos it's not targeting the current video. Instead when I click on the second video the first video plays.
Below is the HTML:
<div class="tqm-video-wrapper">
<div class="tqm-video-overlay">
<a class="tqm-play-btn">
</a>
</div>
<!-- WISTIA IN PLACE VIDEO EMBED CODE -->
<script src="https://fast.wistia.com/embed/medias/j04n260140.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_j04n260140 videoFoam=true" style="height:100%;width:100%"> </div>
</div>
</div>
<!-- END WISTIA IN PLACE VIDEO EMBED CODE -->
</div>
Below is the script:
window._wq = window._wq || [];
_wq.push({ id: "_all", onReady: function(wistiaEmbed) {
var wistiaHash = $(".wistia_embed").attr("id", "wistiaGenID_" + wistiaEmbed.hashedId());
var wistiaHashId = wistiaEmbed.hashedId();
// grab Wista API
wistiaEmbed = Wistia.api(wistiaHashId);
// when the video is stopped
wistiaEmbed.bind("end", function() {
$(this).find('.tqm-video-overlay').fadeIn("slow");
});
//when the video is paused
wistiaEmbed.bind("pause", function() {
$('.tqm-video-wrapper').find('.tqm-video-overlay').fadeIn("slow");
});
//when the video time changes
wistiaEmbed.bind("secondchange", function() {
$(this).find('.tqm-video-overlay').fadeOut("slow");
});
// when you click the custom play button
$('.tqm-video-overlay').click(function() {
if ($(this).parent().has(".wistia_embed")) {
wistiaEmbed.play();
$(this).fadeOut("slow");
}
});
}
});
Here is a link to a jsfiddle: https://jsfiddle.net/eilawen/bggu5s1q/7/
Is someone able to point me in the right direction? Thanks in advance.
Replace <VIDEO_ID> with your wistia Video ID
This will works
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_<VIDEO_ID>" style="width:640px;height:360px;"></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<script>
window._wq = window._wq || [];
_wq.push({
id: "<VIDEO_ID>", onReady: function (video) {
console.log("I got a handle to the video!", video);
}
});
$("#play").click(function () {
_wq.push({
id: "<VIDEO_ID>", onReady: function (video) {
video.play();
}
});
})
$("#pause").click(function () {
_wq.push({
id: "<VIDEO_ID>", onReady: function (video) {
video.pause();
}
});
})
</script>
So I am trying to implement a modal popup on my homepage that displays on the first page visit only and expires after a set amount of time. I am currently using cookie.js to do so and I have a JSfiddle (here:https://jsfiddle.net/yaLsdahk/68/) that works to perfection. However, when I try to copy the code over to my homepage, it doesn't seem to work. Can anybody offer assistance?
Here's my html markup and script:
<div id="init-modal-wrapper">
<div class="opening-modal-title"> A little heads up... </div>
<div class="close_box_6">
<div class="icon-font-25 alignment" data-icon=""></div>
</div>
<div id="horizontal_bar" class="alignment"> </div>
<div id="popupfoot" class="alignment">
<div id="typeface" class="init-modal-text">STUFF!</div>
</div>
</div>
<div class="init-modal-overlay"></div>
$(document).ready(function() {
if ($.cookie('init_modal_1') == null) {
$.cookie('init_modal_1', 'yes', { expires: 1, path: '/' });
var delay=4000;
setTimeout(function(){
$("#init-modal-wrapper").stop().animate({
height: "toggle",
opacity: "toggle"
}, "slow");
$('.init-modal-overlay').fadeIn("slow",function(){});
}, delay);
};
});
I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.
Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>
Here's the problem:
I have multiple youtube videos in a slider, and I want the videos to stop playing when a link that controls the slider is clicked. It's really annoying to have the videos just keep playing when you can't see it.
I used this code:
<div id="ytapiplayer2">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myvideo");}
var params = { allowScriptAccess: "always" };var atts = { id: "myvideo" };
swfobject.embedSWF("http://www.youtube.com/v/hCarSDT7cSQ?enablejsapi=1&version=3&playerapiid=myvideo","ytapiplayer2", "425", "270", "8", null, null, params, atts);
function play() {if (ytplayer2) {ytplayer2.playVideo();}}
function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}
</script>
Which is basically directly from Google's Youtube js api stuff.1 It works GREAT for just ONE video, per page.
My problem is I have some pages where I want to have multiple videos in the same slider. Videos are contained within divs, and called exactly as shown above in each respective div.
BUT -- The videos don't stop playing back now when navigating links for the slider are clicked. :(
I have tried to change the variable and id names to be unique each time the script is called. I have even changed the function name from function onYouTubePlayerReady to onYouTubePlayerReady2 ... but nothing works.
I'm stumped. Halp?
Edit to show more detailed code set up:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script><!--Uses Google API library-->
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->
</head>
<body>
<div id="bodyContent">
<div id="leftCol">
Content
</div><!-- #leftCol -->
<div id="middleCol">
<ul id="subNav">
<li class="category">Mini Header</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul><!--subNav-->
</div><!-- #middleCol -->
<div id="rightCol" class="slider">
<div class="scroll">
<div class="scrollContainer">
<div id="link1" class="panel">
<div id="ytapiplayer1">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {ytplayer1 = document.getElementById("myVideo1");}
var params = { allowScriptAccess: "always" };var atts = { id: "myVideo1" };
swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer1", "425", "347", "8", null, null, params, atts);
function play() {if (ytplayer1) {ytplayer1.playVideo();}}
function pause() {if (ytplayer1) {ytplayer1.pauseVideo();}}
</script>
</div><!-- #link1 -->
<div id="link2" class="panel">
<div id="ytapiplayer2">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {ytplayer2 = document.getElementById("myVideo2");}
var params = { allowScriptAccess: "always" };var atts = { id: "myVideo2" };
swfobject.embedSWF("http://www.youtube.com/v/67aIIRv-dYU?enablejsapi=1&version=3&playerapiid=ytplayer1","ytapiplayer2", "425", "347", "8", null, null, params, atts);
function play() {if (ytplayer2) {ytplayer2.playVideo();}}
function pause() {if (ytplayer2) {ytplayer2.pauseVideo();}}
</script>
</div><!-- #link2 -->
<div>Video 3 set up is same as above...</div>
</div>
</div><!-- .scroll -->
</div><!-- #rightCol -->
</div><!-- #bodyContent -->
</body>
Wrong approach. Why use two or more YouTube players when you can accomplish the task with one player, specially when you're using YouTube JS API.
Relevant code:
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
Video 1
Video 2
<script type="text/javascript">
function load(id) {
if (ytplayer) {
ytplayer.loadVideoById(id);
}
}
</script>
Demo for solution 1
Alternately you can create multiple players and figure out some way of storing how many players you have on the page in a variable. I think it is sufficient to store the id of the player. Do not confuse the id with (i) the id you assign to the div (ii) the id you pass as playerapiid.
swfobject.embedSWF() will replace the div with either an object or embed tag, that tag is assigned an id that you pass to this method in the last parameter. This is the id that you can later use to reference the player(s).
Demo for solution 2
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player1st;
var player2nd;
function onYouTubePlayerAPIReady() {
player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}});
player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
}
//function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }
function onPlayerStateChange(event) {
alert(event.target.getPlayerState());
}
</script>
<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&enablejsapi=1"></iframe><br>
play1st<br>
pause1st<br>
stop1st
<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&enablejsapi=1"></iframe><br>
play2nd<br>
pause2nd<br>
stop2nd
Store the references to each player in an array, then when you want to stop them all loop through the array. If you could post more of your HTML/JavaScript for the multiple video setup I might have a more specific suggestion, otherwise fill in the blanks yourself:
// add a global array of video refs
var myVideos = [];
// some code to create the first video, similar to OP code
// ...
myVideos.push(ytplayer2);
// some code to create second video
// ...
myVideos.push(anotherVideoRef);
// some code to create third video
// ...
myVideos.push(thirdVideoRef);
// etc.
function pauseAllVideos(){
for (var i = 0; i < myVideos.length; i++) {
myVideos[i].pauseVideo();
}
}
I would prefer to setup the videos in a loop, rather than one at a time like I did above, but I don't know how the rest of your code is structured, so...