README

Bunny Stream是一个Statamic插件，它集成了Bunny Stream API，以便在Statamic CP中为单流库提供集成。

功能

上传并重命名视频到Bunny Stream
自动检测转码状态
从Bunny Stream删除视频
通过自定义字段类型或自定义标签嵌入视频
包含可定制的plyr.js播放器

如何安装

1. 通过Composer安装

composer require laborb/bunny-stream

2. 插入CSS和JS文件

为了正确显示视频，您需要在您的布局中的<head>部分添加Statamic Tag {{ video_styles:css }}，并在</body>元素之前添加{{ video_styles:js }}标签。

这还包括hls.js以支持HLS流。

或者，您可以选择只将这些标签添加到您想要显示视频的页面。

如何配置

您需要在您的环境中提供以下配置选项

BUNNY_LIBRARY_ID=yourid            #Your Bunny Stream LibraryID
BUNNY_API_KEY=yourapikey           #Your Libraries API Key
BUNNY_CDN_HOSTNAME=yourcdnhostname #Your Libraries CDN Hostname

BUNNY_PLAY_URL=play                #Define your direct play URL (https://yourdomain.com/BUNNY_PLAY_URL/yourvideoID)(optional)

要嵌入视频，请使用播放URL或直接嵌入URL（https://yourdomain.com/BUNNY_PLAY_URL/embed/yourvideoID）

您可以在Bunny Stream仪表板中获取所有值，地址为https://dash.bunny.net/stream/ 交付 > 流 > API

添加自定义CDN主机名

要添加自定义主机名以托管CDN上的视频，您可以执行以下操作

登录到您的bunny仪表板，然后转到交付 > 流 > API
在拉取区域点击管理
在您的DNS设置中创建一个CName条目，指向显示的bunny CDN主机名
在bunny设置中输入您的自定义主机名并激活SSL
在.env中使用您的自定义主机名（BUNNY_CDN_HOSTNAME=yourcdnhostname）

现在您的视频将通过您的自定义主机名提供。

发布配置文件（可选）

如果您想，您可以发布配置文件。

php artisan vendor:publish --tag=bunny-config

如何使用

安装插件后，您需要首先在您的.env中添加配置选项。

上传视频

出现一个新的CP导航项：Videobrowser。在那里您可以上传和重命名视频文件。上传后，它们需要被处理。视频将在bunny直接处理。给定的进度指示器显示bunny的进度。处理完成后，视频将在videobrowser和包含的字段类型中可用。

处理视频

您可以通过提供的Statamic Tag {{ bunny_video }} 或在内容区域通过提供的Statamic Fieldtype Bunny嵌入以前上传的视频。

视频标签

您应该始终使用提供的Video标签，因为它包含所有可用的选项。

{{ bunny_video :id="bunny_field" :responsive="responsive" :controls="controls" :ratio="ratio" :width="width" :height="height" :captions_enabled="captions_enabled" :captions_src="captions_src" :captions_src_lang="captions_src_lang" :captions_lang="captions_lang" :captions_default="captions_default" class="" :color="color" }}

您需要添加自己的Statamic Fieldset，其中至少包括Bunny Fieldtype。

您也可以添加一些选项

id: 必需期望有效的Bunny Stream GUID。由包含的Bunny Fieldtype自动提供。
responsive: 以响应式方式显示视频。它尊重给定的比例（默认：16/9）。
ratio: 期望以下之一的比例：1/1、16/9、4/3、9/16。仅与responsive: true一起使用。
controls：如果设置为 true，则视频播放器中的所有控件都可用。如果设置为 false，则不可用，视频将静音循环自动播放。
width：视频播放器的宽度。仅在 responsive: false 时可用。保持视频的比例。
height：视频播放器的高度。仅在 responsive: false 时可用。保持视频的比例。
captions_enabled：启用或禁用字幕。期望一个布尔值。
captions_src：字幕文件的URL。期望一个指向有效 .vtt 文件的URL。
captions_src_lang：字幕文件的语言。期望一个有效的语言代码。例如：en、de、fr、...
captions_lang：在设置中显示的字幕语言。期望一个字符串，如 English、Deutsch、Français、...
captions_default：如果设置为 true，则默认启用字幕。如果设置为 false，则用户需要手动启用。
class：可以为视频元素添加额外的类。
color：可以设置播放器控件的颜色。期望一个有效的十六进制颜色代码。默认为 #333

视频字幕

您可以为视频添加字幕。字幕文件需要是一个有效的 .vtt 文件。您可以在 Statamic 中托管该文件或在不同的服务器上托管。

遗憾的是，Bunny Stream API 还不支持字幕。您需要自己托管文件并提供视频标签的URL。

当前仅支持一个字幕文件。

缩略图

您可以使用视频标签获取视频的缩略图URL：{{ bunny_video:thumbnail :id="bunny_field" }}。它期望视频ID作为参数。

示例字段集

您可以使用此示例字段集与提供的标签作为布局，包括所有可用选项。

title: Video
fields:
  - handle: bunny_field
    field:
      type: bunny
      display: Video
      icon: video
      listable: hidden
      instructions_position: above
      visibility: visible
      hide_display: false
  - handle: controls
    field:
      default: true
      type: toggle
      display: Controls
      icon: toggle
      instructions: "Ohne Controls wird das Video automatisch gemuted und im Loop automatisch abgespielt."
      listable: hidden
      instructions_position: above
      visibility: visible
      hide_display: false
  - handle: responsive
    field:
      default: true
      type: toggle
      display: "Responsive Darstellung"
      icon: toggle
      instructions: "Stellt das Video in der entsprechenden Ratio responsiv dar."
      width: 33
      listable: hidden
      instructions_position: above
      visibility: visible
      hide_display: false
  - handle: width
    field:
      input_type: number
      append: px
      antlers: false
      type: text
      display: Breite
      icon: text
      instructions: "Breite des Videos"
      width: 33
      listable: hidden
      instructions_position: above
      visibility: visible
      hide_display: false
      if:
        responsive: "equals false"
  - handle: height
    field:
      input_type: number
      append: px
      antlers: false
      type: text
      display: Höhe
      icon: text
      instructions: "Höhe des Videos"
      width: 33
      listable: hidden
      instructions_position: above
      visibility: visible
      hide_display: false
      if:
        responsive: "equals false"
  - handle: ratio
    field:
      options:
        1/1: null
        16/9: null
        4/3: null
        9/16: null
      default: 16/9
      type: button_group
      display: Ratio
      icon: button_group
      instructions: "Das Bildverhältnis des Videos. Nur in responsiver Darstellung möglich."
      listable: hidden
      instructions_position: above
      visibility: visible
      hide_display: false
      if:
        responsive: "equals true"
      width: 66

如何自定义

包含的视频播放器是一个简单的 plyr.js 播放器，没有自定义。

您可以使用简单的CSS类来根据需要为整个播放器设置样式：https://github.com/sampotts/plyr?tab=readme-ov-file#customizing-the-css

laborb / bunny-stream

维护者

详细信息