多媒体文件管理

默认情况下,文件管理器使用目录是 storage/app/media子目录。要使用Amazon S3或Rackspace CDN,您需要修改系统配置。

您需要先安装Drivers plugin才能使用Amazon S3或Rackspace CDN功能。

请注意,更改介文件管理器配置后,应重置其缓存。您可以通过按媒体管理器工具栏中的刷新按钮来完成此操作。

配置Amazon S3

要将Amazon S3与OctoberCMS一起使用,您应该在bucket和API用户中创建S3 bucket,文件夹。

注册Amazon AWS账户或使用现有帐户登录AWS控制台。打开S3管理面板。创建一个新bucket并为其分配其名称(bucket的名称将是您的公共文件URL的一部分)

在bucket中创建 media 文件夹。文件夹名称无关紧要。此文件夹将是媒体库的根目录。

默认情况下,无法直接访问S3bucket中的文件。要使bucket处于公共状态,请返回bucket列表并单击bucket。单击右侧边栏中的属性按钮。展开权限标签。单击编辑bucket策略链接。将以下代码粘贴到策略弹出窗口。将桶名称替换为您的实际bucket名称:

  1. {
  2. "Version": "2008-10-17",
  3. "Id": "Policy1397632521960",
  4. "Statement": [
  5. {
  6. "Sid": "Stmt1397633323327",
  7. "Effect": "Allow",
  8. "Principal": {
  9. "AWS": "*"
  10. },
  11. "Action": "s3:GetObject",
  12. "Resource": "arn:aws:s3:::BUCKETNAME/*"
  13. }
  14. ]
  15. }

单击保存按钮以应用策略。该策略提供对bucket中所有文件夹和目录的公共只读访问权限。如果您打算将bucket用于其他需求,则可以设置对bucket中特定文件夹的公共访问权限,只需在 Resource 值中指定目录名称:

  1. "arn:aws:s3:::BUCKETNAME/media/*"

您还应该创建一个API用户,OctoberCMS将使用该用户来管理bucket文件。在AWS控制台中,转到IAM部分。转到“用户”选项卡并创建新用户。用户名无关紧要。确保在创建新用户时选中“为每个用户生成访问密钥”复选框。 AWS创建用户后,它允许您查看安全凭证 - 用户访问密钥ID秘密访问密钥。复制密钥并将其放入临时文本文件中。

返回用户列表,然后单击刚刚创建的用户。在Permissions部分中,单击Attach Policy按钮。在列表中选择AmazonS3FullAccess策略,然后单击附加策略按钮。

现在您拥有更新OctoberCMS配置的所有信息。打开config/filesystem.php脚本并找到disks部分。它已包含s3配置,您需要替换API凭据和bucket信息参数:

参数
key the Access Key ID value of the user that you created before.
secret the Secret Access Key value of the user that you created fore.
bucket your bucket name.
region the bucket region code, see below.

您可以在存储区属性中的S3管理控制台中找到存储区域。 “属性”选项卡显示区域名称,例如Oregon。 S3驱动程序配置需要bucket代码。使用此表查找bucket的代码(您还可以查看AWS文档)

Region Code
US Standard us-east-1
US West (Oregon) us-west-2
US West (N. California) us-west-1
EU (Ireland) eu-west-1
EU (Frankfurt) eu-central-1
Asia Pacific (Singapore) ap-southeast-1
Asia Pacific (Sydney) ap-southeast-2
Asia Pacific (Tokyo) ap-northeast-1
South America (Sao Paulo) sa-east-1

例如:

  1. 'disks' => [
  2. ...
  3. 's3' => [
  4. 'driver' => 's3',
  5. 'key' => 'XXXXXXXXXXXXXXXXXXXX',
  6. 'secret' => 'xxxXxXX+XxxxxXXxXxxxxxxXxxXXXXXXXxxxX9Xx',
  7. 'region' => 'us-west-2',
  8. 'bucket' => 'my-bucket'
  9. ],
  10. ...
  11. ]

Save config/filesystem.php script and open config/cms.php script. Find the section storage. In the media parameter update disk, folder and path parameters:

Parameter Value
disk use s3 value.
folder the name of the folder you created in S3 bucket.
path the public path of the folder in the bucket, see below.

To obtain the path of the folder, open AWS console and go to S3 section. Navigate to the bucket and click the folder you created before. Upload any file to the folder and click the file. Click Properties button in the right sidebar. The file URL is in the Link parameter. Copy the URL and remove the file name and the trailing slash from it.

Example storage configuration:

  1. 'storage' => [
  2. ...
  3. 'media' => [
  4. 'disk' => 's3',
  5. 'folder' => 'media',
  6. 'path' => 'https://s3-us-west-2.amazonaws.com/your-bucket-name/media'
  7. ]
  8. ]

Congratulations! Now you’re ready to use Amazon S3 with OctoberCMS. Note that you can also configure Amazon CloudFront CDN to work with your bucket. This topic is not covered in this document, please refer to CloudFront documentation. After you configure CloudFront, you will need to update the path parameter in the storage configuration.

Configuring Rackspace CDN acces 这段先不翻了,国内网络应该用不了吧(🐶手动狗头)。

To use Rackspace CDN with OctoberCMS, you should create Rackspace CDN container, folder in the container and API user.

Log into Rackspace management console and navigate to Storage/Files page. Create a new container. The container name doesn’t matter, it will be a part of your public file URLs. Select Public (Enabled CDN) type for the new container.

Create media folder in the container. The folder name doesn’t matter. This folder will be a root of your Media Library.

You should create an API user that OctoberCMS will use for managing files in the CDN container. Open Account/User Management page in Rackspace console. Click Create user button. Fill in the user name (for example october.cdn.api), password, security question and answer. In the Product Access section select Custom and in the CDN row select Admin. Use No Access role in the Account section and use Technical Contact type in the Contact Information section. Save the user account. After saving the account you will see the Login Details section with the API Key row that contains a value you need to use in OctoberCMS configuration files.

Now you have all the information to update OctoberCMS configuration. Open config/filesystem.php script and find the disks section. It already contains Rackspace configuration, you need to replace the API credentials and container information parameters:

Parameter Value
username Rackspace user name (for example october.cdn.api).
key the user’s API Key that you can copy from Rackspace user profile page.
container the container name.
region the bucket region code, see below.
endpoint leave the value as is.
region you can find the region in the CDN container list in Rackspace control panel. The code is a 3-letter value, for example it’s ORD for Chicago.

Example configuration after update:

  1. 'disks' => [
  2. ...
  3. 'rackspace' => [
  4. 'driver' => 'rackspace',
  5. 'username' => 'october.api.cdn',
  6. 'key' => 'xx00000000xxxxxx0x0x0x000xx0x0x0',
  7. 'container' => 'my-bucket',
  8. 'endpoint' => 'https://identity.api.rackspacecloud.com/v2.0/',
  9. 'region' => 'ORD'
  10. ],
  11. ...
  12. ]

Save config/filesystem.php script and open config/cms.php script. Find the section storage. In the media parameter update disk, folder and path parameters:

Parameter Value
disk use rackspace value.
folder the name of the folder you created in CDN container.
path the public path of the folder in the container, see below.

To obtain the path of the folder, go to the CDN container list in Rackspace console. Click the container and open the media folder. Upload any file. After the file is uploaded, click it. The file will open in a new browser tab. Copy the file URL and remove the file name and trailing slash from it.

Example storage configuration:

  1. 'storage' => [
  2. ...
  3. 'media' => [
  4. 'disk' => 'rackspace',
  5. 'folder' => 'media',
  6. 'path' => 'https://xxxxxxxxx-xxxxxxxxx.r00.cf0.rackcdn.com/media'
  7. ]
  8. ]

Congratulations! Now you’re ready to use Rackspace CDN with OctoberCMS.

音频和视频播放器

默认情况下,系统使用HTML5音频和视频标签来播放音频和视频文件:

  1. <video src="video.mp4" controls></video>

  1. <audio src="audio.mp3" controls></audio>

这种方法是可以覆盖的。如果有 oc-audio-player.htmloc-video-player.html CMS partials,它们将用于显示音频和视频内容。在partials内部使用变量 src 输出到源文件的链接。例:

  1. <video src="{{ src }}" width="320" height="200" controls preload></video>

如果您不想使用HTML5播放器,则可以在partial中提供其他标签。有一个第三方脚本,支持旧版浏览器中的HTML5视频和音频标签。

由于部分是使用Twig编写的,因此您可以根据命名约定自动添加备用视频源。例如,如果有一个约定,即每个全分辨率视频的分辨率视频总是较小,而较小分辨率的文件扩展名为“iphone.mp4”,则生成的标记可能如下所示:

  1. <video controls>
  2. <source
  3. src="{{ src }}"
  4. media="only screen and (min-device-width: 568px)"></source>
  5. <source
  6. src="{{ src|replace({'.mp4': '.iphone.mp4'}) }}"
  7. media="only screen and (max-device-width: 568px)"></source>
  8. </video>

其他配置选项

There are several options that allow you to fine-tune the Media Manager. All of them could be defined in config/cms.php script, in the storage/media section, for example: 有几个选项可以让您微调媒体管理器。所有这些都可以在 storage/media部分的 config/cms.php脚本中定义,例如: ‘storage’ => [ …

  1. 'media' => [
  2. ...
  3. 'ignore' => ['.svn', '.git', '.DS_Store']
  4. ]
  5. ],
参数名 参数值的含义
ignore 要忽略的文件和目录名称列表。默认为[‘.svn’, ‘.git’, ‘.DS_Store’].
ttl 指定缓存的生存时间,以分钟为单位。默认值为10.添加,更新或删除库项目时,缓存会自动失效。
imageExtensions 与图片类型对应的文件扩展名。默认值为 [‘gif’, ‘png’, ‘jpg’, ‘jpeg’, ‘bmp’].
videoExtensions 与视频类型对应的文件扩展名。默认值为 [‘mp4’, ‘avi’, ‘mov’, ‘mpg’].
audioExtensions 与音频类型对应的文件扩展名。默认值为[‘mp3’, ‘wav’, ‘wma’, ‘m4a’].

活动

媒体管理器提供了一些您可以监听的事件,以提高可扩展性。

事件 描述 参数
folder.delete 文件夹删除时执行 (string) $path
file.delete 文件删除时执行 (string) $path
folder.rename 文件夹重命名时执行 (string) $originalPath, (string) $newPath
file.rename 文件重命名时执行 (string) $originalPath, (string) $newPath
folder.create 文件夹创建时执行 (string) $newFolderPath
folder.move 文件夹移动时执行 (string) $path, (string) $dest
file.move 文件移动时执行 (string) $path, (string) $dest
file.upload 文件上传时执行 (string) $filePath, (\Symfony\Component\HttpFoundation\File\UploadedFile) $uploadedFile

要使用这些钩子事件,可以直接继承Backend\Widgets\MediaManager类:

  1. Backend\Widgets\MediaManager::extend(function($widget) {
  2. $widget->bindEvent('file.rename', function ($originalPath, $newPath) {
  3. // Update custom references to path here
  4. });
  5. });

或者通过Event facade来全局监听(每个事件都以media为前缀,并将实例化的Backend\Widgets\MediaManager对象作为第一个参数传递):

  1. Event::listen('media.file.rename', function($widget, $originalPath, $newPath) {
  2. // Update custom references to path here
  3. });

问题处理

使用远程服务的最常见问题是SSL连接问题。如果您收到SSL错误,请确保您的服务器具有公共证书颁发机构(CA)的新SSL证书。