缩略图用于在单个资源管理器窗口中预览单个或一组媒体实体。
它可以节省时间并更好地关注用户的注意力,并帮助我们吸引注意力并教育观众增强网页设计项目。
描述比标题多几个字。 YouTube 视频描述中的单词越多,表示的关键字就越准确,这对于在搜索引擎中找到非常重要。
视频频道应该了解有关视频的数据以提高排名并获得更多公众观看次数,因为没有人可以看到视频内容的确切内容,因此需要数据。
标题的主要目的是以最佳方式表示和描述每个结果,并且可以与用户的搜索查询相关联。标题是最重要的信息,用于决定点击哪个链接,因此在您的网页上检索易于理解的标题变得很重要。
标题帮助搜索引擎抓取相关数据。
标题和描述在使视频重要和搜索引擎排名因素方面起着关键作用。
目的:文章显示特定 YouTube URL 链接的标题、描述和缩略图。 HTML 表单请求给定输入的 YouTube 视频 URL。
当用户将 URL 粘贴到输入字段并提交时,此 URL 变量将被发送到PHP文件。从 URL 获取数据后,将在浏览器上预览。
YouTube 视频数据 API 密钥:
- YouTube 数据 API 可免费使用。
- 我们需要 YouTube 数据 API 密钥来实现以下示例程序。
- 每个 YouTube 视频都有一个与之关联的特定 ID,此 ID 会传递给 API 调用以进行数据检索。让我们逐步了解如何创建 YouTube 数据 API 密钥。
方法:
- 转到 Google Developer Console 链接并登录您自己的 Google 帐户。
- 登录后,转到链接并单击蓝色的 CREATE PROJECT 按钮。
- 我们必须等待一段时间,直到 Google 准备开发人员的项目。
![创建项目](https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_get_YouTube_video_data_by_using_YouTube_data_API_and_PHP_?_0.jpg)
- 填写您自己选择的项目名称。
- 在 Google API 控制台中,单击“选择项目链接”。
- 然后单击加号按钮 (+) 以创建项目。
- 输入您自己选择的项目名称并选择其他选项 >> 单击创建按钮。
- 设置开发人员的新项目需要几秒钟。完成后,选择您的项目。
- 单击左侧导航菜单上的库链接。在 YouTube API 部分下,单击YouTube 数据 API链接。
- 单击大写的启用按钮,启用 YouTube 数据 API v3 以访问 YouTube 数据。
- 单击左侧导航菜单上的凭据链接。按“创建凭据按钮”选择 API 密钥。
- 将出现一个对话框,其中包含您新创建的 API 密钥。在YouTube 数据 API v3 API请求中使用此 API 密钥。
HTML 代码:以下代码显示了用于请求给定输入的 YouTube 视频 URL 的 HTML 表单。当用户将 URL 粘贴到输入字段时,此 URL 变量将被发送到“showDetails.xml”。 PHP”文件。从 URL 获取数据后,将在浏览器上预览。
HTML
Please enter the youtube
URL in the input
html
Title: ' . $urlTitle . '';
echo 'Description: ' . $description;
?>
CSS
body{
font-family: Sans-serif,Arial;
width: 600px;
}
.container-class{
background: #e9e9e9;
border: #B3B2B2 1px solid;
border-radius: 2px;
margin: 20px;
padding: 40px;
}
.input-class{
width: 100%;
border-radius: 2px;
padding: 20px;
border: #e9e9e9 1px solid;
}
.submit-class{
padding: 10px 20px;
background: #000;
color: #fff;
font-size: 0.8em;
width: 110px;
border-radius: 4px;
cursor:pointer;
border: black 2px solid;
}
PHP代码:以下代码演示了“showDetails.php”。 PHP”文件在上述 HTML 网页中使用。
html
Title: ' . $urlTitle . '';
echo 'Description: ' . $description;
?>
CSS 代码:以下代码演示了上述 HTML 代码中使用的“style.css”文件。
CSS
body{
font-family: Sans-serif,Arial;
width: 600px;
}
.container-class{
background: #e9e9e9;
border: #B3B2B2 1px solid;
border-radius: 2px;
margin: 20px;
padding: 40px;
}
.input-class{
width: 100%;
border-radius: 2px;
padding: 20px;
border: #e9e9e9 1px solid;
}
.submit-class{
padding: 10px 20px;
background: #000;
color: #fff;
font-size: 0.8em;
width: 110px;
border-radius: 4px;
cursor:pointer;
border: black 2px solid;
}
输出:
下图显示了用户单击“提交 URL”按钮之前的屏幕:
用户输入YouTube链接并提交后显示如下图: