Accentsconagua

Snelle tip uw eigen video-shortcode

Code
Share

U gebruikt waarschijnlijk een invoegtoepassing voor video-integratie of u gebruikt gewoon de insluitcodes van videosites. Maar er is nog een derde, eenvoudigere manier om video's in te bedden in uw WordPress-site: een eenvoudige (maar nuttige) video-shortcode.

Waarom zou ik een video-shortcode gebruiken??

  • Omdat invoegtoepassingen voor video-invoeging gewoon een andere last vormen voor uw blog. Ze nemen wat ruimte in beslag op uw schijf (verleend, niet meer dan 1 MB), ze vragen altijd naar uw database voor hun opties en u moet leren hoe de plug-ins te gebruiken.
  • Omdat het insluiten van de codes van de videosites kan worden beschadigd - vooral wanneer u schakelt tussen de WYSIWYG-editor en de HTML-editor.
  • En vooral: omdat shortcodes geweldig zijn! Ze zijn gemakkelijk te gebruiken, ze kunnen de functionaliteit van veel plug-ins hebben en hun code breekt niet in uw berichten!

Verkennen van de videosites

We gaan met 7 video-hostingwebsites werken:

  1. YouTube (duidelijk!)
  2. Vimeo
  3. Dailymotion
  4. Yahoo! Scherm
  5. Blip.tv
  6. Veoh
  7. Viddler

Laten we eens kijken hoe hun embed-codes er uit zien:

YouTube

De standaard insluitcode ziet er als volgt uit:

 / * Originele video: youtube.com/watch?v=dQw4w9WgXcQ * /

Maar er is één optie, de "privacy-enhanced mode" die "-nocookie" toevoegt aan het domein en we gaan het gebruiken in onze shortcode.

Vimeo

 / * Originele video: vimeo.com/36804448 * /

Eenvoudig en elegant. Dat is waarom mensen van Vimeo houden.

Dailymotion

 / * Originele video: dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto * / 
BridgeStone 15 Sec spot door DailymotionUSA

Ik denk dat het toevoegen van een link onder de insluitcode rechtvaardig is niet cool, dus we voegen dat niet toe aan onze shortcode.

Yahoo! Scherm

 / * Originele video: screen.yahoo.com/mysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html * /

De insluitcode is een beetje raar op Yahoo! Scherm, maar ik vond een manier om het in te korten, wat gemakkelijker zal zijn in onze shortcode.

Blip.tv

 / * Oorspronkelijke video: blip.tv/mister-glasses/episode-7-5600357 * /

Dit is een moeilijke situatie - deze heeft niet de video-ID (uit de URL van de video) in de insluitcode. Maar dankzij wat onderzoek, ben ik erachter gekomen hoe ik de ID moest gebruiken! :)

Veoh

 / * Originele video: veoh.com/watch/v27458670er62wkCt * / 
Kijk Intense Cat in Animals | Bekijk meer gratis video's online op Veoh.com

Ah, de tag ... Maak je geen zorgen, we gaan het niet gebruiken!

Viddler

 / * Originele video: viddler.com/v/978c9ba2 * /

Dat is alles. Laten we nu naar het leuke gedeelte gaan!

De shortcode: [Vid]

We maken 4 attributen voor deze shortcode - de naam van de site, de ID van de video en de breedte en hoogte van de video. U kunt een aantal standaardwaarden voor de kenmerken instellen:

 functie vid_sc ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'youtube', 'id' => ", 'w' => '400', 'h' => '250 '), $ atts)); add_shortcode (' vid ',' vid_sc ');

Dan komt het gedeelte waar de functie de genereert $ src variabele die de src attribuut voor de iframe:

 // YouTube met "privacy-enhanced mode": if ($ site == "youtube") $ src = 'http://www.youtube-nocookie.com/embed/'.$id;  // Vimeo: else if ($ site == "vimeo") $ src = 'http://player.vimeo.com/video/'.$id;  // Dailymotion: else if ($ site == "dailymotion") $ src = 'http://www.dailymotion.com/embed/video/'.$id;  // Yahoo! Scherm met enkele bezuinigingen in de URI: else if ($ site == "yahoo") $ src = 'http://d.yimg.com/nl/vyc/site/player.html#vid='.$id ;  // Blip.tv met enkele "hacks" in de URI: else if ($ site == "bliptv") $ src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http : //blip.tv/rss/flash/'.$id;  // De Veoh URI heeft ook enkele hacks: else if ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay= 0 & permalinkId =' $ id.;  // Viddler: else if ($ site == "viddler") $ src = 'http://www.viddler.com/simple/'.$id;

En natuurlijk, wij terugkeer het resultaat. Hier is de volledige code van onze gloednieuwe video shortcode:

 functie vid_sc ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'youtube', 'id' => ", 'w' => '600', 'h' => '370 '), $ atts)); if ($ site == "youtube") $ src =' http://www.youtube-nocookie.com/embed/'.$id; else if ($ site == "vimeo") $ src = 'http://player.vimeo.com/video/'.$id; else if ($ site == "dailymotion") $ src =' http: //www.dailymotion .com / embed / video /'.$ id; else if ($ site == "yahoo") $ src = 'http://d.yimg.com/nl/vyc/site/player.html#vid = '. $ id; else if ($ site == "bliptv") $ src =' http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss /flash/'.$id; else if ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId=' . $ id; else if ($ site == "viddler") $ src = 'http://www.viddler.com/simple/'.$id; if ($ id! = ") ga terug'';  add_shortcode ('vid', 'vid_sc');

Tip binnen de snelle tip: houd er rekening mee dat de iframe heeft twee CSS-klassen: vid en iframe- $ locatie (bijv. iframe-youtube). Je zou moeten toevoegen vid border: 0; naar uw CSS-bestand omdat we het frameborder attribuut in onze iframe label.

Gebruiksvoorbeelden

Het standaardgebruik is eenvoudig genoeg:

[vid site = "youtube" w = "600" h = "340"]

Maar om het even te maken eenvoudigere, we stellen standaardwaarden in voor plaats, w en h. Dus als u een YouTube-video wilt insluiten, kunt u deze zo gebruiken:

[Vid]

U moet de breedte en hoogte aanpassen aan uw blog. Als je Vimeo meer gebruikt dan YouTube, kun je de standaardinstelling wijzigen plaats waarde voor "vimeo".

Dat is het! Voeg dit toe aan uw functions.php bestand en u kunt beginnen met het gebruik van de shortcode. Genieten!

Update: we hebben nu een gedeelte met gebruiksvoorbeelden aan het artikel toegevoegd om de zaken duidelijker te maken.

Code
×