We Keep Coding

Custom Audio Player play and pause button

I am creating an audio playlist. I have created the custom audio player using the code below. It works fine although the issue is that i have auto play on which means that when the first song is over it automatically goes into the next song. This causes the play pause button to be all messed up. It is kind of hard to explain though if you go to this link and go the very end of a song you will know what i mean. Please help me, this is really holding me back.
<!--HTML5 audio-->
<audio id="audioPlayer" preload="true">
<source src="oh-my.mp3">
</audio>
<div id="wrapper">
<!--Audio Player Interface-->
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
</div>
<script src="js/html5audio.js" type="text/javascript"></script>

I'd recommend listening to the onplay event in your JavaScript. This event is raised when the audio starts playing. Here's an example:
document.getElementById('audioPlayer').onplay = function(){
document.getElementById('pButton').style.background = "url(pause.png)"
}
This causes the button to be changed to a pause button whenever the audio plays, regardless of whether is was started by a user click. I hope this helps!
EDIT
I've looked at your code some more, and I've discovered that this works:
$("#audioPlayer").on("ended play", function(){
$("#pButton").addClass("pause").removeClass("play")
})

React on screen doesn't work when I use it with React full-screen component

When I scroll down within the full page react's slides, though the page on the viewport of the screen the background color of the div does not change, I use react-on-screen npm package withing the full page react component but when I use the react-on-screen without full page react component it works great, I think when I scrolldown within the full-page-react slides the viewport don't think the new slides are new pages so the div background color doesn't change. Plus I tried to resize the window when the div in the last page is on the screen then the background is changed. Can you help me about this problem?
render() {
const { height } = this.state;
return (
<Layout>
<ReactFullpage
refresh
keyboardScrolling
lazyLoading
scrollOverflowReset={false}
slidesNavigation={deger}
onLeave={this.onLeave}
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<React.Fragment>
<div className="section">
<p>Section 1</p>
</div>
<div className="section">
<div className="Index_LogoWrapper" style={{ height }}>
<LogoImage />
<div className="Index_ContactUsWrapper">
<div className="Index_ContactUs">
For more information contact us at
info#mail.io
</div>
</div>
</div>
</div>
<div className="section">
<TrackVisibility>
<ComponentToTrack />
</TrackVisibility>
</div>
</React.Fragment>
</ReactFullpage.Wrapper>
);
}}
/>
</Layout>
);
}

If the component you use to change the color relies on the scrolling position then you'll have to use the option scrollBar of fullPage.js in your react-fullpage component.
Otherwise I would encourage you to use the fullpage.js callbacks such as afterLoad or onLeave or even use the fullpage.js state classes that get added to the body element.
See one of my video tutorials about how to perform CSS 3 animations with fullpage.js state classes:
https://www.youtube.com/watch?v=qiCVPpI9l3M

Stop CSS-animation when embedded YT is played

I've been trying to find some good ways of fixing this, but with no avail.
I've got a profile website I'm working on that uses a carousel to show of some of my previous work.
One of the items of the carousel is a YT iFrame. The carousel has two main functionalities:
A next and a previous buttons to navigate the carousel and
An animation that gets triggered when you mouse over an item of the carousel; much like flipping a card it turns over and displays some details of the project.
The items in the carousel are mainly images, but I've also added a YT iFrame. The problem I'm facing is quite obvious; when you hover over the item containing the iFrame it starts the flip-animation.
So what I need to do is check when the video is being played and then disable the animation (preferably for that item only)...
Any advice on how I could do that?
This is a codepen taken straight from my local machine (hence the script references).
https://codepen.io/Todai/pen/GqGJxR
Some sample code:
<div class="item c">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<iframe width="250" height="200" src="https://www.youtube.com/embed/92i9TvuVtQc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>

I think you should use IFrame player API. So you can embed a YouTube video player into your page and control player using JavaScript. The API will calls the onPlayerStateChange function when the player's state changed. And you will know when the video is playing and then remove the animation. You can see the following code below: The animation will add again until the video finish playing.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
stopAnimation();
done = true;
}else{
startAnimation();
done=false;
}
}
function stopAnimation() { $("#player").parent().parent().addClass('notransition');
} function startAnimation(){ $("#player").parent().parent().removeClass('notransition');
}

You will need the YouTube API for this, then use JS to detect if the video is playing and then only prevent flipping of the tile by ID.

YouTube API - change H1 tag based on mouseover of API grabbed thumbnails?

I'm working on a "latest videos" section for my website. I'm attempting to get it down on a test page before I move it to the homepage. I have an API call that grabs the info for my latest 3 uploads, and spits out their thumbnails. It also links the thumbnail to their appropriate video. What I want to do is then change the "Latest Videos" h1 tag to the title of the video when the thumbnail is moused over. How would I do that considering the following code? (I took out my playlist ID and API key from this example.)
<body>
<h1 id="mouse">Newest Videos</h1>
<div id="thumbnail">
<img id="thumb1" src="img/ajax-loader.gif" />
<img id="thumb2" src="img/ajax-loader.gif" />
<img id="thumb3" src="img/ajax-loader.gif" />
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
<script>
$thumbnail = $('#thumbnail');
$.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=3&playlistId=+{PlaylistID}&key={MyAPIKEY}', function ( data ) {
$('#thumb1').attr('src', data.items[0].snippet.thumbnails.medium.url);
$('#link1').attr('href', 'https://youtube.com/watch?v='+data.items[0].snippet.resourceId.videoId);
$('#thumb2').attr('src', data.items[1].snippet.thumbnails.medium.url);
$('#link2').attr('href', 'https://youtube.com/watch?v='+data.items[1].snippet.resourceId.videoId);
$('#thumb3').attr('src', data.items[2].snippet.thumbnails.medium.url);
$('#link3').attr('href', 'https://youtube.com/watch?v='+data.items[2].snippet.resourceId.videoId);
});
</script>
If the title of each video is located at data.items[#].snippet.title, how would I replace the text of the h1 tag on thumbnail mouseover?

You could add something along these lines to your .get callback:
$('#link1').mouseover(function() { $('#mouse').text(data.items[0].snippet.title);});
and to revert back when the mouse moves off:
$('#link1').mouseout(function() { $('#mouse').text('Newest Videos');});

Vimeo Gallery - separate title div - to change dynamically

Hi I am trying to build a gallery of videos on our website, and I have already done 90% of it, using the help from the following topic
Javascript Vimeo Gallery Basics
<div class="vimeo-container">
<iframe id="vplayer"
src="http://player.vimeo.com/video/.." frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><!--vimeo-container-->
<div id="vplayer_title">
<p>INSERT VIMEO VIDEO TITLE HERE FOR EACH VIDEO<p>
</div><!--vplayer_title-->
<div class="bucketthumbs">
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_1.jpg">
<div class="title_bucket" id="thumb1_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_2.jpg">
<div class="title_bucket" id="thumb2_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_3.jpg">
<div class="title_bucket" id="thumb3_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
</div><!--bucketthumbs-->
This is my html. Using the above topic. I am successfully able to target the thumbnails to change the video in the iframe.
<script>
$(function() {
// Add an event listener to the click event for each of your thumbnails
$('.video-thumbnail').click(function(e) {
// changes src of the iframe to the one we stored in the clicked thumbnail
$('#vplayer').get(0).src = this.getAttribute('video-uri');
// stops default browser behaviour of loading a new page
e.preventDefault();
});
});
</script>
But I dont want to use the title that vimeo has on the video.
Instead I want to display it below the main video and have it change with the video, pulling the titles from vimeo.
I am only a front end developer and my knowledge of javascript and API is extremely limited. I tried to use the same code to get the titles to change too but since that uses src, and attribute i dont think i know how to make it work.
Could someone pls help!? :(
I believe Vimeo has oEmbed that can make it easier. But I cant really understand much of the API, its too basic for me, If its too complicated to solve this issue by using vimeo video titles, a second aleternative would be for me to manually enter the titles on the respect bucket divs, all i need to know is how to dynamically change the title in the main vplayer_title div

You might want to use the player's JS API: https://developer.vimeo.com/player/js-api
Something like this in your thumbnail click event:
var player = $f(iframe);
player.addEvent('ready', function() {
player.api('getVideoTitle', function(title) {
// set the title contents here
$('#vplayer_title').html('<p>' + title + '</p>');
});
});