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>
Related
i have this code in javascript .. i want it to work in every single song in my songs variable ..any help on how to do it
thanks
window.addEventListener("load", () => {
let songs = document.querySelectorAll(".song");
let sections = document.querySelectorAll(".section button");
//song start play
sections.forEach((button, index) => {
button.addEventListener("click", function () {
if(songs[index].paused){
songs[index].play();
} else{
songs[index].pause();
}
});
});
});
On button click, if the song is at pause, play it... But you also need to makes sure all other songs are paused.
You just need an additional forEach loop to pause them all before playing the one associated with the clicked button.
window.addEventListener("load", () => {
let songs = document.querySelectorAll(".song");
let sections = document.querySelectorAll(".section button");
//song start play
sections.forEach((button, index) => {
button.addEventListener("click", function () {
if(songs[index].paused){
songs.forEach(song => song.pause()) // This will pause all songs
songs[index].play();
} else{
songs[index].pause();
}
});
});
});
audio{
display: none;
}
button{
margin: 0.5em;
}
<div class="section">
<audio controls class="song" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<button class="button">Play song #1</button>
</div>
<div class="section">
<audio controls class="song" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"></audio>
<button class="button">Play song #2</button>
</div>
<div class="section">
<audio controls class="song" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"></audio>
<button class="button">Play song #3</button>
</div>
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>
I have made a modal layer that shows a html5 video. This works fine. I am having trouble making the video stop playing once I click the close modal button.
When I close the modal, the video keeps playing in the background. Can anyone help so when I close the modal layer, the video terminates.
Here is my html code, I use the Magnific Popup js for the modal popup
<div id="p1" class="mfp-hide">
<div class="some-element">
<video id="sampleMovie" width="100%" preload controls class="embed-responsive-item">
<!-- .mp4 or .mov -->
<source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
JS code -
* Private static constants
*/
var CLOSE_EVENT = 'Close',
BEFORE_CLOSE_EVENT = 'BeforeClose',
AFTER_CLOSE_EVENT = 'AfterClose',
BEFORE_APPEND_EVENT = 'BeforeAppend',
MARKUP_PARSE_EVENT = 'MarkupParse',
OPEN_EVENT = 'Open',
CHANGE_EVENT = 'Change',
NS = 'mfp',
EVENT_NS = '.' + NS,
READY_CLASS = 'mfp-ready',
REMOVING_CLASS = 'mfp-removing',
PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
/**
if(mfp.st.showCloseBtn) {
// Close button
if(!mfp.st.closeBtnInside) {
mfp.wrap.append( _getCloseBtn() );
} else {
_mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) {
values.close_replaceWith = _getCloseBtn(item.type);
});
_wrapClasses += ' mfp-close-btn-in';
}
}
if(mfp.st.showCloseBtn &&
(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
if(mfp.currTemplate.closeBtn)
mfp.currTemplate.closeBtn.detach();
}
appendContent: function(newContent, type) {
mfp.content = newContent;
if(newContent) {
if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
mfp.currTemplate[type] === true) {
// if there is no markup, we just append close button element inside
if(!mfp.content.find('.mfp-close').length) {
mfp.content.append(_getCloseBtn());
}
} else {
mfp.content = newContent;
}
} else {
mfp.content = '';
}
_mfpTrigger(BEFORE_APPEND_EVENT);
mfp.container.addClass('mfp-'+type+'-holder');
mfp.contentContainer.append(mfp.content);
},
closeBtnInside: true,
showCloseBtn: true,
Any advice would be so appreciated
<div id="p1" class="mfp-hide">
<div class="some-element">
<video id="sampleMovie" width="100%" preload controls class="embed-responsive-item">
<!-- .mp4 or .mov -->
<source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
<script>
var video = document.getElementById("myVideoPlayer");
function stopVid(){
video.pause();
video.currentTime = 0;
}
//attach event handler to close button
$(".mfp-close").on('click', function(){
stopVid();
});
</script>
I added this pop up to my site, and try add autoplay, but the problem is even the pop dont come up each time you refresh your website, you can still hear the sound.how can i stop the autoplay when pop up doesn't show?
I tried to solve problem by doing this but is still not working
<script>
$( document ).ajaxComplete(function() {
$("#popup_87 flex-video iframe").attr("src","https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
});
</script>
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<iframe src="https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&showinfo=0&autoplay=1" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
</div>
/////
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
Try
<script>
function LoadVideo() {
// If it's visible
if($("#popup_87").is(":visible"))
{
// Load the video and auto play
$("#popup_87 flex-video iframe").attr("src","http://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
}
}
</script>
EDIT since more code was added, put the trigger when they click on the link to load the video into the pop-up, otherwise don't load the video in the iframe:
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<!-- Removed the source -->
<iframe allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
I'm not sure if the following code works, but I just added LoadVideo to your script.
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
LoadVideo();
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds