Youtube Iframe Api get video title - javascript

I am using the youtube iframe api to embed newest uploaded videos from a youtube channel onto my webpage. I am successfully able to do this; however, I need to get the title of each video as well and display it within the html next to each video. So far, I cannot find a solution to do so.
This is my code to retrieve one video. I am using this method so that I can embed the videos within a carousel that I have made, with each embedded video fetching the next latest upload (a different index from the same playlist).
<iframe width="300" height="300" src="http://www.youtube.com/embed?autoplay=0&max-results=1&controls=0&showinfo=1&rel=0&listType=user_uploads&list=channelName&index=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Can anyone provide me with some tips on how to obtain the title (and possibly other information related to the video such as a date)?
All help is greatly appreciated!
Thank You!
-TT

With the new YouTube API there's no way to do this using Javscript or jQuery. However, there seems to be solutions that use PHP:
Solution Using PHP
If you're not comfortable with PHP and/or you're not uploading a lot of YouTube Videos, I would suggest either hard-coding the titles into your HTML or creating a column(s) in your database for the relevant information.

Related

Take screenshot of youtube video playing in iframe

I am embedding youtube on my web app and I want to take a screenshot of specific timestamp programmatically by js.
So that I can store images of in the DB.
I tried html2canvas but it is not working out, please help.

auto-detect and auto-embed youtube videos. PHP or Javascript?

I run a 4chan style imageboard. When users post youtube or soundcloud links, I would like for the board to give a second link which, when clicked, would embed the video.
If I am not mistaken, 4chan uses JS to accomplish this. I have also seen many forum admins using php to do this. I know that wordpress uses php to do this.
If I went with php, I was thinking of going with something based on this:
https://www.warpconduit.net/2013/04/13/automatically-embedding-video-using-only-the-url-with-the-help-of-oembed/
For JS I am not entirely sure how to go about it. I would probably use a regex to detect youtube urls and then convert that information to an embed
You don't need RegEx, PHP or oEmbed to do this. Both sites allow iFrame embeds. So when a user gives a link just add the iframe embedding part yourself (around their link) and output that as part of the user's post.
Use String functions like indexOf to see if the link contains the word "soundcloud" or "youtube" then adjust user's given link to correct format for the iframe embedding.
Some examples:
Youtube : format = youtube.com/embed/ + User Link
User puts https://www.youtube.com/watch?v=KKE0Py64jmk so your code makes it as...
<iframe width="500" height="300"
src="https://www.youtube.com/embed/KKE0Py64jmk">
</iframe>
SoundCloud : format = w.soundcloud.com/player/?url= + User Link
User puts https://soundcloud.com/thenextmen/sofa-feat-pupajim then your code changes it to...
<iframe width="500" height="300"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com/thenextmen/sofa-feat-pupajim">
</iframe>

How to start creating HTML5 video gallery

I'm trying to learn how to make a video gallery with html5. I'm looking for tutorials and information to this but I only find information to make video galleries based on videos that are on youtube or vimeo or gender sites. But what I wanted is to create a video gallery with videos that I have stored on my computer disk. Does anyone know how can I do this? What is the js plugin or something that i can use to learn how to do this?
I'm not sure but these might help you;
http://easyhtml5video.com/
http://www.microsoft.com/web/post/adding-video-to-your-website-using-the-new-html5-video-tag
Try this:
It works just fine with videos stored localy: http://html5box.com/html5gallery/

Embedded youtube videos - Simply play a video without audio?

Question:
How can I control the sound output of this embedded video without overly complicating things?
Possible Solution (Complex)
I've looked into the youtube javascript control API, and, correct me if I'm wrong, but that will force me to incorporate a lot of complication into the setup to accomplish what appears to be a very simple task.
Note:
This is all only tested for webkit at this stage
Setup:
I've created an element that simulates an iphone controlling the channel of a tv by swapping youtube videos like so:
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
});
where the #channel-1 id is connected to a specific button on the remote, and the tv id is connected to the video player.
It looks like this:
Edit:
If the API is the only to accomplish this, please include a link to a comprehensive tutorial teaching the youtube web API, because I've looked, and found nothing. The only thing I've found so far is the official API page, and that's like trying to learn PHP from the manual.
For loading videos you would use loadVideoById rather than the rather odd snippet you have in your question and to play without audio you simply mute the player using player.mute() (where player is a reference retrieved from the youtube player element itself like described here). And one last thing, don't forget to add enablejsapi=1 to the url of the player as described here.
I would use
event.target.mute();

Get YouTube Audio URL on iOS

I am using this javascript code to get a downloadable video URL from the mobile youtube website.
[webView stringByEvaluatingJavaScriptFromString:#"function getURL() {var player = document.getElementById('player'); var video = player.getElementsByTagName('video')[0]; return video.getAttribute('src');} getURL();"];
Output URL: http://o-o.preferred.seabone-mil1.v22.nonxt2.c.youtube.com/videoplayback?el=results&begin=0&yms=5682703339584930992&itag=18&ip=87.0.0.0&app=youtube_mobile&signature=B8CD6B60D2609F5F137B885806F8FAECAA88492F.333D3F19876A77CECB264059A3852BD021401296&sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Csource%2Cratebypass%2Ccp&len=254000&ratebypass=yes&source=youtube&expire=1323579819&sver=3&key=yt1&ipbits=8&cp=U0hRSFVSV19GU0NOMV9NTEFJOmV5Qk5wc3hWaUxG&id=b8e73777013e0b7e&ps=blazer
I would like to do the same with just the audio of the video. But i haven't succeeded yet. Can anyone help me?
I solved it! I use the youtube-mp3.org api which works really good. there are some questions about it on SO with good answers!
It's going to be difficult to extract the audio only portions from an existing video from within iOS. I'm sure there are libs out there that can help, but I think it's going to be an involved topic.
Perhaps you can take a look at Display YouTube Videos Without Exiting Your Application. It describes ways to play youtube videos from within your iOS application. Now if you do something similar but set the view to be hidden, you would be able to "listen" to the youtube videos's audio without showing the video itself on the screen.
I don't know what the end-goal is for you're application, but perhaps my suggestion will be food-for-thought.

Categories