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")
})

YouTube iFrame unclickable because of margins (Bootstrap)

I have a problem with my YouTube iFrame: it becomes not clickable when I set margin (negative ones). And that is not what I want! I would like the visitor to be able to play the video on my website.
To add a bit more context, it is a Bootstrap website, and the video is in a timeline. I set negative margins, so that I do not lose space on the page. If I do not set margins, I get a left item - everything on the right is blank -, then after scrolling to the end of the first item, I get the second one on the right - but everything is blank on the left, and so on...
I tried to use relative and absolute positions, but it does not work in bootstrap timelines (every item crash together when I change it).
Do you have any idea or clue about this issue?
Here is what my HTML looks like:
<li style="margin-top: -140px">
<div class="timeline-badge"><i class="fa fa-gamepad" id="round"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Solitaire Android app</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> November 2016 - Work in Progress</small></p>
</div>
<div class="timeline-body">
<p style="margin-bottom: 10px;">This solitaire card game is an Android application, that tells the player when there is no more move to do.
This feature exists on iOS but not on Android, as far as I know.
So I wanted to do this to avoid the player to lose time in looking for a solution that does not exist.
You can play by dragging and dropping cards on the screen.
I plan to publish it on the Play Store! </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A2nMAct2w88"></iframe>
</div>
<p style="margin-top: 10px;"><i>Technologies used: Java, Android</i></p>
</div>
</div>
</li>
And here is a link to my WIP-website, if it can help :)
http://horlogehumaine.net16.net/slegras/code.html

Are you talking about the small video in, say, "Solitaire Android App"?
If so, it's being relatively positioned among other relative/absolutely positioned things that are "covering" it.
Give .embed-responsive a z-index:1;

Play uploaded music in Rails

I have an app which allows users to upload music, but I'm having trouble setting up a player which allows them to then play that music.
On a user's page, this is a simplified example of his/her top tracks:
<% #top_tracks.each do |track| %>
<div class="top-track">
<button class="btn-play">
<i class="icon-play"></i>
</button>
<span><%= track.title %></span>
</div>
<% end %>
Each track has several properties, including but not limited to: title (self-explanatory), album_id (every track belongs to an album), file_url (URL of the MP3 file for the track), and album_position (order of the track within the album).
I would like to be able to click the .btn-play button for each track and have the corresponding audio play. Ideally, I would also have a dedicated player at the bottom of the page with full controls to pause, seek, adjust volume, and display the currently-playing song's information.
A simplified version of that player would look like this:
<div class="player">
<button class="play">
<i class="icon-play"></i>
</button>
<button class="pause">
<i class="icon-pause"></i>
</button>
<div>
<div class="now-playing">[currently playing track title would go here]</div>
<div class="seekbar"></div>
</div>
<div>
<button class="mute">
<i class="icon-mute"></div>
</button>
</div>
</div>
I'm not overly familiar with Javascript, or how to use methods such as .play() or .pause(). I have looked into the mediaelement_rails gem, but I'm not sure if that would be useful in this case. To summarize, how would I hook up the tracks so that:
1) when I click the .btn-play button it plays the track
2) the track's info would populate the appropriate info in the player
3) the player's controls would control the currently-playing track

If you want a full-featured player, then mediaelement.js is a good way to go, as it has fallback players for older browsers. Note that you do not have to use the rails, it's essentially just a wrapper for the js itself. That's up to you and how you want your application assets to be used/stored/called.
For BASIC html5 audio output, this is what I would:
Create a button with a data attribute of file source
Use jquery to grab the click event when a user clicks the button
Build an audio tag using the data attribute url with the autoplay option enabled (so it starts playing as soon as it's loaded)
So for a code example:
<button class="audioplay au-<%= upload.id %> btn btn-default" data-audiofile="/music.mp3">
Play Now
</button>
<script>
$(".audioplay").on("click", function(){
var source = $(this).data("audiofile");
var player = '<audio class="audioplayer" src="'+source+'" controls autoplay></audio>';
$(this).after(player);
});
</script>
Obviously, this is really really bare bones... it doesn't protect from clicking play multiple times, or removing any other players when a different song is selected, but those are things you can handle in javascript.

In addition to using audio_tag as Antarr Byrd has suggested, you can use Javascript to manipulate the media as described here.
For example, you could use the following:
<%= audio_tag #track.path, id: 'player' %>
<button id="play">Play</button>
<button id="pause">Pause</button>
With this accompanying Javascript:
$('#play').click(function() {
$('#player').get(0).play();
});
$('#pause').click(function() {
$('#player').get(0).pause();
});
One thing to note is that in the case of my example, #track.path refers to the name of the file in the /public/audios/ directory.

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>');
});
});

How to add vimeo player into pop up window when it clck on Image..???

I want to add video into my website. But I want to play that video within pop up window when user click on image. How can I do that.??
I want to create that look like this website.
https://www.shoplocket.com/
Thanxx :)

You could use colorbox
see here for example

Well first of all you should know what kind of popup you want. Just a new screen or a nice effect like the website you provided.
In the last case you could look at some popular popup possibilities like lightbox, fancybox,...
Depending on the plugin you choose, you'll have to check their documentation to embed video's.
Good luck!

Use PrettyPhoto.
Check out the Vimeo Content in it.
To open Vimeo content with it simply:
Create a link ().
Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
Change the href of your link so it points to the Vimeo video page, the same link you would share with friends.
Code:
<img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" />

To play a video put it as content of a popup
<video id="videoPop" class="video" controls >
<source src="adress">
</video>
This is popup itself:
HTML:
<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
JS:
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
When I write this the website you mentioned does not work, so I live CSS for you.
No you need HTML trigger:
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>