Статьи

Совет: Ваш собственный видео шорткод

Май 1, 2019

Возможно, вы используете плагин для встраивания видео или просто используете коды для встраивания видео сайтов. Но есть третий, более простой способ встраивания видео на ваш сайт WordPress: простой (но полезный) шорткод видео.

Почему я должен использовать шорткод видео?

  • Потому что плагины для встраивания видео — это еще одно небольшое бремя для вашего блога. Они занимают некоторое место на вашем диске (предоставляется не более 1 МБ), они всегда запрашивают в вашей базе данных свои опции, и вам необходимо научиться использовать плагины.
  • Потому что встраивание кодов видео сайтов может быть повреждено — особенно когда вы переключаетесь между редактором WYSIWYG и редактором HTML.
  • И самое главное: шорткоды потрясающие! Они просты в использовании, они могут иметь функциональность многих плагинов, и их код не ломается в ваших сообщениях!

Изучение видео сайтов

Мы собираемся работать с 7 видеохостингами:

  1. YouTube (очевидно!)
  2. Vimeo
  3. Dailymotion
  4. Yahoo! экран
  5. Blip.tv
  6. Veoh
  7. Viddler

Давайте посмотрим, как выглядят их встраиваемые коды:

YouTube

Код для встраивания по умолчанию выглядит следующим образом:

1
2
/* Original video: youtube.com/watch?v=dQw4w9WgXcQ */
<iframe width=»420″ height=»315″ src=»http://www.youtube.com/embed/dQw4w9WgXcQ» frameborder=»0″ allowfullscreen></iframe>

Но есть один вариант, «режим повышенной конфиденциальности», который добавляет «-nocookie» в домен, и мы собираемся использовать его в нашем шорткоде.

Vimeo

1
2
/* Original video: vimeo.com/36804448 */
<iframe src=»http://player.vimeo.com/video/36804448″ width=»500″ height=»281″ frameborder=»0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Просто и элегантно. Вот почему люди любят Vimeo.

Dailymotion

1
2
/* Original video: dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto */
<iframe frameborder=»0″ width=»480″ height=»360″ src=»http://www.dailymotion.com/embed/video/xhwpbg»></iframe><br /><a href=»http://www.dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto» target=»_blank»>BridgeStone 15 Sec spot</a> <i>by <a href=»http://www.dailymotion.com/DailymotionUSA» target=»_blank»>DailymotionUSA</a></i>

Я думаю, что добавление ссылки под кодом встраивания просто не здорово , поэтому мы не добавляем это в наш шорткод.

Yahoo! экран

1
2
/* Original video: screen.yahoo.com/mysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html */
<div><iframe frameborder=»0″ width=»576″ height=»324″ src=»http://d.yimg.com/nl/vyc/site/player.html#shareUrl=http%3A%2F%2Fscreen.yahoo.com%2Fmysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html&vid=29322943&browseCarouselUI=hide&repeat=0&startScreenCarouselUI=hide»></iframe></div>

Код для вставки немного странный на Yahoo! Экран, но я нашел способ сократить его, который будет проще использовать в нашем шорткоде.

Blip.tv

1
2
/* Original video: blip.tv/mister-glasses/episode-7-5600357 */
<iframe src=»http://blip.tv/play/AYLV6UkC.html?p=1″ width=»780″ height=»438″ frameborder=»0″ allowfullscreen></iframe><embed type=»application/x-shockwave-flash» src=»http://a.blip.tv/api.swf#AYLV6UkC» style=»display:none»></embed>

Это сложный вопрос — в коде для встраивания отсутствует идентификатор видео (из URL-адреса видео). Но благодаря некоторым исследованиям я выяснил, как использовать ID! 🙂

Veoh

1
2
/* Original video: veoh.com/watch/v27458670er62wkCt */
<object width=»410″ height=»341″ id=»veohFlashPlayer» name=»veohFlashPlayer»><param name=»movie» value=»http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1355&permalinkId=v27458670er62wkCt&player=videodetailsembedded&videoAutoPlay=0&id=anonymous»></param><param name=»allowFullScreen» value=»true»></param><param name=»allowscriptaccess» value=»always»></param><embed src=»http://www.veoh.com/swf/webplayer/WebPlayer.swf?version=AFrontend.5.7.0.1355&permalinkId=v27458670er62wkCt&player=videodetailsembedded&videoAutoPlay=0&id=anonymous» type=»application/x-shockwave-flash» allowscriptaccess=»always» allowfullscreen=»true» width=»410″ height=»341″ id=»veohFlashPlayerEmbed» name=»veohFlashPlayerEmbed»></embed></object><br /><font size=»1″>Watch <a href=»http://www.veoh.com/watch/v27458670er62wkCt»>Intense Cat</a> in <a href=»http://www.veoh.com/browse/videos/category/animals»>Animals</a>&nbsp;&nbsp;|&nbsp;&nbsp;View More <a href=»http://www.veoh.com»>Free Videos Online a

Ах, тег <object> … Не волнуйтесь, мы не собираемся его использовать!

Viddler

1
2
/* Original video: viddler.com/v/978c9ba2 */
<iframe id=»viddler-978c9ba2″ src=»//www.viddler.com/embed/978c9ba2/?f=1&autoplay=0&player=full&loop=false&nologo=false&hd=false» width=»437″ height=»315″ frameborder=»0″ mozallowfullscreen=»true» webkitallowfullscreen=»true»></iframe>

Это все. Теперь перейдем к самой интересной части!

Шорткод: [vid]

Для этого шорткода мы создадим 4 атрибута — название сайта, идентификатор видео, а также ширину и высоту видео. Вы можете установить некоторые значения по умолчанию для атрибутов:

01
02
03
04
05
06
07
08
09
10
11
function vid_sc($atts, $content=null) {
    extract(
        shortcode_atts(array(
            ‘site’ => ‘youtube’,
            ‘id’ => »,
            ‘w’ => ‘400’,
            ‘h’ => ‘250’
        ), $atts)
    );
}
add_shortcode(‘vid’,’vid_sc’);

Затем следует часть, где функция генерирует переменную $src которая генерирует атрибут src для iframe :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// YouTube with «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!
else if ( $site == «yahoo» ) {
    $src = ‘http://d.yimg.com/nl/vyc/site/player.html#vid=’.$id;
}
// Blip.tv with some «hacks» in the URI:
else if ( $site == «bliptv» ) {
    $src = ‘http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/’.$id;
}
// The Veoh URI has some hacks, too:
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;
}

И, конечно же, мы возвращаем результат. Вот полный код нашего нового видео шорткода:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
function 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 != » ) {
        return ‘<iframe width=»‘.$w.'» height=»‘.$h.'» src=»‘.$src.'» class=»vid iframe-‘.$site.'»></iframe>’;
    }
}
add_shortcode(‘vid’,’vid_sc’);

Подсказка в быстрой подсказке: обратите внимание, что у iframe есть два класса CSS: vid и iframe-$site (например, iframe-youtube ). Вы должны добавить vid {border:0;} в ваш CSS-файл, так как мы не определили атрибут frameborder в нашем теге iframe .

Примеры использования

Использование по умолчанию достаточно просто:

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

Но чтобы сделать это еще проще , мы устанавливаем значения по умолчанию для site , w и h . Итак, если вы хотите встроить видео на YouTube, вы можете просто использовать его следующим образом:

[vid id="dQw4w9WgXcQ"]

Вы должны изменить ширину и высоту, чтобы соответствовать вашему блогу. Кроме того, если вы используете Vimeo больше, чем YouTube, вы можете изменить значение site по умолчанию на «vimeo».

Это оно! Добавьте это в свой файл functions.php, и вы сможете начать использовать шорткод. Наслаждайтесь!

Обновление: мы добавили в статью раздел с примерами использования, чтобы прояснить ситуацию.

41
Share: