Home Tutoriais CMS oEmbed, Videolog e WordPress


O assunto de hoje é a tríade: oEmbed, Videolog e WordPress. oEmbed é uma representação de URL em sites de terceiros onde esses sites exibem conteúdos embedados (por exemplos fotos e vídeos) quando seus editores postam a URL desses recursos. Isso significa dizer que, ao contrário de postar o código de embed de um vídeo, basta postar a URL de onde o vídeo é representado. Simples assim.

O WordPress incorporou o recurso de oEmbed em sua versão 2.9 lançanda em dezembro de 2009. Em seu lançamento foi suportado sites como YouTube, Flickr, Vimeo, entre outros. Os suportes mais recentes adicionados foram ao Twitter, Slideshare, Instagram, para citar alguns.

Embora o Videolog não suporte o recurso oEmbed e por conseguinte o WordPress não o adiciona por padrão, é possível registrar um serviço no WordPress e simular o recurso. Fizemos isso aqui no iMasters quando trabalhamos na migração do portal para WordPress, uma vez que o Videolog é adotado para a hospedagem de vídeos.

Exemplo de uso do oEmbed

Para embedarmos um conteúdo multímidia no editor do WordPress, precisamos inserir a URL onde o rercurso se localiza. No momento de exibir o post o WordPress renderizará esse conteúdo com seu respectivo código embedado. Como ainda não temos o serviço do Videolog simulado para o WordPress, o resultado seria o seguinte:

wp-editor-exemplo-embed-videolog

Exemplo de um post com uma URL de vídeo hospedado no Videolog.

Exemplo de renderização do post

Exemplo de renderização do post

Como registrar um serviço no WordPress para simular oEmbed

Podemos fazer uso das funções wp_oembed_add_provider ou wp_embed_register_handler. Se o serviço em questão suportar oEmbed usamos a primeira função, caso contrário a segunda. No caso do Videolog usaremos wp_oembed_register_handler para simularmos o recurso.

A função wp_oembed_register_handler deve ser usada no arquivo functions.php do tema em uso ou de um plugin ativo. Vamos considerar o uso de plugin para que tenhamos a solução em qualquer tema que estiver sendo usado.

No arquivo do plugin teremos inicialmente a chamada da funçãowp_oembed_register_handler. Assim:

wp_embed_register_handler( 'videolog', '#http://videolog.tv/video.php?id=([d]+)#',
 'videolog_embed_register_handler' );

O primeiro parâmetro, videolog, é um nome/ID único para o serviço. O segundo é uma expressão regular que analisará a URL para confirmar seu vínculo a função videolog_embed_register_handler informada no terceiro parâmetro como função de retorno.

Agora, vejamos o código da função de retorno videolog_embed_register_handler:

function videolog_embed_register_handler( $matches, $attr, $url, $rawattr )
 {
 $video_width = $attr['width'];
 $video_height = $attr['height'];
$embed = sprintf( '<div><iframe width="%1$d" height="%2$d" src="http://embed.videolog.tv/v/
index.php?id_video=%3$d&amp;width=%1$d&amp;height=%2$d&amp;relacionados=false&amp;default=
S&amp;lang=PT_BR&amp;cor_fundo=333333&amp;cor_titulo=ffffff&amp;hd=S" scrolling="no"
frameborder="0" allowfullscreen></iframe></div>',
 $video_width,
 $video_height,
 $matches[1]
 );
return apply_filters( 'videolog_embeded_code', $embed, $matches, $attr, $url, $rawattr );
 }

Agora a simulação do recurso em uso:

Exemplo de renderização de vídeo hospedado no Videolog

Exemplo de renderização de vídeo hospedado no Videolog

Embora o WordPress não suporte todos os portais multimídia existentes e mesmo esses não oferencendo suporte ao oEmbed, é possível simular o recurso e com isso garantir aos editores a mesma experiência de uso na plataforma ao lidar com diferentes portais.

Seguem alguns links relevantes para este artigo.

  • oEmbed;
  • wp_oembed_add_provider;
  • wp_oembed_remove_provider;
  • wp_oembed_register_handler.

Segue o código completo do plugin:

<?php
/*
Plugin Name: Videolog oEmbed
Description: [Artigo iMasters] Como simular o recurso de oEmbed do Videolog no WordPress
Version: 2013.01
Author: Leandro Vieira
Author URI: http://imasters.com.br/perfil/leandro_vieira/
*/

wp_embed_register_handler( 'videolog', '#http://videolog.tv/video.php?id=([d]+)#',
 'videolog_embed_register_handler' );

/**
 * HANDLER FUNCTION: wp_embed_register_handler
 *
 * Videolog doesn't support oEmbed featured. So we simulate this feature registering
 * it' embed code. So, the editor just needs to type the Videolog URL address
 * and the embed will be showed.
 *
 * The $attr param has width and height provided by WordPress calculation system.
 *
 * @param array $matches The $matches in the URL string found in the content
 * @param array $attr the width and height of video in agreement with WordPress
 * @param string $url The URL found in the content
 * @param array $rawattr
 * @return string Return the embeded code through the apply_filters function
 */
function videolog_embed_register_handler( $matches, $attr, $url, $rawattr )
{
    $video_width = $attr['width'];
    $video_height = $attr['height'];

    $embed = sprintf( '<div><iframe width="%1$d" height="%2$d" src="http://embed.videolog.tv/v/index.php?id_video=
%3$d&amp;width=%1$d&amp;height=%2$d&amp;relacionados=false&amp;default=S&amp;lang=PT_BR&amp;cor_fundo=333333&amp;
cor_titulo=ffffff&amp;hd=S" scrolling="no" frameborder="0" allowfullscreen></iframe></div>',
        $video_width,
        $video_height,
        $matches[1]
    );

    return apply_filters( 'videolog_embeded_code', $embed, $matches, $attr, $url, $rawattr );
}

Fonte: 
http://imasters.com.br/desenvolvimento/oembed-videolog-e-wordpress/
   

Leave a Reply

This blog is kept spam free by WP-SpamFree.