Web 2.0的故事就是用户生成的内容的故事。 Flickr,Facebook,MySpace和YouTube等网站允许用户将其原始照片或视频片段上传到云中,并使用简单的在线工具与更广泛的社区共享。 基于云的内容创建和共享工具的便捷可用性,以及允许开发人员以编程方式访问用户生成的内容的Web服务,使得可以组合来自不同来源的内容以启用新的,内容驱动的应用程序( 混搭 )。
但是,有一个小问题。 如果您在Flickr中拥有照片,在YouTube中具有您的视频,在Hulu中具有电视节目,那么如何将它们全部带入Blogger的博客文章中? 当然,您可以通过超链接到适当的内容来做到这一点,但是如果您可以将它们嵌入到适当位置的帖子中会更好吗?
输入oEmbed。 顾名思义,oEmbed通过允许用户将URL转换为Flickr和YouTube等外部网站上的丰富内容(如照片和视频),从而为该问题提供了嵌入式解决方案。 在本文中,我向您介绍了oEmbed,并向您展示了如何将其与PHP结合使用以将第三方内容嵌入到您的网页中。
了解嵌入
首先,这里是oEmbed的快速介绍。 根据其官方网站(http://www.oembed.com),oEmbed为:
...一种允许在第三方网站上嵌入URL的格式... [允许]网站在用户发布指向该资源的链接时显示嵌入的内容(例如照片或视频),而无需直接解析资源。”
嵌入交易有两个参与方:提供者和消费者。 消费者通过向提供者的API端点进行请求来请求特定的内容项。 提供者通过返回所请求内容项的XML或JSON编码表示形式来满足这些请求。
这种方法在实践中如何起作用? 好吧,假设您写了一篇博客文章,并且想要显示您从YouTube上传的视频之一。 您可以通过以下两种方法执行此操作:
- 您可以超链接到它; 当用户单击链接时,他们将被定向到YouTube以观看视频。
- 您可以使用YouTube的嵌入式媒体播放器将视频直接嵌入到博客文章中。
第一种方法很简单,但是会导致用户从您的网站转移到YouTube,而且会分心。 第二种方法可将访问者留在您的网站上,但需要您做一些研究以了解YouTube嵌入式播放器的工作方式。
oEmbed提供了第三种更简单的解决方案。 由于YouTube是oEmbed提供商,因此您可以向其oEmbed API端点发送有关视频的请求。 对该请求的响应是XML或JSON文档,其中包含嵌入式视频播放器HTML代码,该代码可直接在您的博客文章中用于显示视频,而无需任何进一步的人工干预。
清单1显示了YouTube视频的oEmbed请求和响应:
清单1.一个oEmbed请求
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU
&format=xml
<?xml version="1.0" encoding="utf-8"?>
<oembed>
<provider_url>http://www.youtube.com/</provider_url>
<title>NORAD Tracks Santa - US Region</title>
<html><object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/hI-BDR2UcmU?fs=1"></param><param
name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed
src="//www.youtube.com/v/hI-BDR2UcmU?fs=1"
type="application/x-shockwave-flash" width="425"
height="344" allowscriptaccess="always"
allowfullscreen="true"></embed></object></html>
<author_name>NORADTracksSanta</author_name>
<height>344</height>
<thumbnail_width>480</thumbnail_width>
<width>425</width>
<version>1.0</version>
<author_url>http://www.youtube.com/user/NORADTracksSanta</author_url>
<provider_name>YouTube</provider_name>
<thumbnail_url>http://i1.ytimg.com/vi/hI-BDR2UcmU/hqdefault.jpg</thumbnail_url>
<type>video</type>
<thumbnail_height>360</thumbnail_height>
</oembed>
请注意,请求已发送到http://www.youtube.com/oembed,后者是oEmbed请求的YouTube API端点。 该API在“ url”请求参数中传递了所请求视频的URL。 对请求的响应包含一些视频元数据,例如视频的作者和标题以及适当HTML嵌入代码。
o嵌入的提供程序可以XML或JSON返回响应。 所有响应均以UTF-8编码。 可以在请求中将响应格式指定为附加的“格式”参数。 清单2显示了一个示例。
清单2.使用YouTube oEmbed API
GET http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=hI-BDR2UcmU
&format=json
{
"provider_url": "http:\/\/www.youtube.com\/",
"title": "NORAD Tracks Santa - US Region",
"html": "<object width=\"425\" height=\"344\"><param name=\"movie\"
value=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"><\/param>
<param name=\"allowFullScreen\" value=\"true\"><\/param>
<param name=\"allowscriptaccess\" value=\"always\"><\/param>
<embed src=\"http:\/\/www.youtube.com\/v\/hI-BDR2UcmU?fs=1\"
type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\"
allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object>",
"author_name": "NORADTracksSanta",
"height": 344,
"thumbnail_width": 480,
"width": 425,
"version": "1.0",
"author_url": "http:\/\/www.youtube.com\/user\/NORADTracksSanta",
"provider_name": "YouTube",
"thumbnail_url": "http:\/\/i1.ytimg.com\/vi\/hI-BDR2UcmU\/hqdefault.jpg",
"type": "video",
"thumbnail_height": 360
}
用oEmbed嵌入内容
现在您了解了oEmbed的工作原理,让我们看一些代码。 在本文全文中,我假定您熟悉HTML,SQL和XML,并且您具有运行正常的Apache或PHP开发环境。 我还假定您了解使用PHP中的类和对象的基础知识,因为本文中使用PHP组件是按照OOP原则编写的。
要将oEmbed与PHP应用程序一起使用,可以选择两个库:PEAR Services_oEmbed或php-oembed。 本文中的大多数示例都使用PEAR Services_oEmbed(尽管我也包括了一些使用php-oembed作为参考的示例),因此请安装它。 您可以从PEAR网站手动下载并安装它(请参阅参考资料中的链接),也可以使用PEAR安装程序自动安装它,如下所示。
shell> pear install Services_oEmbed-0.2.0
安装后,尝试一个简单的示例,如清单3所示 :
清单3.使用YouTube oEmbed API
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $video; ?>
</div>
</body>
</html>
清单3首先加载Services_oEmbed类,然后定义要嵌入的内容的URL(在本例中为YouTube视频)。 接下来,初始化Services_oEmbed类的实例,该类的构造函数传递两个参数:YouTube URL和选项数组。
options数组的关键元素是要使用的oEmbed API端点; 在这种情况下,它是YouTube的oEmbed端点,即http://www.youtube.com/oembed。 最后,对服务对象的getObject()
方法的调用负责执行oEmbed请求并返回指定视频的对象表示形式。
该对象表示包含所请求视频的详细信息,例如其URL,作者,提供者和标题。 它还可以包括缩略图和视频对象的大小信息。 图1说明了该对象的外观。
图1. PEAR Services_oEmbed返回的oEmbed对象
图2展示了清单3的输出。 在这种情况下,该视频是关于NORAD跟踪美国地区的圣诞老人的。
图2.嵌入式YouTube视频
使用内容元数据
您可以为嵌入式媒体添加一些元数据,如清单4所示 。
清单4.使用oEmbed元数据
<?ph4
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.youtube.com/watch?v=hI-BDR2UcmU';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://www.youtube.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$video = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $video; ?>
</div>
<div>
Type: <?php echo $video->type;?> <br/>
Title: <?php echo $video->title;?> <br/>
Author: <a href="<?php echo $video->author_url;?>">
<?php echo $video->author_name;?></a> <br/>
Provider: <a href="<?php echo $video->provider_url;?>">
<?php echo $video->provider_name;?></a> <br/>
</div>
</body>
</html>
图3显示清单4的输出,其中包含视频和其他详细信息,例如类型(视频),标题(NORAD Tracks Santa-美国地区),作者(NORADTracksSanta)和提供者(YouTube)。
图3:带有其他元数据的嵌入式YouTube视频
重要的是要注意,oEmbed规范定义了四种媒体类型:照片,视频,链接和富媒体。 每种类型返回的元数据可以有所不同。 例如,视频的html
参数包含视频播放器的嵌入代码,而照片的url
参数指定照片的URL。 在规范中查找(请参阅参考资料中的链接)以获取请求和响应参数的完整列表。
还要注意,您可以在对getObject()
的调用中包括一个附加参数:包含maxheight
和maxwidth
参数的数组,这些参数指定返回的表示形式的高度和宽度。
使用来自多个来源的内容
关于oEmbed的好处是它受到许多不同的流行Web服务的支持:Flickr,Facebook,YouTube,Vimeo,Viddler,Revision3,仅举几例。 考虑清单5 ,它演示了嵌入Revision3中的视频的过程。
清单5.使用Revision3 oEmbed API
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://revision3.com/foundation/jackdorsey';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://revision3.com/api/oembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
图4显示带有视频和其他详细信息的输出,例如类型(视频),标题(Jack Dorsey),作者(基金会)和提供者(修订版3)。
图4.嵌入式Revision3视频
清单6给出了另一个示例,该示例嵌入了deviantART网站上的一个分形。
清单6.使用deviantART oEmbed API
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://backend.deviantart.com/oembed'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
图5显示带有照片的输出以及其他详细信息,例如类型(照片),标题(假脱机),作者(Undead_Academy)和提供者(DeviantART)。
图5.嵌入式deviantART图像
使用oohEmbed服务
尽管许多Web应用程序已经提供了自己的oEmbed API端点,但有些不提供。 不过,仍然可以通过oohEmbed服务访问这些应用程序,该服务将自己称为“为各种网站提供HTML嵌入代码的oEmbed兼容提供商”。 您可以通过oohEmbed访问的其他应用程序和服务包括amazon.com产品图像,Twitter状态更新,Google Video,Metacafe,Slideshare,TwitPic,Wikipedia,Wordpress等。 但是请注意,oohEmbed仅支持JSON输出,并且通常会忽略maxwidth
和maxheight
参数。
清单7给出了一个使用oohEmbed将Wikipedia内容嵌入到网页中的示例。
清单7.使用oohEmbed和Wikipedia
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://en.wikipedia.org/wiki/Drupal';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object->html; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
注意,在清单7中 ,指定的API端点属于oohEmbed而不是Wikipedia。 oohEmbed像代理一样工作,接收oEmbed请求并查找相应的链接,然后将包含所需数据的oEmbed兼容响应返回给调用方。
图6展示了清单7的输出,其中包含视频和其他详细信息,例如类型(链接),标题(Drupal),作者(该项目为空白,未指定特定作者)和提供者(维基百科):
图6.嵌入式Wikipedia页面
清单8给出了一个使用oohEmbed将Slideshare演示文稿嵌入到网页(富媒体类型)中的示例。
清单8.使用oohEmbed和Slideshare
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url =
'http://www.slideshare.net/weierophinney/best-practices-of-php-development-presentation';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
图7展示了清单8的输出,并提供了演示文稿和其他详细信息,例如类型(丰富),标题(PHP开发的最佳实践),作者(weierophinney,有效的链接)和提供者(SlideShare,有效的链接)。
图7.嵌入式Slideshare演示文稿
清单9使用oohEmbed从产品URL检索并嵌入amazon.com产品图像。
清单9.使用oohEmbed和amazon.com
<?php
// include class
include 'Services/oEmbed.php';
// define content URL
$url = 'http://www.amazon.com/Framework-Beginners-Guide-Vikram-Vaswani/dp/007163939X';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
$object = $oEmbed->getObject();
?>
<html>
<head></head>
<body>
<div>
<?php echo $object; ?>
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
图8展示了清单9的输出,其中包括一本书的封面照片以及其他细节,例如类型(照片),标题(Zend Framework,初学者指南),作者(Vikram Vaswani,有效链接)和提供者(Amazon Product)图片,有效链接)。
图8.嵌入式Amazon产品图像
使用替代PHP库
php-oembed库是PEAR Services_oEmbed库的替代方法,它还可用于将内容嵌入到网页中。 安装库很简单; 下载它(请参阅参考资料中的链接),然后将其复制到PHP包含路径中的某个位置。 但是,配置要比Services_oEmbed的配置稍微复杂一些。
php-oembed库在其安装目录中的名为provider.xml的XML文件中维护自己的oEmbed提供程序和API端点列表。 因此,在开始使用特定的oEmbed提供程序之前,必须首先将其添加到此文件中。 为了说明这一点,如果您想使用deviantART oEmbed API,则必须首先编辑provider.xml文件并向其中添加一个条目,如清单10所示 。
清单10.编辑providers.xml文件并向其中添加一个条目
<?xml version="1.0"?>
<providers>
<provider>
<url>http://*.flickr.com/*</url>
<endpoint>http://www.flickr.com/services/oembed/</endpoint>
</provider>
<provider>
<url>http://*.pownce.com/*</url>
<endpoint>http://api.pownce.com/2.1/oembed.{format}</endpoint>
</provider>
<provider>
<url>http://*.deviantart.com/*</url>
<endpoint>http://backend.deviantart.com/oembed</endpoint>
</provider>
<provider>
<url>http://*.youtube.*/*</url>
<endpoint>http://www.youtube.com/oembed</endpoint>
</provider>
</providers>
添加了提供程序之后,您可以继续在PHP脚本中使用php-oembed,如清单11所示 。
清单11.将oohEmbed和deviantART与php-oembed库一起使用
<?php
// define provider configuration
define('PROVIDER_XML', 'providers.xml');
// include classes
include 'ProviderManager.class.php';
include 'EmbedProvider.class.php';
include 'OEmbedProvider.class.php';
include 'LazyTemplateEngine.class.php';
include 'OEmbed.class.php';
include 'PhotoEmbed.class.php';
// create provider manager
$manager = ProviderManager::getInstance();
// define content URL
$url = 'http://undead-academy.deviantart.com/art/Spool-192326055';
// get oEmbed representation
$object = $manager->provide($url, 'object');
?>
<html>
<head></head>
<body>
<div>
<img src="<?php echo $object->url; ?>" />
</div>
<div>
Type: <?php echo $object->type;?> <br/>
Title: <?php echo $object->title;?> <br/>
Author: <a href="<?php echo $object->author_url;?>">
<?php echo $object->author_name;?></a> <br/>
Provider: <a href="<?php echo $object->provider_url;?>">
<?php echo $object->provider_name;?></a> <br/>
</div>
</body>
</html>
清单11首先定义了provider.xml文件的位置,并包括php-oembed所需的所有相关类。 然后,它生成ProviderManager服务对象,并使用该对象的Provide provide()
方法检索内容URL的oEmbed表示形式。 可以多种格式返回此表示形式:XML,JSON,PHP对象,PHP数组或序列化的字符串。
图9. php-oembed返回的oEmbed对象
现在,使用该对象的属性非常容易,并将嵌入的表示形式包含在网页内以及照片和其他详细信息,例如类型(照片),标题(假脱机),作者(Undead_Academy)和提供者(DeviantART),如下所示:在图10中 。
图10.嵌入式deviantART图像
应用示例:内联内容嵌入
现在您已经了解了将PHP与oEmbed结合使用的基本知识,下面让我们看一下它们在示例应用程序上下文中如何工作。 由于oEmbed就是将内容嵌入网页中,因此示例应用程序为用户提供了一种表单,用于输入内容(例如博客文章),并使用oEmbed将内容中的超链接自动转换为嵌入式表示形式。
清单12具有完整的代码。
清单12.用于内联内容嵌入的示例应用程序
<html>
<head></head>
<body>
<?php if (isset($_POST['submit'])): ?>
<?php
// include class
include 'Services/oEmbed.php';
// define API endpoint
$options = array(
Services_oEmbed::OPTION_API => 'http://oohembed.com/oohembed/'
);
// get post body
// extract all URLs into array
$oBody = $_POST['body'];
$title = $_POST['title'];
preg_match_all('!https?://[\S]+!', $oBody, $matches);
$urls = $matches[0];
$embeds = array();
// for each URL
// get embed code from oohembed if available
// else convert to simple hyperlink
foreach ($urls as $url) {
// get oEmbed representation
$oEmbed = new Services_oEmbed($url, $options);
try {
$object = $oEmbed->getObject(array('maxheight' => '100', 'maxwidth' => '100'));
$embeds[] = (string)$object;
} catch (Exception $e) {
$embeds[] = "<a href=\"" . $url . "\">" . $url . "</a>";
}
}
// replace URLs in body with code
// print revised output
$nBody = str_replace($urls, $embeds, $oBody);
?>
<h1>Preview New Post</h1>
<h2><?php echo $title; ?></h2>
<p>
<?php echo nl2br($nBody); ?>
</p>
<?php else: ?>
<h1>Add New Post</h1>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<p>
Title: <br/>
<input type="text" name="title" size="40" />
</p>
<p>
Body: <br/>
<textarea name="body" rows="10" cols="50"></textarea>
</p>
<input type="submit" name="submit" />
</form>
<?php endif; ?>
</body>
</html>
清单12分为两部分,由if-else()
条件测试分隔。 测试检查表单提交; 如果找不到,它将显示一个简单的Web表单,要求用户输入页面标题和正文内容。 用户可以在这两个字段中输入文本,包括根据需要的超链接。 图11展示了清单12生成的Web表单,并带有一些示例输入。 (查看图11的纯文本版本 。)
图11.一个支持嵌入式内容嵌入的Web表单
提交表单后,脚本将初始化一个新的Services_oEmbed对象,并向其传递oohEmbed API端点。 然后,它解析用户提交的内容,并通过简单的正则表达式提取在正文中找到的所有URL。 (注意:此正则表达式不能在生产环境中使用,因为它不能安全地抵抗XSS攻击。)以这种方式标识的URL存储在名为$urls
PHP数组中。
接下来,使用一个foreach()
循环和try-catch{}
块来遍历URL数组,并将每个传递给Services_oEmbed对象的getObject()
方法。 此步骤导致向oohEmbed API请求相应的远程内容。 如果内容在受支持的服务上,则getObject()
方法将返回相应HTML嵌入代码,该代码将保存到名为$embeds
的单独数组中。 如果不支持该内容,则代码将引发异常,该异常将由try-catch{}
块try-catch{}
。 此异常意味着URL的嵌入式表示不可用; 因此,该URL只需转换为HTML锚标记并保存到$embeds
数组。
最后一步是对用户提交的原始正文内容执行搜索和替换操作,将每个URL替换为相应HTML嵌入代码或HTML超链接。 然后将修订后的正文打印到网页上。
图12说明了结果输出,嵌入式内容以嵌入式方式显示。
图12.带有嵌入式内容的网页
结论
本文为您提供了速成课程,内容涉及如何使用oEmbed规范将存储在第三方Web服务上的丰富内容(例如照片,视频和幻灯片)嵌入到网页中。 该规范提供了一种有效且直观的方式,可将来自多个流行应用程序和网站的数据嵌入到网页中。 本文中的示例使用了两个用于oEmbedPHP客户端库,并通过oEmbed与许多受欢迎的网站进行了讨论,包括Flickr,YouTube,SlideShare,Wikipedia和amazon.com。
如这些示例所示,oEmbed是一个简单的专用API,仅针对一件事(嵌入内容)而设计,并且可以很好地执行此任务。 它为希望围绕内容聚合和搜索构建具有创造性的新应用程序的开发人员提供了一种灵活的工具。 有时玩,看看你的想法。
翻译自: https://www.ibm.com/developerworks/web/library/x-oembed/index.html