Tải Video với Rails và Ziggeo (phần 1)

Tôi nhớ có đợt hầu như không có ai thực sự xem video trên Internet vì tốc độ kết nối quá chậm. Sau đó, tốc độ bắt đầu tăng dần và tôi có thể tải xuống các bản nhạc, mất khoảng 4-5 phút để tải xuống một bài hát duy nhất trong khi nghe một bài khác. Trong năm 2005 YouTube nổi lên và nội dung video bắt đầu lan rộng. Ngày nay, video ở khắp mọi nơi và nhiều người thực sự thích chúng hơn văn bản.

Tôi đã trải qua quá trình làm việc với API YouTube trong một số bài viết trước của tôi, vì vậy hôm nay chúng ta sẽ thảo luận về một nền tảng lưu trữ video khác được gọi là Ziggeo. Nó cung cấp một API để lưu trữ và quản lý video cùng với khả năng nhúng chúng. Ngoài ra, còn có các tính năng bổ sung như nhận xét, kiểm duyệt, quyền truy cập lại, tích hợp với các dịch vụ của bên thứ ba.... Ziggeo có cả kế hoạch giá cả miễn phí và trả tiền. Với gói miễn phí, bạn có thể tải video lên với tổng chiều dài 100 phút, vì vậy đây là một lựa chọn tuyệt vời để thử nghiệm dịch vụ.

Trong bài này tôi sẽ giới thiệu cho các bạn cách tải video lên Ziggeo, liên kết chúng với người dùng, nhúng chúng, tìm kiếm thông tin meta, thiết lập callbacks của máy chủ và nghe các sự kiện.

Như thường lệ, bắt đầu bằng cách tạo một ứng dụng mới với Rails 5 gọi là ZigZag:

$ rails new ZigZag -T

Thêm một số gem cần thiết:

Gemfile

# ...
gem 'Ziggeo'
gem 'dotenv-rails'
gem 'devise'

• Ziggeo là một gem cho phép bạn dễ dàng làm việc với API của Ziggeo. Lưu ý rằng tên của nó bắt đầu với một chữ hoa "Z"!
• Dotenv sẽ được sử dụng để lưu trữ các biến môi trường cho việc phát triển.
• Devise sẽ cung cấp giải pháp xác thực.

Cài đặt những gem này, tạo ra một cấu hình cơ bản cho Devise và thêm một model User:

$ bundle install
$ rails generate devise:install
$ rails generate devise User
$ rails db:migrate

Tạo một VideoController và thiết lập một số route:

videoscontroller.rb

class VideosController < ApplicationController
end

config/routes.rb

# ...
resources :videos, only: [:new, :index, :destroy]
root 'videos#index'

Việc xác thực user bên trong ApplicationController:

applicationcontroller.rb

# ...
before_action :authenticate_user!

Ngoài ra, hãy cho hiển thị các tin nhắn flash bên trong layout:

views/layouts/application.html.erb

# ...
<% flash.each do |key, value| %>
  <div class="alert alert-<%= key %>">
    <%= value %>
  </div>
<% end %>

Bước tiếp theo là thiết lập Ziggeo.

Đăng ký Ziggeo trước khi tiếp tục. Khi đã hoàn tất, ứng dụng có tên "Default" sẽ có sẵn cho bạn, nhưng, tất nhiên, bạn có thể tạo ứng dụng khác. Mỗi ứng dụng có cài đặt riêng, video liên quan và key để hoạt động trong API. Ziggeo cung cấp ba key, vì vậy bạn hãy đặt chúng vào bên trong file .env:

.env

ZIGGEO_KEY=123
ZIGGEO_SECRET=abc
ZIGGEO_ENCRYPTION=345

Đảm bảo bạn loại trừ file này khỏi Git:

.gitignore

.env

Ziggeo cũng cung cấp một hướng dẫn nhanh cho bạn. Tiếp theo, include các file CSS và JavaScript cần thiết:

views/layouts/application.html.erb

<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-stable/ziggeo.css" />
<script src="//assets-cdn.ziggeo.com/v1-stable/ziggeo.js"></script>
<script>ZiggeoApi.token = '<%= ENV['ZIGGEO_KEY'] %>';</script>

Về cơ bản, điều này là đủ để bắt đầu tải lên và nhúng video trên trang web.

Ziggeo hướng dẫn đặt một thẻ đặc biệt (ziggeo) trên trang. Nó hoạt động như một trình chơi video, lưu và tải video lên cùng một lúc. Để điều khiển hành vi và sự xuất hiện , có nhiều tùy chọn để thiết lập.

Đây là dạng đơn giản nhất:

views/videos/new.html.erb

<ziggeo ziggeo-awidth="320" ziggeo-height="240"></ziggeo>

Điều này sẽ tạo ra sự kiểm soát đặc biệt để lưu lại và tải lên các video. Tôi không muốn video quá dài, vì vậy hãy đặt một param giới hạn ziggeo:

<ziggeo ziggeo-awidth="320" ziggeo-height="240" ziggeo-limit="60"></ziggeo>

60 ở đây có nghĩa là "không quá 60 giây". Ngoài ra, còn cho phép người dùng tải lên video đã lưu, khi ziggeo-perms để allowupload:

<ziggeo ziggeo-limit="60"
        ziggeo-awidth="320"
        ziggeo-height="240"
        ziggeo-perms="allowupload"></ziggeo>

Bây giờ bạn có thể kiểm tra nó. Bất kỳ video nào đã tải lên sẽ xuất hiện bên trong tab "Video" và tab "Moderation" trên dashboard của Ziggeo. Trong video, bạn sẽ thấy thông tin thêm về dữ liệu, chẳng hạn như độ dài, kích thước, ngày tạo, thẻ, và hơn thế nữa. Ngoài ra, có phần " Events" liệt kê tất cả các sự kiện đã xảy ra bên trong ứng dụng của bạn.

Sử dụng cùng một thẻ ziggeo để nhúng video trên trang. Thuộc tính chính là ziggeo-video chấp nhận uid của video :

<ziggeo ziggeo-video='123abc'
        ziggeo-awidth="320"
        ziggeo-height="240">
</ziggeo>

Hơn nữa, video có thể được phát trong popup. Để làm điều này, bạn chỉ cần thiết lập đối số ziggeo-popup:

<ziggeo ziggeo-video='123abc'
        ziggeo-awidth="320"
        ziggeo-height="240" ziggeo-popup>
</ziggeo>

Có thể tùy chọn cấu hình khác nhau cho trình nghe nhạc của Ziggeo.

Cũng lưu ý rằng máy nghe nhạc của Ziggeo có một số kiểu dáng được áp dụng, nhưng nó trông không tiện lợi. Vì vậy, bạn có thể thay đổi chúng nếu cần.

Kết thúc phần 1! Ở phần sau chúng ta sẽ tìm hiểu thêm về: các event của Ziggeo, kết nối với user, api,...

Thank you!

Tài liệu dịch: https://www.sitepoint.com/video-uploads-with-rails-and-ziggeo/