Embed Youtube channel "Gallery style" (iframe/javascript/??)

[marco282]

Hallo,

Ik ben op het moment bezig met website maken voor een vriend van me die actief is op gebied van streamen/youtube. Nu will ik zijn youtube channel embedden als gallery met thumbnails en als je er op klikt dat die opent in een "modal" window, nu is dit laatste minder belangrijk dan het probleem waar ik nu mee zit.

Ik kan nergens iets vinden over hoe ik dit kan implementeren, ik heb ook via youtube api geprobeerd. Nu kan ik dus via gdata van youtube wel de laatste 9 videos opvragen van een channel, en word ge returned als KLIK VOORBEELD. (voorbeeldje met channel name van tweakers)

Nu wil ik dus iets hebben zoals ytchannelembed.info (3 rows, 9 videos ) Via dit heb ik het ook ge implementeerd op het moment. Echter nadeel is dat als je er op klikt ga je naar de website van ytchannelembed en niet direct naar youtube. Dit vind ik een beetje onprofessioneel en heb dit liever daarom ook niet.

Weet iemand misschien een script oid of kan iemand mij in de juiste richting sturen om dit voor elkaar te krijgen?

Met vriendelijke groet en bijvoorbaad bedankt!

Marco

[RobIII]

marco282 schreef op dinsdag 03 september 2013 @ 20:39:
Weet iemand misschien een script oid of kan iemand mij in de juiste richting sturen om dit voor elkaar te krijgen?

Aan scriptrequests doen we hier niet aan, maar ik zie 't probleem even niet? Je hebt de data, kunt die uitlezen... dan kun je toch zelf makkelijk iemand naar de juiste url (uit die data) sturen

PHP:

$url = 'https://gdata.youtube.com/feeds/api/users/tweakers/uploads?max-results=9';

if(!$xml = simplexml_load_file($url))
  exit('Failed to open '.$url);

foreach ($xml->entry as $e) {
  echo '<a href="' . htmlentities($e->link->attributes()->href) . '">' . htmlentities($e->title) . '</a><br>';
}

Geeft:

HTML:

<a href="https://www.youtube.com/watch?v=zVqfWJzQoyU&amp;feature=youtube_gdata">Nintendo's najaarsoffensief en de herkansing voor de Wii U</a>
<a href="https://www.youtube.com/watch?v=gIicrEXJobk&amp;feature=youtube_gdata">Hands-on: Assassin's Creed IV: Black Flag</a>
<a href="https://www.youtube.com/watch?v=AT_IjTbfBxU&amp;feature=youtube_gdata">Hands-on: Killzone: Shadow Fall</a>
<a href="https://www.youtube.com/watch?v=rOAeDtClXeI&amp;feature=youtube_gdata">Hands-on: Command &amp; Conquer</a>
<a href="https://www.youtube.com/watch?v=XjYda52hBcY&amp;feature=youtube_gdata">Hands-on: Need for Speed: Rivals</a>
<a href="https://www.youtube.com/watch?v=QceemhbpC84&amp;feature=youtube_gdata">Hands-on: Xcom: Enemy Within</a>
<a href="https://www.youtube.com/watch?v=QcMqTZEWmy8&amp;feature=youtube_gdata">Hands-on: Diablo III: Reaper of Souls</a>
<a href="https://www.youtube.com/watch?v=-tPRfNFkg0I&amp;feature=youtube_gdata">Hands-on: Titanfall</a>
<a href="https://www.youtube.com/watch?v=n_oDsSCEPd8&amp;feature=youtube_gdata">Hands-on: Battlefield 4</a>

Ofwel:

Nintendo's najaarsoffensief en de herkansing voor de Wii U
Hands-on: Assassin's Creed IV: Black Flag
Hands-on: Killzone: Shadow Fall
Hands-on: Command & Conquer
Hands-on: Need for Speed: Rivals
Hands-on: Xcom: Enemy Within
Hands-on: Diablo III: Reaper of Souls
Hands-on: Titanfall
Hands-on: Battlefield 4

En als ik dan even doorfrot met mijn 1337 PHP skillz0rs:

PHP:

$url = 'https://gdata.youtube.com/feeds/api/users/tweakers/uploads?max-results=9';

if(!$xml = simplexml_load_file($url))
  exit('Failed to open '.$url);

echo '<ul>';
foreach ($xml->entry as $e) {
  $href = $e->link->attributes()->href;
  preg_match('/watch\?v=([a-z0-9_\-]+)/i', $href, $m);
  echo '<li><a href="' . htmlentities($href) . '"><img src="http://img.youtube.com/vi/' . htmlentities($m[1]) . '/default.jpg"></a>';
}
echo '</ul>';

Geeft:

HTML:

<ul>
<li><a href="https://www.youtube.com/watch?v=zVqfWJzQoyU&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/zVqfWJzQoyU/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=gIicrEXJobk&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/gIicrEXJobk/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=AT_IjTbfBxU&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/AT_IjTbfBxU/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=rOAeDtClXeI&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/rOAeDtClXeI/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=XjYda52hBcY&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/XjYda52hBcY/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=QceemhbpC84&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/QceemhbpC84/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=QcMqTZEWmy8&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/QcMqTZEWmy8/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=-tPRfNFkg0I&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/-tPRfNFkg0I/default.jpg"></a>
<li><a href="https://www.youtube.com/watch?v=n_oDsSCEPd8&amp;feature=youtube_gdata"><img src="http://img.youtube.com/vi/n_oDsSCEPd8/default.jpg"></a>
</ul>

Ofwel:
[q]

• 
• 
• 
• 
• 
• 
• 
• 
• 

CSS'je op je UL / LI d'rtegenaan et voila.



Ik laat even foutafhandeling, escaping etc. buiten beschouwing, doe nogal wat aannames (zonder te googlen) over video Id's en mogelijk zijn er betere/handigere API's van YouTube beschikbaar. Dat alles laat ik als oefening aan de lezer Ik ben puur even uit gegaan van de URL die jij aandroeg en één van de dingen die me stoorde was dus dat ik 't video-id uit de URL moest peuteren; daar zijn vast handigere/betere API-calls voor (of wat parameters die je aan de huidige kunt meegeven) en voor de thumbnails heb ik even de eerste-de-beste hit genomen want ook die zitten niet in de data.

Ook kun je natuurlijk nog de title/content/whatnot's allemaal gebruiken voor tooltipjes, descriptions in je modal etc.

[ Voor 140% gewijzigd door RobIII op 03-09-2013 21:57 ]

[marco282]

RobIII schreef op dinsdag 03 september 2013 @ 20:44:
[...]

Aan scriptrequests doen we hier niet aan, maar ik zie 't probleem even niet? Je hebt de data, kunt die uitlezen... dan kun je toch zelf makkelijk iemand naar de juiste url (uit die data) sturen

PHP:

$url = 'https://gdata.youtube.com/feeds/api/users/tweakers/uploads?max-results=9';

if(!$xml = simplexml_load_file($url))
  exit('Failed to open '.$url);

foreach ($xml->entry as $e) {
  echo '<a href="' . $e->link->attributes()->href . '">' . htmlentities($e->title) . '</a><br>';
}

Geeft:


[...]


En als ik dan even doorfrot met mijn 1337 PHP skillz0rs:

PHP:

$url = 'https://gdata.youtube.com/feeds/api/users/tweakers/uploads?max-results=9';

if(!$xml = simplexml_load_file($url))
  exit('Failed to open '.$url);

echo '<ul>';
foreach ($xml->entry as $e) {
  $href = $e->link->attributes()->href;
  preg_match('/watch\?v=([a-z0-9_\-]+)/i', $href, $m);
  echo '<li><a href="' . $href . '"><img src="http://img.youtube.com/vi/' . $m\[1] . '/default.jpg"></a>';
}
echo '</ul>';

Geeft:


[...]


CSS'je op je UL / LI d'rtegenaan et voila.

[afbeelding]	[afbeelding]	[afbeelding]
[afbeelding]	[afbeelding]	[afbeelding]
[afbeelding]	[afbeelding]	[afbeelding]

Ik laat even foutafhandeling, escaping etc. buiten beschouwing, doe nogal wat aannames (zonder te googlen) over video Id's en mogelijk zijn er betere/handigere API's van YouTube beschikbaar. Dat alles laat ik als oefening aan de lezer Ik ben puur even uit gegaan van de URL die jij aandroeg en één van de dingen die me stoorde was dus dat ik 't video-id uit de URL moest peuteren; daar zijn vast handigere/betere API-calls voor (of wat parameters die je aan de huidige kunt meegeven) en voor de thumbnails heb ik even de eerste-de-beste hit genomen want ook die zitten niet in de data.

Geen idee hoe ik je moet bedanken! Punt is dat de hele website in html is geschreven en ik weinig ervaring met php heb en ik dus geen idee had waar ik moest beginnen. er is inderdaad een betere api beschikbaar dat klopt maar die moet ik nog aan de praat zien te krijgen want die moet je hosten op je eigen website en via dat kun je dan een request doen (je moet dan ook authorized account hebben).

Maar ben je iedergeval reuze dankbaar en mijn excuus voor vraag naar scripts. Zal even goed kijken naar hoe je je php hebt gedaan en hopelijk leer ik er dan ook nog wat van.

Met vriendelijke groet,

Marco Nijholt

[RobIII]

offtopic:
Wij tweakers doen elkaar permanent de groeten

Je hebt geluk dat ik in een goede bui was en je niet gewoon naar een PHP tutorial heb gestuurd. Ach, er blijft nog genoeg over om zelf aan te sleutelen voor 't helemaal goed is

[ Voor 42% gewijzigd door RobIII op 03-09-2013 21:33 ]

[marco282]

RobIII schreef op dinsdag 03 september 2013 @ 21:32:

offtopic:
Wij tweakers doen elkaar permanent de groeten

Je hebt geluk dat ik in een goede bui was en je niet gewoon naar een PHP tutorial heb gestuurd. Ach, er blijft nog genoeg over om zelf aan te sleutelen voor 't helemaal goed is

Mweh ben dat zo gewend mijn excuus haha heb dat nog nooit eerder gehoord op het overclock forum waar ik vooral actief ben! mijn excuus.

Marco

[RobIII]

marco282 schreef op dinsdag 03 september 2013 @ 21:33:
Marco

Doe je 't weer

[marco282]

RobIII schreef op dinsdag 03 september 2013 @ 21:34:
[...]

Doe je 't weer

Ik doe toch geen groeten:p ?

[marco282]

RobIII schreef op dinsdag 03 september 2013 @ 21:32:

offtopic:
Wij tweakers doen elkaar permanent de groeten

Je hebt geluk dat ik in een goede bui was en je niet gewoon naar een PHP tutorial heb gestuurd. Ach, er blijft nog genoeg over om zelf aan te sleutelen voor 't helemaal goed is

Dat zeker!
Heb het nu met css en al goed verwerkt, hetgeen waar ik nu mee zit is ik wil ook de video title eruit halen. en dat dan ook boven elke video zetten.
Nu probeer ik dus die php functie preg_match te snappen alleen lukt nog niet helemaal.

preg_match('/watch\?v=([a-z0-9_\-]+)/i', $href, $m);

Dat is dus de functie die je opvraagt, als ik zo beetje probeer te snappen

Ik moet dus de tekst exporten tussen <media:title type='plain'> en </media:title>

preg_match([een string?], $href, $k);

Maar ik snap niet hoe die string opgebouwd is. Kun je hier misschien meer info over geven, je hoeft t uiteraard niet voor te kouwen want wil t ook snappen.

[RobIII]

marco282 schreef op dinsdag 03 september 2013 @ 23:29:
Ik moet dus de tekst exporten tussen <media:title type='plain'> en </media:title>

Dan moet je alles tussen <media:title> en </media:title>, en zelfs de complete response die je krijgt van YT, niet meer als een string beschouwen maar als een document / elementen. Het is niet voor niets dat ik simplexml_load_file gebruik i.p.v. dat ik met file_get_contents of cURL de response ophaal en met substr en regexes die "tekst" ga zitten uitpluizen. Het is XML, benader 't dan ook als XML. De variabele $e die ik gebruik in de for-lus bevat dus ook, voor jou geparsed en wel, de title:

PHP:

$url = 'https://gdata.youtube.com/feeds/api/users/tweakers/uploads?max-results=9'; 

if(!$xml = simplexml_load_file($url)) 
  exit('Failed to open '.$url); 

foreach ($xml->entry as $e) { 
 echo($e->title) . '<br>';
}

Nintendo's najaarsoffensief en de herkansing voor de Wii U
Hands-on: Assassin's Creed IV: Black Flag
Hands-on: Killzone: Shadow Fall
Hands-on: Command & Conquer
Hands-on: Need for Speed: Rivals
Hands-on: Xcom: Enemy Within
Hands-on: Diablo III: Reaper of Souls
Hands-on: Titanfall
Hands-on: Battlefield 4

Overigens wordt $e->title in mijn eerste codevoorbeeld ook gebruikt

marco282 schreef op dinsdag 03 september 2013 @ 23:29:
Maar ik snap niet hoe die string opgebouwd is. Kun je hier misschien meer info over geven, je hoeft t uiteraard niet voor te kouwen want wil t ook snappen.

De syntax vind je hier, maar zoals gezegd: niet gebruiken in dit geval. Ik gebruikte die regex enkel-en-alleen om even snel uit die URL een Id te plukken; niet om de XML te "lezen". Had 't Id in de response gezeten (als in: <videoid>...</videoid> of iets in die trant) dan had ik gewoon $e->videoid kunnen gebruiken. Helaas is $e->id gevuld met http://gdata.youtube.com/feeds/api/videos/zVqfWJzQoyU (waar ik dan weer net zo goed 't Id zVqfWJzQoyU uit had kunnen plukken). In de response zitten overigens ook links naar de thumbnails zag ik net pas ( ) dus die had ik ook beter kunnen gebruiken i.p.v. http://img.youtube.com/vi/.... te 'hardcoden'. Dan had ik 't id helemaal niet "apart" / "los" nodig gehad zelfs.

Je kunt hier even een blik werpen hoe je alle elementen uit de response benadert en anders hier of hier of hier of... etc. even spieken voor wat specifiekere uitleg.

[ Voor 26% gewijzigd door RobIII op 04-09-2013 00:13 ]