I have 10 YouTube links and I want to be able to move to the next video by pressing the next button.
My code:
var videoLinks = ["https://www.youtube.com/embed/QIMo0jFbfQs", "http://www.youtube.com/v/L8NGOUrw8UU"];
var v = 0;
$("#next").on('click', function(){
next() + 1;
function next(){
if(v == videoLinks.length){
//v = 0;
}
$(".content").html(" <iframe src= ' " + videoLinks[v] + "'> "+ "</iframe>");
}
});
Note: I only included 2 links for testing.
You basically need a way to keep track of the vid count. Local Storage would be good for this. The button would increment the video counter and reset the value if you reached the end. The counter would be a reference to the video source value.
Use a simple replace to change the video source, embed the video, and then increment the counter.
It can be seen here: https://jsbin.com/dehoxo/edit?html,js,console,output
$(document).ready(function(){
$('#nextBtn').click(function(e){
e.preventDefault();
alert();
var vidIndex = parseInt(localStorage.getItem("vidIndex"));
var vids = ['https://www.youtube.com/embed/VT4gri_n0iM',
'https://www.youtube.com/embed/DWooSca2rCw',
'https://www.youtube.com/embed/MukFRbS_5Gw'];
var vidToken = '<iframe width="420" height="315" src="{{SRC}}" frameborder="0" allowfullscreen></iframe>';
if (vidIndex) {
if (vidIndex >= vids.length) {
vidIndex = 0;
}
}
else {
if (!vidIndex && vidIndex !==0) {
vidIndex = 0;
}
}
var currentVid = vidToken.replace('{{SRC}}', vids[vidIndex]);
$('#vidBox').html(currentVid);
$('#vidIndex').val(vidIndex);
vidIndex++;
localStorage.setItem('vidIndex', vidIndex);
});
});
The HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="vidBox">
NO VID
</div>
<button id="nextBtn">Next Vid</button>
<input id="vidIndex"/>
</body>
</html>
var videoLinks = [link1, link2, link3, ...];
var v = 0;
var iframe = $('iframe');
iframe.attr('src', videoLinks[0]);
$("#next").on('click', function(){
v++;
if(v >= videoLinks.length){
v = 0;
}
iframe.attr('src', videoLinks[v]);
});
Try this, it's a little more concise and easier to read:
var videoLinks = ["https://www.youtube.com/embed/QIMo0jFbfQs", "https://www.youtube.com/embed/L8NGOUrw8UU"];
var v = 0;
$("#next").on('click', function() {
$(".content").html(" <iframe src= ' " + videoLinks[v] + "'> " + "</iframe>");
v == videoLinks.length - 1 ? v = 0 : v++;
});
JSFiddle
Related
I am working on a memory game and I asked a previous question earlier which was answered. I've had this problem and I haven't been able to find a solution with effort. So it's a memory game and when the cards are clicked, they are pushed into an array which can hold two elements at max (you can only click two cards) and then the two elements' frontSrc is checked if they are the same. I set that using an expando property. If so, have them visible and then clear the array so I can do more comparisons. However, it doesn't seem to be working as intended. I'll attach a video below. I've tried using timeout to set the length again, but that didn't work. It works for the first cards, but the other ones after that, it doesn't work.
Here is my code.
<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.card{
width: 35%;
}
#cards{
display: grid;
grid-template-columns:25% 25% 25% 25%;
row-gap: 25px;
}
</style>
</head>
<body onload="init()">
<section id="cards">
</section>
<script>
var arrCards = [];
var arrShowedCards = [];
//appendElements();
function init(){
createCards();
shuffleCards();
appendElements();
}
function createCards(){
var arrCardNames = ["Mouse","Penguin","Pop","Mouse","Penguin","Pop"];
for(var i = 0; i<6; i++){
var card = document.createElement("IMG");
card.src = "Images/red_back.png";
card.className = "card";
card.frontSrc = "Images/" + arrCardNames[i] + ".png";
card.id = "card" + i;
card.addEventListener("click", showCard);
document.getElementById("cards").appendChild(card);
arrCards.push(card);
}
}
function shuffleCards(){
for (let i = arrCards.length-1; i > 0; i--)
{
const j = Math.floor(Math.random() * (i + 1));
const temp = arrCards[i];
arrCards[i] = arrCards[j];
arrCards[j] = temp;
}
return arrCards;
}
function appendElements(){
for(var i = 0; i<arrCards.length; i++){
document.getElementById("cards").appendChild(arrCards[i]);
}
}
function showCard(){
var sourceString = "Images/red_back.png";
this.src = this.frontSrc;
arrShowedCards.push(this);
if(arrShowedCards.length === 2){
if(arrShowedCards[0].frontSrc === arrShowedCards[1].frontSrc){
console.log("Match!");
arrShowedCards = [];
}
else{
console.log("No match!");
setTimeout(function(){
arrShowedCards[0].src = sourceString;
arrShowedCards[1].src = sourceString;
}, 1000);
}
}
}
</script>
</body>
</html>
I am not sure how come it doesn't work for it for the other cards.
Here is the video.
https://drive.google.com/file/d/1aRPfLALHvTKjawGaiRgD1d0hWQT3BPDQ/view
If anyone finds a better way to approach this, let me know.
Thanks!
I think when not match, you need to reset arrShowedCards otherwise its length will be greater than 2 forever.
function showCard() {
var sourceString = "Images/red_back.png";
this.src = this.frontSrc;
arrShowedCards.push(this);
if (arrShowedCards.length === 2) {
var a = arrShowedCards[0], b = arrShowedCards[1];
arrShowedCards.length = 0;
if (a.frontSrc === b.frontSrc) {
console.log("Match!");
} else {
console.log("No match!");
setTimeout(function () {
a.src = sourceString;
b.src = sourceString;
}, 1000);
}
}
}
I want execute onclick event after the 5 second timer gone and second button enabled.. Here is my code.
Download Video
Javascript code
<script>
var towait = 5;
var selector = "#downloadvideo";
function counter() {
if (towait == 0) {
$(selector).text("Start Download");
var srclink = '<?= $url;?>';
$(selector).attr('href', srclink).prop('href', srclink).prop('disabled', false);
return;
}
$(selector).text("Wait " + towait + " s").prop('disabled', true);
towait--;
setTimeout(counter, 1000);
}
$(selector).one('click', function(e) {
counter();
return false;
});
</script>
Try to add setInterval and clearInterval functions to your code. Below is a simple 10 seconds timer just to demonstrate. For full disclosure, not all of the code is my own some of it I've copied from this answer.
var timeleft = 10;
var b = document.querySelector('#btn');
b.addEventListener('click', () => {
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
}
document.getElementById("progressBar").value = 10 - timeleft;
timeleft -= 1;
}, 1000);
});
input[type='number'] {
border: 0;
font-size: 15px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<button id='btn'>Click</button>
<input type='number' value="0" max="10" id="progressBar"></input>
</div>
</body>
</html>
You can do something like this. Just update the DownloadVideo function to what you need to happen when the 'Start Downloading' button is pressed.
EDIT:
Using an <a> tag with a href instead.
let waitTime = 5 // Time to wait in seconds before download is available
const selector = document.getElementById('downloadvideo')
selector.onclick = () => {
selector.textContent = 'Wait ' + waitTime + ' s'
selector.disabled = true
selector.onclick = () => {}
const inter = setInterval(() => {
waitTime--
if (waitTime == 0) {
clearInterval(inter)
selector.textContent = 'Start Downloading'
selector.href = 'https://www.google.com' // replace with the desired url
} else {
selector.textContent = 'Wait ' + waitTime + ' s'
}
}, 1000)
}
<button>
<a id="downloadvideo" class="btn btn-primary btn-lg"> Download Video </a>
</button>
I build a small application to switch between random images in an iframe, I would like that after 10 or 20 images the user will get an image or source I want him to get and not a random one, and then return to the loop.
I have a problem with the count and if function, will appreciate any help. Thanks
<body>
<iframe id="img_main" src="https://www.example.com/img_4.jpg" width="600" height="800" frameborder="1" scrolling="no"></iframe>
<br>
<button id="H" type="button" onclick=(newImg(),clickCounter(),changeImg())>images</button>
<div id="result"></div>
<script>
function newImg(){
var myArray = [
"img_1.jpg",
"img_2.jpg",
"img_3.jpg",
"img_4.jpg"
];
var imgNew = "https://example.com/"
var randomItem = myArray[Math.floor(Math.random()*myArray.length)];
document.getElementById("img_main").src = "https://example.com/" + randomItem ;
}
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
function changeImg(){
if (localStorage.clickcount = 10,20) {
document.getElementById("ins_main").src = "https://example.com/pre_defined_img.jpg";
}
}
</script>
</body>
the way I see that...
by simply use of the modulo (finds the remainder after division)
you don't need to use an iframe, img element is enough.
use an IIFE. as closure method
file : "myScript.js"
const imgBox = (function()
{
const refURL = 'https://i.picsum.photos/id/'
, imgName = [ '251/300/500.jpg', '252/300/500.jpg', '253/300/500.jpg', '254/300/500.jpg'
, '255/300/500.jpg', '256/300/500.jpg', '257/300/500.jpg', '258/300/500.jpg'
, '259/300/500.jpg', '260/300/500.jpg', '261/300/500.jpg', '146/300/500.jpg'
, '263/300/500.jpg', '264/300/500.jpg', '265/300/500.jpg', '266/300/500.jpg'
, '267/300/500.jpg', '268/300/500.jpg', '269/300/500.jpg', '270/300/500.jpg'
, '271/300/500.jpg', '272/300/500.jpg', '273/300/500.jpg', '274/300/500.jpg'
]
, imgZero = '250/300/500.jpg'
, imgSiz = imgName.length
, imgMain = document.getElementById('img-main')
;
var imgNum = 0, randomI = 0;
const obj =
{ setNext()
{
if (!(++imgNum % 10)) // each 10 times
{
imgMain.src = refURL + imgZero
}
else
{
randomI = Math.floor(Math.random() * imgSiz)
imgMain.src = refURL + imgName[randomI]
}
return imgNum
}
}
return obj
})()
const btImg = document.getElementById('bt-img')
, imgCount = document.getElementById('img-count')
, banner = document.getElementById('my-banner')
;
btImg.onclick =evt=>
{
let counter = imgBox.setNext()
imgCount.textContent = counter
if (!(counter %50)) // each 50 times..
{
changeBanner()
}
}
// changing banner function...
function changeBanner()
{
//.....
// do what ever you want to change your banner
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
img#img-main {
width: 300px;
height: 500px;
border: 1px solid grey;
padding: 2px;
}
</style>
</head>
<body>
<img id="img-main" src="https://i.picsum.photos/id/250/300/500.jpg" alt="" >
<p id="img-count">0</p>
<button id="bt-img">Image change</button>
<div id="my-banner">the banner</div>
<script src="myScript.js"></script>
</body>
</html>
Why is it omitting the last slide? How can I fix it to show the first image just after the side loads, without waiting? I've tried everything and cant fix it out, always were some problems (displaying two images at the same time etc) and now this.
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/19445204e2.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
// Startowy slajd
var numer = 0;
function changeslide()
{
var imagesnumber=document.getElementById("slider").getElementsByTagName("img");
for(var i = 0; i < imagesnumber.length; i++)
{
imagesnumber[i].style.display = "none";
}
// Wyswietlam aktualny index
$("#slide"+numer).fadeIn(500).css('display','block');
if(numer >= imagesnumber.length-1)
numer = 0;
else
numer++;
timer1 = setTimeout("changeslide()", 3000);
}
</script>
</head>
<body onload="changeslide()">
<div id="slider">
<img src="slides/img1.jpg" id="slide1">
<img src="slides/img2.jpg" id="slide2">
<img src="slides/img3.jpg" id="slide3">
<img src="slides/img4.jpg" id="slide4">
<img src="slides/img5.jpg" id="slide5">
</div>
</body>
</html>
var numer = 0;
function changeslide(){
var timeout=0;
if(numer!==0){
timeout=3000;
}
var imagesnumber=document.getElementById("slider").getElementsByTagName("img");
for(var i = 0; i < imagesnumber.length; i++)
{
imagesnumber[i].style.display = "none";
}
// Wyświetlam aktualny index
$("#slide"+numer).fadeIn(500).css('display','block');
if(numer >= imagesnumber.length-1)
numer = 0;
else
numer++;
timer1 = setTimeout("changeslide()", timeout);
}
PEN
function changeslide() {
if (typeof this.numer === "undefined") this.numer = 1;
var imagesnumber = document.getElementById("slider").getElementsByTagName("img");
$("#slider img").css("display", "none");
$("#slide" + numer).fadeIn(500).css('display', 'block');
if (this.numer >= imagesnumber.length)
this.numer = 1;
else
this.numer++;
timer1 = setTimeout(changeslide, 3000);
}
I moved the counter to the function so you don't mess up your variables outside.
The counter restarted too early and I replaced your for loop with a jquery solution.
I'm running this array that plays the video array, but ends abruptly and doesn't loop. Of course I tried the HTML video attribute loop and loop="true" and loop="loop"... with no avail..
I just want to loop'it t'night:
var videos =
[
[
"img/poster.png",
"img/trippyInk.mp4"
],
[
"img/poster.png",
"img/brothaDive.webm"
],
[
"img/poster.png",
"img/wtuD97H.webm"
],
[
"img/poster.png",
"img/ride.webm"
]
];
function switchVideo(n) {
if (n >= videos.length) n = 0;
var mp4 = document.getElementById("mp4");
var parent = mp4.parentNode;
document._video.setAttribute("poster", videos[n][0]);
mp4.setAttribute("src", videos[n][1]);
document._video.load();
document._video.play();
I tried this command, this also didn't work.
$('video').attr('loop','loop');
}
Thanks!
Update
The key to making a series of video loop is to add your loop logic to the ended event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vidArray</title>
</head>
<body>
<video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" controls width="480" height="auto">
Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
</video>
<script>
var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
var vid = document.getElementById("vid");
var n = videos.length;
var cnt = 0;
function playVideo(x) {
var png = poster[x];
console.log('poster: ' + png);
var mp4 = videos[x];
console.log('video: ' + mp4);
vid.setAttribute('poster', png);
vid.src = mp4;
vid.load();
vid.play();
}
vid.addEventListener('ended', next, false);
function next() {
cnt++;
if (cnt < n) {
playVideo(cnt);
} else {
cnt = 0;
playVideo(cnt);
}
}
</script>
</body>
</html>
I separated the arrays, it works. Added a button to cycle through the videos.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vidArray</title>
</head>
<body>
<video id="vid" src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" loop controls width="480" height="auto">
Your browser sux, why haven't you upgraded to Chrome or Firefox? Do you live in a cave?
</video>
<button id="btn1">Next</button>
<script>
var poster = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.png", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.png"]
var videos = ["https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4", "https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4"]
var n = videos.length;
var cnt = 0;
function switchVideo(n) {
var vid = document.getElementById("vid");
var png = poster[n];
console.log('poster: ' + png);
var mp4 = videos[n];
console.log('video: ' + mp4);
vid.setAttribute('poster', png);
vid.src = mp4;
vid.load();
vid.play();
}
var btn1 = document.getElementById("btn1");
btn1.addEventListener('click', function(e) {
cnt++;
if (cnt < n) {
switchVideo(cnt);
} else {
cnt = 0;
switchVideo(cnt);
}
}, false);
</script>
</body>
</html>
I think you're looking for:
$('video').attr('loop','loop');