I'm using a background player that works like this:
function Background(flashID) {
this.flashID = flashID;
this.swfRef = null;
this.onReady = function() { };
this.registerswfRef = function() {
if (this.swfRef == null)
this.swfRef = swfobject.getObjectById(this.flashID);
};
this.playMovieByNum = function(movieID) {
this.registerswfRef();
this.swfRef.playMovieByNum(movieID);
};
And this order to call the video:
var background = new Background('back_1');// id for the backgground movie
function onReady(id)
{
//this function will run when the background has finished loading the xml.
//console.log('backgorund is now ready '+id); // id is passed from flash file.
};
window.onload =function()
{
document.getElementById('video1').onclick=function(){background.start(); background.playMovieByNum(1); };
document.getElementById('video2').onclick=function(){background.start(); background.playMovieByNum(2); };
document.getElementById('video3').onclick=function(){background.start(); background.playMovieByNum(3); };
document.getElementById('video4').onclick=function(){background.start(); background.playMovieByNum(4); };
document.getElementById('video5').onclick=function(){background.start(); background.playMovieByNum(5); };
document.getElementById('video6').onclick=function(){background.start(); background.playMovieByNum(6); };
document.getElementById('video7').onclick=function(){background.start(); background.playMovieByNum(7); };
document.getElementById('video8').onclick=function(){background.start(); background.playMovieByNum(8); };
};
I need the background of the button relative the running video changes color.
For example, if the video "1" is running, the button '#video1' will get the background "#EF4123", if not background is "none".
I tried adding it, but only changes the background when you click on the button:
this.playMovieByNum = function(movieID) {
this.registerswfRef();
this.swfRef.playMovieByNum(movieID);
for(i = 1; i <= 8; i++)
{
if(i == movieID)
$("#video" + i).css("background", "#EF4123");
else
$("#video" + i).css("background", "");
}
};
I need it to change automatically when changing the video also.
You can see this working here:
http://luisgustavoventura.com
Suggestions please.
Thank you.
Related
I would like to play through Vimeo videos in sequence with JavaScript with continuous playback and looping through items. The following code moves to the second video at the end of the first but the same functions are not called at the end of the second video. Only the end of the first video shows Called! in the Javascript console, not the end of the second.
The Vimeo Player SDK has player.getVideoId() but not player.setVideoId() so I used a hack to load the next video: setting the source of the iframe and starting the Vimeo player anew. I wonder if this is the problem and the listener for the end of the video is attached to the discarded player.
Another issue with this code is that it exits fullscreen to load the next video.
I attempted this CodePen that sets the Vimeo Player on any element instead of an iframe and was unable to change the played video.
What is a cleaner or effective way of changing videos with the Vimeo Player SDK?
The HTML is:
<div class="vimeo">
<div class="resp-iframe-container container-centered">
<iframe class="resp-iframe" scrolling="no" frameborder="no" src="https://player.vimeo.com/video/238301525" allowfullscreen="" data-ready="true"></iframe></div></div>
And the javascript is:
var l = ["238301525", "496371201", "238301525", "496371201", "..."];
window.current = 0;
var increment = function() {
window.current += 1;
if (window.current == l.length) {
window.current = 0;
}
};
var decrement = function() {
window.current -= 1;
if (window.current < 0) {
window.current = l.length - 1;
}
};
prevA.addEventListener("click", function() {
decrement();
loadPlayer();
});
nextA.addEventListener("click", function() {
increment();
console.log("here!");
loadPlayer();
console.log("there!");
});
var loadPlayer = function() {
console.log("Called!");
var iframe = document.querySelector('iframe');
iframe.src = "https://player.vimeo.com/video/" + l[window.current];
var player = new Vimeo.Player(iframe);
player.autoplay = true;
var treatEvent = function(data, eventLabel) {
// Custom code...
if ("end" == eventLabel) {
console.log("incrementing automatically");
increment();
loadPlayer();
}
};
var onPlay = function(data) {
treatEvent(data, "play");
}
var onPause = function(data) {
treatEvent(data, "pause");
}
var onSeeked = function(data) {
treatEvent(data, "seeked");
}
var onEnd = function(data) {
treatEvent(data, "end");
}
player.on('play', onPlay);
player.on('pause', onPause);
player.on('seeked', onSeeked);
player.on('ended', onEnd);
setTimeout(function() {
//console.log("Trying to play...");
player.play().then(function() {
// the video was played
console.log("success: video played");
}).catch(function(error) {
console.log("Error! " + error.name);
});
}, 1000);
}
loadPlayer();
It seems that the Vimeo Player keeps track of whether it was initialized, adding a tag data-vimeo-initialized="true" in the HTML element.
One solution is to use the Vimeo Player SDK function .loadVideo():
var song_iframe = document.querySelector("iframe#song_video");
var song_player = new Vimeo.Player(song_iframe);
var on_song_end = function(data) {
// Logic to get the new id.
song_player.loadVideo(newId).then(function() {
song_player.play();
});
};
song_player.on("ended", on_song_end);
I'm trying to play videos one after the other in the same Vimeo player, without success.
This is the code I'm working on. I can't find any example on how to do that.
I'm sure I'm wrong but I don't know how to go further...
var iframe = document.querySelector('iframe.main-player');
var player = new Vimeo.Player(iframe);
var video_ids = ['123456789', '987654321'];
video_ids.forEach(function(item, index) {
player.pause();
player.loadVideo(item);
player.on('loaded', function() {
player.play();
});
})
I'm not sure about this, because can't test it right now , but you can try something like this:
var iframe = document.querySelector('iframe.main-player');
var player = new Vimeo.Player(iframe);
var video_ids = ['123456789', '987654321'];
var index = 0;
var playNext = function(data){
player.pause();
if(index<=video_ids.length)
player.loadVideo(video_ids[index++])
}
player.pause();
player.loadVideo(video_ids[index++]);
player.on('loaded', function() {
player.play();
});
player.on('ended', playNext);
The idea is pretty simple by listen to the ended event then moving to the next item.
First of all, we just create a class to hold some information such as the list & current playing index:
import Player from "#vimeo/player";
class Playlist {
constructor(playlist) {
this.playlist = playlist;
this.currentIdx = 0;
}
init() {
this.player = new Player("app", {
id: this.currentItem,
width: 640
});
this.player.on("ended", this.onEnded.bind(this));
}
onEnded() {
if (this.currentIdx < this.playlist.length) {
this.currentIdx++;
const nextId = this.currentItem;
this.player.loadVideo(nextId);
// Check next item has loaded then play it automatically
// you might not receive any error in case of having to interact with document
this.player.on("loaded", () => {
this.player.play();
});
}
}
get currentItem() {
return this.playlist[this.currentIdx];
}
}
// Try to run 2 items
const pl = new Playlist([59777392, 28582484]);
pl.init();
NOTE: I also created a codesandbox link for you here https://codesandbox.io/s/focused-firefly-ej0fd?file=/src/index.js
I have a page with couple subpages in .html. On every page there is two "buttons" for language change. Is there any solution, that help me keep currently selected language after a page refresh or moving to another subsite?
This is my code:
// Language icons //
var polIco = $('.language_ico_container').find('img').first();
var engIco = $('.language_ico_container').find('img').last();
engIco.toggleClass('transparency');
function checkTransparency() {
engIco.click(function () {
$(this).toggleClass('transparency');
if (engIco.hasClass('transparency')) {
polIco.removeClass('transparency');
} else {
polIco.addClass('transparency');
}
});
polIco.click(function () {
$(this).toggleClass('transparency');
if (polIco.hasClass('transparency')) {
engIco.removeClass('transparency');
} else {
engIco.addClass('transparency');
}
});
};
// Call function checking transparency in language icons //
checkTransparency();
// English & Polish content selection //
var languagePL = $('.pl');
var languageEN = $('.eng');
languageEN.toggleClass('hidden');
function changeLanguage() {
engIco.click(function () {
languageEN.toggleClass('hidden');
languagePL.toggleClass('hidden');
});
polIco.click(function () {
languageEN.toggleClass('hidden');
languagePL.toggleClass('hidden');
});
};
// Call function changing content language
changeLanguage();
And CSS classes:
.hidden {
display: none;
}
.transparency {
opacity: 0.5;
}
LocalStorage can be a solution is used to save data across browser sessions..
You can implement your classes with session storage, every time you set transparency class you can add it to the local storage.
localStorage.setItem('class','transparency');
when you remove the class you can also remove it from the local storage
localStorage.removeItem('class');
And when the page is refreshed you can set the class from the localStorage
localStorage.getItem('class');
Its just an instant idea on which you can build own solution:
$.fn.toggleTransparency = function () {
if (localStorage[this] === undefined) {
localStorage[this] = true
} else {
localStorage[this] = !localStorage[this]
}
localStorage[this]
? this.addClass('transparency')
: this.removeClass('transparency')
}
// Usage:
$(selector).toggleTransparency()
I was able to find this solution:
var polIco = $('.language_ico_container').find('img').first();
var engIco = $('.language_ico_container').find('img').last();
// English content hidden on load //
engIco.addClass(localStorage.added);
engIco.on('click', function() {
switchEngTransparency();
});
function switchEngTransparency() {
if (localStorage.added != 'transparency') {
engIco.addClass('transparency', true);
localStorage.added = 'transparency';
} else {
engIco.addClass('transparency', false);
localStorage.added = '';
}
};
function deactivateOppositeIcon() {
if (!engIco.hasClass('transparency')) {
polIco.addClass('transparency');
} else {
polIco.removeClass('transparency');
}
};
deactivateOppositeIcon();
.transparency {
opacity: 0.5;
}
But the problem is - when i click on engIco the transparency is changing only after refreshing site or moving to another subsite. It's not changing immediately. Any ideas how to fix it?
I am new to web development and I love it.
But I've have encountered a problem and I can't figure it out.
When i lose my focus on my browser tab, my fade effect ,made for my images when they are change, is turns on multiple times. .
Another problem, i really want my images inside of my div element to be like : http://jsfiddle.net/eb51hxj1/ when i resize the browser.
<div class="divImage">
<img id="image"> </div>
<div>
My code is :
https://jsfiddle.net/a2bsarfb/
Make a new var that checks for the window focus. When the window focus is gone then just skip the rest of the code.
At the very top add a new var:
var lostFocus = false;
In the Caller function add:
if(lostFocus){ return false; }
So it will look like:
function Caller() {
var imag = ["https://i.ytimg.com/vi/tq0H6nQMdNk/maxresdefault.jpg", "https://i.ytimg.com/vi/4qVMnkF7W60/maxresdefault.jpg", "https://s-media-cache-ak0.pinimg.com/originals/52/1d/e6/521de6a52e774664745132156448f43b.jpg"];
var numarImagini = imag.length - 1;
var i = Math.floor((Math.random() * imag.length));
Rotate(imag[i], i);
i++;
setInterval(function() {
if(lostFocus){ return false; }
if (i > imag.length - 1) {
i = 0;
Rotate(imag[i], i);
i++;
} else {
Rotate(imag[i], i);
i++;
}
}, 2000)
}
And at the bottom add the event listeners:
window.onblur = function() { lostFocus = true; };
window.onfocus = function() { lostFocus = false; };
Im trying to pause a timed slideshow when you're hovering over a div
<div id="play_slide" onMouseOver="clearTimeout(playTime)"></div>
If i put onMouseOver="clearTimeout(playTime)" inside an li on the page, it'll pause, so I know my code is correct, it just wont work on the div! Also if i get rid of the id, it will alert when i put an alert function into an event handler
This is the js.
var playTime;
function playSlide()
{
var slideshow = document.getElementById("play_slide").style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if(indexPlay > images.length - 1)
{
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";
playTime = setTimeout("playSlide()", 2500);
}
you can see this here: www.nicktaylordesigns.com/work.html
I would do it like this:
( and no inline script... just <div id="play_slide">Something</div> )
var playTime;
var indexPlay = 0;
var slideElement;
window.onload = function () {
slideElement = document.getElementById("play_slide");
slideElement.addEventListener('mouseenter', function () {
console.log('stop');
clearTimeout(playTime);
});
slideElement.addEventListener('mouseleave', function () {
console.log('continue');
playTime = setTimeout(playSlide, 2500);
});
playSlide();
}
function playSlide() {
var slideshow = slideElement.style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if (indexPlay > images.length - 1) {
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/" + images[indexPlay] + ".png')";
playTime = setTimeout(playSlide, 2500);
}
Fiddle
This issue is related to the script loading. Your script gets loaded after the DOM is processed so function doesn't get attached to the event.
If you are using jQuery then you can use below code.
$(function () {
$("#play_slide").mouseover(function(){
var playTime = 33;
clearTimeout(playTime);
});
});
If you don't want to use JQuery then you can do the same thing in JavaScript as below.
window.onload = function(){
document.getElementById("play_slide").onmouseover = function(){
var playTime = 33;
clearTimeout(playTime);
};
}
I got it! the div tag was somehow broken, I coded a div around it and gave it the event handlers and a class. That worked, then i simply changed the class to an id and got rid of the original div. Idk what was going on but it works now. Thanks for your suggestions!
Can you try this,
<div id="play_slide" onmouseover="StopSlide();">Stop</div>
<script>
var playTime;
var indexPlay;
function playSlide()
{
var slideshow = document.getElementById("play_slide").style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if(indexPlay > images.length - 1)
{
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";
playTime = setTimeout("playSlide()", 2500);
}
function StopSlide(){
window.clearTimeout(playTime);
}
playSlide();
</script>