В этом уроке я покажу вам, как создать платформу для обмена видео за 6 минут с помощью Ruby on Rails. В этом уроке будут рассмотрены базовые принципы, в последующих уроках я продемонстрирую стили, добавление всплывающих окон, добавление дополнительных полей ввода и т. Д. В этом уроке мы настроим строительные блоки для создания системы загрузки видео и отображения этого видео с помощью video.js.
Для начала создадим новое приложение rails. Откройте свой терминал и введите эту команду, чтобы создать новое приложение rails.
rails new videoSharingWebsite
Эта команда сгенерирует новое приложение Rails. Теперь идите и cd или смените каталог в своем новом приложении Rails.
Теперь в терминале запустите rails s, чтобы запустить сервер. Вы должны увидеть приветственное сообщение.
Команда rails s запускает сервер Rails и позволяет вам приступить к работе! Хорошо, теперь давайте откроем наше приложение в вашем любимом текстовом редакторе. откройте свой Gemfile Это драгоценные камни, которые нам понадобятся сейчас. Добавьте их в свой Gemfile
gem 'dropzonejs-rails' gem 'videojs_rails' gem 'jquery-rails' gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7' gem 'simple_form', '~> 3.4' gem "paperclip", "~> 5.0.0"
dropzonejs-rails используется для асинхронной загрузки видео, videojs_rails используется для красивого видеоплеера, jquery-rails используется для функций jQuery, bootstrap-sass уже должен поставляться с Gemfile, но на всякий случай simple_form используется для более простого способа создавать формы и paperclip для загрузки файлов.
запустите bundle в терминале, чтобы установить те новые драгоценные камни, которые мы добавили.
Теперь в текстовом редакторе перейдите к app/assets/javascripts/application.js и добавьте эти операторы require, чтобы требовать файлы для новых установленных гемов.
//= require jquery //= require jquery_ujs //= require turbolinks //= require video //= require bootstrap-sprockets //= require dropzone //= require_tree .
Теперь перейдите к app/assets/stylesheets/application.css и добавьте следующее, чтобы у нас были все зависимости.
*= require_tree . *= require dropzone/dropzone *= require_self *= require video-js */ @import "bootstrap";
Теперь давайте запустим генератор скаффолда. Генератор скаффолда создаст для вас весь интерфейс CRUD (создание, обновление, удаление, уничтожение). Это станет отличной отправной точкой для создания системы загрузки видео. В терминале запустить ..
rails g scaffold Video
Как видите, это создало массу файлов. Это создало представление модели и контроллер, чтобы вы могли создать интерфейс CRUD, с которым мы будем работать. Теперь мы добавим миграцию скрепки в нашу модель видео, которую мы создали с помощью генератора скаффолда. Мы используем скрепку для обработки загрузки файлов, поэтому давайте выполним следующую команду в терминале.
rails g paperclip Video mp4
Скрепка добавлена следующая миграция
class AddAttachmentMp4ToVideos < ActiveRecord::Migration[5.1]
def self.up
change_table :videos do |t|
t.attachment :mp4
end
end
def self.down
remove_attachment :videos, :mp4
end
end
Убедитесь, что если скрепка не добавила ActiveRecord :: Migration [5.1], то вам нужно добавить эту дополнительную часть [5.1], иначе вы получите сообщение об ошибке при запуске следующей команды.
Теперь запустите rails db:migrate в своем терминале, чтобы перенести базу данных.
Теперь перезапустите сервер и перейдите на localhost: 3000 / videos / new, вы должны увидеть ..
Теперь давайте вернемся в наш текстовый редактор и перейдем к нашей модели видео в app/models/video.rb. Нам нужно добавить следующие объявления скрепок для нашей видеомодели. Добавьте к своей модели следующее.
has_attached_file :mp4,
:styles => {:thumb => ["400x400#", :jpg]}
validates_attachment_content_type :mp4, content_type: /\Avideo/
Теперь, когда мы добавили это, перейдите к app/views/videos/_form.html.erb. Мы будем использовать простую форму, изначально у вас будет обычная form_for. Ниже приведен код, который нам понадобится для нашей формы. Я пройдусь по этому поводу, но используйте этот код вместо формы, которая уже существует.
<%= simple_form_for(@video,html:{multipart:true, class:'dropzone', id:'my-dropzone'}) do |f| %>
<%= f.error_notification %>
<br>
<div id = "dropzonePreview" class = "dz-message dz-default needsclick">
<img style = "width:100px; height:100px;" src = "https://www.freeiconspng.com/uploads/upload-icon-31.png">
<h3>Drop a video file here </h3>
<strong>or Click to upload</strong>
</div><br>
<div class="fallback">
<%= f.input :mp4 %>
</div>
<div class = "submit ">
<%= f.button :submit, class:'submit-btn btn ' %>
</div>
<% end %>
«Мы должны увидеть это в браузере. Итак, dropzone требует, чтобы мы добавили класс dropzone для стилизации, и я добавил id "my-dropzone", чтобы мы могли позже манипулировать формой dropzone через javascript. В блоке предварительного просмотра dropzone будут отображаться файлы при загрузке. Теперь перейдем к app/views/videos/new.html.erb. Здесь добавьте следующий код.
<h1>New Video</h1>
<%= render 'form', video: @video %>
<script>
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
autoProcessQueue: false,
acceptedFiles: ".mp4,.mov,.wmv,.flv,.avi",
maxFilesize:500,
init: function() {
var myDropzone = this;
$(".submit").click(function(e){
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
this.on("success", function (file, responseText) {
window.location.href = ("/videos/"+responseText.id);
});
}
};
$("#my-dropzone").dropzone({
addRemoveLinks: true,
paramName: 'video[mp4]'
});
</script>
Здесь мы визуализируем форму частично. Затем мы настраиваем параметры dropzone. Мы хотим убедиться, что при добавлении файла он не загружается автоматически, поэтому мы не обрабатываем очередь автоматически. Также были указаны типы файлов, которые мы хотим использовать, и максимальный размер файла. Всякий раз, когда инициализируется dropzone, мы говорим, что когда мы нажимаем кнопку отправки, обрабатываем все файлы, которые находятся в dropzone, и предотвращаем поведение формы по умолчанию. Кроме того, я указываю, что хочу, чтобы в зоне перетаскивания присутствовал только один файл. Если добавляется еще один файл, мы просто перезаписываем предыдущий файл новым. Наконец, если отправка файла прошла успешно, перенаправьте нас на идентификатор этого видео, которым будет представление представления. Теперь, если мы попробуем что-то загрузить, мы получим ошибку.
Итак, нам нужно перейти к нашему videos_controller.rb и добавить наши сильные параметры. Внизу файла добавьте свои сильные параметры.
params.require(:video).permit(:mp4)
Теперь, если мы попытаемся загрузить видео, мы получим чек и будем перенаправлены на страницу шоу для этого конкретного видео. В настоящее время на странице шоу нет ничего, что можно было бы увидеть, потому что мы не добавили для этого никакого кода, так что давайте сделаем это. Перейдите к app/views/videos/show.html.erb и добавьте следующее.
<video id="my_video_1" class="video-js vjs-default-skin" width="100%" height="500px"
preload="auto" autoplay poster='https://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2, 2.5, 3.0], "controls":"true" }'
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="<%= @video.mp4.url %>" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
Идеально! Теперь у вас есть система загрузки видео с красивым видеоплеером. Если это руководство окажется полезным, я создам часть 2, в которой мы добавим пользователя, который может создавать и публиковать видео, стили, дополнительные поля ввода и несколько интересных диалоговых сообщений, которые помогут направлять пользователя. Код находится на github здесь https://github.com/jalenjackson/Video-sharing-app-tutorial
