We want to retain the status of iframe in any track clicked in list. But
we are unable to call the play/pause event twice. Play/pause event getting called on the first time when READY event fires.
we are embeding the iframe urlend using flag which we reset on play/pause event of iframe with id="soundcloud_widget" as mentioned below in javascript code.
Html:
<div class="player-container">
<div class="player-top">
<iframe id="soundcloud_widget" name="someFrame" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638724%3Fsecret_token%3Ds-g3rwu&color=e13a7b&auto_play=true&show_user=false&download=false&show_artwork=false" width="420" height="120" frameborder="no" scrolling="no"></iframe>
</div>
<div class="song-header">
<div class="col-xs-9">Track</div>
<div class="col-xs-3 tac pl">Duration</div>
</div>
<div class="songs-container" id="musicli">
<div class="songs">
<div class="col-xs-9">
<a class ="mp3list" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638724%3Fsecret_token%3Ds-g3rwu&color=e13a7b" target="soundcloud_widget">Jagat Kalyani Bhavana</a></div>
<div class="col-xs-3 tac">2:30</div>
</div>
<div class="songs">
<div class="col-xs-9">
<a class ="mp3list" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638696%3Fsecret_token%3Ds-dZniI&color=e13a7b" target="soundcloud_widget">Dada Bhagwan na Asim Jay Jay Kar Ho</a>
</div>
<div class="col-xs-3 tac">3:30</div>
</div>
</div>
</div>
Javascript:
var iframeid = "soundcloud_widget";
LoadWidget();
$("a").click(function(e) {
e.preventDefault();
console.log(plyflg);
if(plyflg==false){
urlend='&auto_play=false&show_user=false&download=false&
show_artwork=false';
}
else{
urlend='&auto_play=true&show_user=false&download=false&
show_artwork=false';
}
var url=$(this).attr("href")+urlend;
$("#soundcloud_widget").attr("src", url);
})
function LoadWidget() {
var widget1 = SC.Widget(document.getElementById(iframeid));
widget1.bind(SC.Widget.Events.FINISH, function (e) {
});
widget1.bind(SC.Widget.Events.PLAY, function (e) {
plyflg=true;
console.log('play'+ plyflg);
});
widget1.bind(SC.Widget.Events.PAUSE, function (e) {
plyflg=false;
console.log('PAUSE'+ plyflg);
});
}
I think you have to add the allow="autoplay" attribute to your iframe in order not to have the following message when calling play().
Related
I am trying to get my screens and functions to work correctly. I am now stuck at the start page of my website/game.
I have two problems:
It seems that my click events don't work, nothing happens when I press my start buttons. After I've pressed them I then want the actual game to show up which is my "game_start".
After I press my start buttons, I want the "game_start" id screen to be hidden and the actual "game" id screen to show up.
Thankful for the help //rookie
window.addEventListener("load", start);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
//hide screens
document.querySelector("game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}
<div id="game_start" class="hidden">
<img src="Assets copy.SVG/HOMESCREEN.svg" alt="Start">
<div id="start_button" alt="start">
<span class="blink"><img src="Assets copy.SVG/START.GREEN.svg"></span></a>
</div>
<div id="start_button_2" alt="start">
<img src="Assets copy.SVG/START.GREY.svg"></a>
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="Assets copy.SVG/GAME_CONSOL.svg" alt="GameConsol"></div>
<div id="game_foreground"> <img src="Assets copy.SVG/STARS.svg" alt="GameForeground"></div>
<div id="game_background"> <img src="Assets copy.SVG/BACKGROUND.svg" alt="GameBackground"></div>
</div>
Is this what you were looking for?
I assume on window load you want to invoke startscreen. Then remove the game_start div and display the game div when button start_button is clicked right?
window.addEventListener("load", startscreen);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
//hide screens
document.querySelector("#game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}
.hidden {
display: none;
}
<div id="game_start" class="hidden">
<img src="https://placekitten.com/g/100/100" alt="Start">
<div id="start_button" alt="start">
<span class="blink"><img src="https://placekitten.com/100/100"></span></a>
</div>
<div id="start_button_2" alt="start">
<img src="https://placekitten.com/g/100/100"></a>
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="https://placekitten.com/100/100" alt="GameConsol"></div>
<div id="game_foreground"> <img src="https://placekitten.com/g/100/100" alt="GameForeground"></div>
<div id="game_background"> <img src="https://placekitten.com/100/100" alt="GameBackground"></div>
</div>
addEventListener("load", start);
but I dont seen any start function in your code!!!
window.addEventListener("load", startscreen());
and of course dont forget StartGame call your function.
You need to pay more attention to details. In my code you can check the comments for the errors.
In javascript code:
// First Error: Where is the function "start" ?
// window.addEventListener("load", start);
and
// Second Error: Your ID selector need `#` before the name.
// document.querySelector("game_start").classList.add("hidden");
In html code you closed two link (a TAG) but it never opened.
// First Error: Where is the function "start" ?
// window.addEventListener("load", start);
window.addEventListener("load", startscreen);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
// Second Error: Your ID selector need # before the name.
// document.querySelector("game_start").classList.add("hidden");
//hide screens
document.querySelector("#game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}
.hidden {
display:none;
}
<div id="game_start" class="hidden">
<img src="https://via.placeholder.com/100x50/0055FF/fff?text=HEADER" alt="Start">
<div id="start_button" alt="start">
<span class="blink"><img src="https://via.placeholder.com/100x50/FF00FF/fff?text=buttton+1"></span><!--Where is the open ? </a> -->
</div>
<div id="start_button_2" alt="start">
<img src="https://via.placeholder.com/100x50/FF0000/fff?text=button+2"><!--Where is the open ? </a> -->
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="https://via.placeholder.com/100x50/FF5500/fff?text=Game+Header" alt="GameConsol"></div>
<div id="game_foreground"> <img src="https://via.placeholder.com/100x50/FF0055/fff?text=Foreground" alt="GameForeground"></div>
<div id="game_background"> <img src="https://via.placeholder.com/100x50/55FF55/fff?text=Background" alt="GameBackground"></div>
</div>
window.addEventListener("load", startscreen);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
//hide screens
document.querySelector("#game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}
#start_button, #start_button_2{
cursor: pointer;
}
.hidden{
display: none;
}
<div id="game_start" class="hidden">
<img src="Assets copy.SVG/HOMESCREEN.svg" alt="Start">
<div id="start_button">
<span class="blink"><img alt="start" src="Assets copy.SVG/START.GREEN.svg"></span>
</div>
<div id="start_button_2">
<img alt="start2" src="Assets copy.SVG/START.GREY.svg">
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="Assets copy.SVG/GAME_CONSOL.svg" alt="GameConsol"></div>
<div id="game_foreground"> <img src="Assets copy.SVG/STARS.svg" alt="GameForeground"></div>
<div id="game_background"> <img src="Assets copy.SVG/BACKGROUND.svg" alt="GameBackground"></div>
</div>
Change startscreen in the window.addEventListener("load", startscreen); and remove the random <a/>'s.
Then the document.querySelector("game_start").classList.add("hidden"); needs to have the # in it like this document.querySelector("#game_start").classList.add("hidden");
I need stop video from playing after closing modal window. This is my code:
<div onclick="document.getElementById('id01').style.display='block'" class="mkdf-elements-holder-item-content mkdf-elements-holder-custom-184744" style="padding: 300px 0 200px 0">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4">
<header style="background-color:white;" class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.visibility='hidden'"
class="w3-button w3-display-topright">×</span>
<h2 style="background-color:white; color: white"> V </h2>
</header>
<div class="w3-container">
<iframe id="ifr" src="https://www.youtube.com/embed/ZrXbX8cWrvQ" allowscriptaccess="always"> /iframe>
</div>
</div>
</div>
I have tried this code, but it does not work:
<script>
$("#id01").on('hidden.bs.modal', function (e) {
$("#id03 iframe").attr("src", $("#id03 iframe").attr("src"));
});
</script>
Anyone know how I can achieve to stop playing video when I close modal window?
How should jQuery reference and id that is not present in your HTML? #id03 is not existing as pointed out by #Manjuboyz, use #ifr instead for referencing your iframe.
<script>
$("#id01").on('hidden.bs.modal', function (e) {
$("#ifr").attr("src", $("#ifr").attr("src"));
});
</script>
Your approach would require a reload of the entire video. If you have an iframe that contains a <video></video> element, you can just stop it and set it to the beginning:
$('#ifr').contents().find('video').each(function () {
this.currentTime = 0; // set to beginning
this.pause(); // set video to paused
});
You need to use jQuery's contents() to work on the DOM of the iframe.
i want to play video when item gets active class in bootstrap slider below is my code
<div class="item" id='mobileapp'>
<video loop controls width="100%" id='video'>
<source src="../../vid.mp4" width="100%" height="100%" type="video/mp4"> Your browser does not support the video tag.
</video>
<div class="overlay"></div>
<div class="carousel-caption">
<h1 class="super-heading text-white">Heading</h1>
<div class='row'>
<div class='col-sm-2 col-sm-offset-1'>
<img src='../img/googleplay.png' class='img-responsive hidden-xs' />
</div>
<div class='col-sm-2'>
<img src='../img/applestore.png' class='img-responsive hidden-xs' />
</div>
</div>
</div>
</div>
Js
<script>
$(document).ready(function () {
if ($('#mobileapp').hasClass('active')) {
$('#video')[0].play();
}
else {
$('#video')[0].pause();
}
})
</script>
active class gets added but it does not pay video
the functions 'play' and 'pause' are not jquery functions, they belong to the DOM element. Now to make it work try to execute your code every 10 miliseconds or something like that.
Try:
var videoElt = document.getElementById('video');
$(document).ready(function () {
setInterval(function () {
if ($('#mobileapp').hasClass('active')) {
videoElt.play(); // to play the video
}
else {
videoElt.pause(); // to pause the video
}
}, 10);
});
I'm currently working on a website that has a series of twelve HTML5 videos that starts playing automatically in a separate modal box for each video. Now I want to give the user the control to play and pause the video as well (along with other features but that's not relevant to my current problem).
I've gotten so far that the user are able to click the video itself in order to play and pause it. But the play/pause button i've added does not work right now and the code below will give me a "lastClicked.pause is not a function" error.
I know that the reason is because the lastClicked variable i'm using as a condition inside the if statement will contain a button when I click "play/pause" and a button does not have those functions. I've figured out that much so far, but I'm a bit lost of what my next step should be.
Should I make a reference to the specific video inside the toggleVideo function and replace it with the lastClicked variable or does a more simple solution exist?
EDIT: Added a bit of the HTML for reference
Javascript:
// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");
let lastClicked
function toggleVideo () {
lastClicked = this;
if(lastClicked.paused) {
lastClicked.play();
}
else {
lastClicked.pause();
}
}
// Two different ways to play/pause the video - Clicking the video
// itself and clicking the play/pause button
player.forEach(video => video.addEventListener ("click", toggleVideo ));
toggle.forEach(button => button.addEventListener ("click", toggleVideo ));
HTML:
<section class="portfolio" id="portfolio">
<div class="video-wrapper">
<div class="video-thumbnail"><img src="./media/img/thumbnails/1.hammerfall.jpg"></div>
<button class="video-overlay" id="player" data-modal="videoOne"></button>
</div
><div class="modal-box">
<div class="modal-content">
<span class="close-btn">×</span>
<div class="player">
<video class="player__video viewer" src="./media/video/1.waves.mp4"></video>
<div class="video-controller">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
<button class="video-play toggle">►</button>
<input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
<button class="video-volume mute">X</button>
</div>
</div>
</div>
</div
><div class="video-wrapper">
<div class="video-thumbnail"><img src="./media/img/thumbnails/2.lordi.jpg"></div>
<button class="video-overlay" data-modal="videoTwo"></button>
</div
><div class="modal-box">
<div class="modal-content">
<span class="close-btn">×</span>
<div class="player">
<video class="player__video viewer" src="./media/video/2.words.mp4"></video>
<div class="video-controller">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
<button class="video-play toggle">►</button>
<input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
<button class="video-volume mute">X</button>
</div>
</div>
</div>
</div
>
</section>
Essentially you need to associate your buttons with your videos.
Currently toggleVideo() assumes that it's running in the context of a video element, whereas it could be a video or a button associated with a video.
You don't know show your HTML structure, but for this answer I'll use the following video-button relationship.
<div>
<video />
<button>Toggle</button>
</div>
...ergo in my contrived example, the button is the next sibling of the video. It doesn't matter what the precise relationship is between video and button, merely that we establish and cater for it inside toggleVideo().
So, that now becomes:
function toggleVideo () {
//establish video - might be #this, or might be prev sibling of #this
let vid = this.tagName == 'VIDEO' ? this : this.previousSibling;
lastClicked = vid;
vid.paused ? vid.play() : vid.pause();
}
I am trying to create a script that only opens the next div called .video-overlay.
I do not want to use ID's as there could be up to 30 videos per page.
JS Fiddle: https://jsfiddle.net/w2fqrzbw/
At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay?
HTML:
<span class="video-trigger">Button 1 </span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 1
</div>
</div>
<!-- Close video popup-->
<br><br/>
<br><br/>
<br><br/>
<span class="video-trigger">Button 2</span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 2
</div>
</div>
<!-- Close video popup-->
JS:
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$('.video-overlay').fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
This is how it is laid out in my actual web document:
<div class="col span_6_of_12 ripple-me">
<div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);">
<span class="video-trigger">
</span>
</div>
<!--Close Video box cta -->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
<iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe>
</div>
</div>
<!-- Close video popup-->
</div>
The issue with your current logic is that it's affecting all .video-overlay elements on click. To fix this you can use DOM traversal to find only the one related to the clicked .video-trigger using next() and closest(). Try this:
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).next('.video-overlay').fadeIn(300).find('video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause();
});
});
Try using JQuery Next Function :
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
var $videoOverlay = $(this).next('.video-overlay');
videoOverlay.fadeIn(300);
videoOverlay.find('video').get(0).play();
});
});
jQuery provides powerful DOM traversal tools. Be sure to use them
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).parent().next('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).parent().fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});