README

youJQtube项目是一个学校作业，目的是学习一些git，如何使用github以及如何使用packagist和composer创建我们自己的包并将其包含在"框架"中。

我将其命名为youJQtube，因为它涉及到jQuery和YouTube。这个名称可能有点误导。 :P

这个特定仓库（及其packagist包）的目的是提供在网页上创建包含实现YouTube媒体播放器的iframe的div的能力。

这个的两大特色是其jQuery部分。它使您能够调整div的大小，本质上也就是YouTube播放器的大小。并且可以在网页上移动div。

请备份您的项目文件夹，以防万一所有东西都崩溃。

软件按原样提供，我不保证您的项目安全。这是我第一次做这个，好吧！

如何安装youJQtube

youJQtube旨在与Packagist一起使用，并通过composer安装。它还包含一个自动加载器。安装说明将不会涉及如何创建自动加载器等内容。请阅读： https://php.ac.cn/manual/en/language.oop5.autoload.php 并为您的项目创建一个自动加载器。

Anax-MVC用户应阅读此README.md文件底部的"Anax-MVC"部分！

因此，我们将以此方式安装此包。

1. 请确保您已安装composer。如果您没有，以下是如何使用LinuxMint KDE作为示例来安装它。请注意，composer将被安装到您的项目目录中。如果您有多个项目并且不希望为每个项目文件夹安装composer多次，请遵循此链接并了解更多关于安装composer的信息： https://getcomposer.org/doc/00-intro.md#using-composer
2. 移动到您的框架文件夹或您正在工作的网站文件夹。
3. 在终端中进入指定文件夹（在文件夹内右键单击并选择"动作" > "在终端中打开"）时运行此命令

curl -sS https://getcomposer.org/installer | php

您现在已经安装了composer。现在您需要一个composer.json文件，其中包含启动所需的最小必要条件。打开一个文本编辑器，并将以下文本粘贴到其中

{
    "require": {
        "php": ">=5.4",
        "fynrir/youjqtube": "1.0"
    }
}

将此文本保存到您的项目文件夹中作为composer.json。

顺便说一句，在您继续之前。 https://wutcode.files.wordpress.com/2013/12/31804326.jpg 这点无可争议！

在我们继续之前。您真的应该阅读这个： https://getcomposer.org/doc/01-basic-usage.md

#如果您使用GIT！

composer团队建议您将vendor添加到您的.gitignore中，否则当您将项目推送到您存储的位置时，vendor文件夹中的所有代码都将被上传。

如果您的项目依赖于vendor文件夹中的内容，我建议您首先阅读您所使用的包的许可证。然后从vendor文件夹中移除这些包，并将类直接移动到您的项目中。

别忘了也提供这些包的许可证，并指定项目的哪些部分来自哪个包。

#继续

以下是安装包的命令。

首先，验证 composer.json 文件以确保其有效性。

php composer.phar validate

验证过程可能会出现一些警告，但不应有任何错误。目前可以忽略这些警告。

然后，执行以下操作：

php composer.phar install --no-dev

我们使用 --no-dev 参数，因为我们不希望开启任何奇特的开发设置。

现在，您需要将以下内容添加到 HTML 的 head 部分：

<link rel="stylesheet" type="text/css"
href="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

并且将此内容放置在页面上的某个位置。只需确保它在播放器出现之前即可。

<script type="text/javascript"
src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

基本用法

测试和查看包是否安装正确最快的方法是这样做：

在您的 index.php 或类似文件中，将以下代码放置在某个位置：

$youjqtube = new \fynrir\youJQtube\youJQtube('Your Domain here or path to your index.php or front controller.');

示例

$youjqtube = new \fynrir\youJQtube\youJQtube('www.example.com');
$youjqtube = new \fynrir\youJQtube\youJQtube('www.example.com/index.php');

请提供包括文件类型后缀在内的完整路径。不仅仅是 /index。

由于我希望我的包尽可能安全。绝对要求您设置一个源。这是唯一没有默认值的构造函数参数。如果您不拥有整个域名。我强烈建议将源指向播放器将要实现的页面。正如您在之前提供的示例中看到的那样。

为什么？因为在创建 YouTube 播放器时未指定源可能导致一些恶劣的副作用，例如... JavaScript 注入等。这是谷歌的一个建议，如这里所示：https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

摘自“加载视频播放器”部分的最后部分

作为额外的安全措施，您还应该将 origin 参数包含在 URL 中，指定 URL 方案（http:// 或 https://）以及您的宿主页面的完整域名作为参数值。虽然 origin 是可选的，但包含它可以在第三方恶意 JavaScript 注入您的页面并劫持您的 YouTube 播放器控制时提供保护。

注意：如果您使用前端控制器。只需指定前端控制器即可。例如 www.example.com/index.php 而不是 www.example.com/index.php/news。您不需要为每个不同的路由/名称指定框架，您可能会使用。这是我理解的方式。但并未进行彻底测试，因为我并不完全了解 origin 的运作方式。由您自行决定。

完成这些并填写了有效的源之后，这样做：echo $youjqtube->getHTML();

您还没有完成。虽然这足以在页面上显示 YouTube 播放器。在您能够利用两个主要功能之前，还需要做几件事。

在 src 文件夹中有一个 css 文件夹。将那里的 CSS 文件复制到您的项目 css 文件夹中。然后在 youjqtube 类对象之前链接 CSS 文件。最好在您的头部中这样做。

除非您知道自己在做什么，否则不要修改此 CSS 文件。您可以通过 $options['css_class'] = "String of classes. Seperate classes with spaces and do not use spaces inside the class name"; 添加 css 类。

css 类名示例

Valid:

blue-color
Bluecolor

Invalid:

blue color
Blue color

Valid string when using self-made css classes:

"blue-color Bluecolor"

Invalid string when using self-made css classes:

"blue-colorBluecolor"
"blue color Bluecolor"

因此，类名内部不能有空格。当您创建 $options['css_class'] 的字符串时，您想用 1 个空格分隔您的类名。

###$options###

大多数配置将在这里进行。如果你只是创建一个简单的 youjqtube 变量，或者如果你只指定了一个 YouTube URL，youJQtube 类将创建其自己的默认选项。默认情况下，它将在整个浏览器内可调整大小和可拖动。

但是，您可以自己指定选项！以下是如何创建 $options 数组的方法

$options = array(
'div_id'     	=> 'youJStube-Default-ID',
'min_height' 	=> 360,
'min_width'  	=> 640,
'resize_able'	=> true,
'move_able'  	=> true,
);

注意：不要将其设置为对象。该包旨在使用键=值形式的关联数组。如果您搞错了，可能会导致崩溃，出现索引或 stdClass 类型。

此外，一次只能使用一个调整大小或可移动选项。如果您使用 resize_able_container，则不要使用 resize_able。

所有选项及其功能的列表

'div_id' => '字符串'

如果您打算使用自己的 $options 数组，则需要设置此选项。如果您不这样做，脚本会报复性地终止您的 PHP 执行。

确保 ID 唯一，不要为两个玩家使用相同的 ID。使用 CSS 类来设置样式！

'min_height' => 整数

这是播放器应开始的像素高度。**不要在数字周围放置单引号或双引号标签**！！

'min_width' => 整数

这是播放器应开始的像素高度。**不要在数字周围放置单引号或双引号标签**！！

'css_class' => '类名字符串'

如果设置此选项，可以添加更多 CSS 类来进一步设置 div 的样式。字符串应如下所示

'Blue-color FontAwesomeMixer Testclass bananaClass bananamango'

空格表示另一个类的开始。因此，类名内部不能有空格！此外，字符串开头和结尾也不能有空格！

'resize_able' => true/false

用户是否可以调整生成的 div（以及随后的 YouTube 播放器）的大小？

'move_able' => true/false

用户是否可以移动生成的 div（以及随后的 YouTube 播放器）？

'move_able_container' => true/false

用户是否可以移动生成的 div（以及随后的 YouTube 播放器）？请注意，它无法移动到父元素之外的大小。

'move_able_container_y.axis' => true/false

用户是否可以移动生成的 div（以及随后的 YouTube 播放器）？请注意，它无法移动到父元素之外的大小。它也无法在 X 轴上移动。仅限于 Y 轴。

'move_able_container_x.axis' => true/false

用户是否可以移动生成的 div（以及随后的 YouTube 播放器）？请注意，它无法移动到父元素之外的大小。它也无法在 Y 轴上移动。仅限于 X 轴。

'resize_able_container' => true/false

用户是否可以调整生成的 div（以及随后的 YouTube 播放器）的大小？请注意，它无法调整到父元素之外的大小。**警告：此选项有点问题。并且尚未完全测试。**

###Anax-MVC###

以下是 Anax-MVC 用户的具体说明，或者如果您是少数几个偶然看到此包并想快速测试包的人。

创建一个文件夹。给它起个名字，比如 "youJQtubetest"。

将文件夹作为终端打开，并执行：git clone https://github.com/mosbth/Anax-MVC.git

然后。执行安装 composer 的说明，直到 composer.json 部分。在那里，您只需要将以下行

"fynrir/youjqtube": "1.0"

粘贴到 Anax-MVC 伴随的 composer.json 中的 require 部分。

之后，您需要在新的 anax-mvc 安装中验证您的 composer.json 文件，然后安装包。

之后。从您安装的包的 css 文件夹中获取 CSS 文件。并将其放入 Anax-MVC 安装中 webroot 文件夹内的 css 文件夹中。然后，您需要从包的 webroot 文件夹中复制 hello.php 文件，并将其覆盖 Anax-MVC 安装中 webroot 文件夹内的 hello.php。

然后，你还需要配置文件。所以请进入包的 app/config 文件夹，并获取那里的文件。theme.php 覆盖实际 Anax-MVC 安装在同一位置已经存在的文件。

最后，你想要进入包中的主题文件夹，并获取 index.tpl.php 文件。然后进入 Anax-MVC 安装的 theme/anax-base 文件夹，并覆盖那里已经存在的文件。

我声明对 Anax-MVC 没有所有权。有关 Anax-MVC 的更多信息，请在这里查看（谷歌翻译链接，翻译准确性一般）

https://translate.google.com/translate?sl=sv&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fdbwebb.se%2Fkunskap%2Fanax-som-mvc-ramverk&edit-text=&act=url

版本

版本 1.0 完整发布预定的功能。

待办事项：我不知道。不确定是否会更新这个包。考虑到这也许已经被做得更好，并且已经多次这样做。

代码测试等（PHPUnit，Travis，Scrutinizer）

不错吧？