Elke webdeveloper doet het. Het bewaren van snippets, oftewel stukjes code die je ooit weer kan gebruiken of waarvan je weet dat je het vaker nodig zal hebben. Naast het bewaren van deze snippets, werk ik ze ook met regelmaat bij. Alles binnen mijn vakgebied is continu onderhevig aan verandering en snel ook.
Zo ben ik al vaker tegen de uitdaging aangelopen, om een manier van insluiten te bedenken voor YouTube video’s. Waar de gebruiker enkel en alleen een link hoeft te plaatsen naar de YouTube video en dat het systeem de rest doet. Nu zou je kunnen zeggen: “Maar, de gebruiker kan toch gewoon de embed code van YouTube plakken?” Ja, dat is wel waar, maar er zijn veel situaties te bedenken waar jij als webdeveloper de volledige controle wilt houden.
YouTube Video ID
Dan komen we dus bij het gebruik van de video id. Dat is de kleine code die in een YouTube url verwerkt zit. In de standaard YouTube link zit deze achter de “?V=”, kijk maar: http://www.youtube.com/watch?v=tkbgtVFlyCQ. Nou, dat zou niet al te moeilijk moeten zijn want je kan toch gewoon een split toepassen op “?v=” als delimiter… Was het maar zo makkelijk want er zijn veel soorten YouTube URL varianten.
Als er één ding is wat ik tot nu toe wel geleerd heb, is het dat je niks aan het toeval moet overlaten. Gebruikers doen dingen, die jij zelf nooit voor mogelijk had durven houden. Zo heb je de verkorte youtu.be variant en de variant met een playlist ID.
Een sterkere oplossing
Nee, het was tijd om eens wat langer voor deze uitdaging te gaan zitten om met een degelijke en betrouwbare oplossing te komen. Ik heb zitten stoeien met reguliere expressies om tot het volgende resultaat te komen:
[javascript]function checkYtUrl(url){
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
return (url.match(p)) ? RegExp.$1 : false ;
}[/javascript]
Het gebruik van deze functie is erg makkelijk, je hoeft enkel de functie aan te roepen:
[javascript]checkYtUrl(‘http://www.youtube.com/watch?v=tkbgtVFlyCQ’);[/javascript]
En je krijgt de video id terug (in dit geval: tkbgtVFlyCQ) en wanneer blijkt dat het geen YouTube url is, krijg je een lieve “false” terug. Natuurlijk is het mogelijk dat in de toekomst, er meerdere soorten URL’s bijkomen maar tot dan is deze regex precies goed. In ieder geval voor mij.
