Как загрузить видео файл на сайт и разместить его для просмотра на странице сайта

20 августа 2018

Советы

Часто существует потребность разместить тот или иной видео ролик на сайте, но не использовать для этого различные видео ресурсы: ютуб, рутуб, и т.д. В данной статье мы вам расскажем, как загрузить видео файл в системе управления сайтом ТСАдмин и в текстовом редакторе разместить его на странице сайта с видео плеером для просмотра.

1. Выбираем и подготавливаем видео файл

Чтобы воспроизводить видео файл на сайте, его необходимо загрузить на сайт, т.е. на хостинг.

Как правило все видео файлы имеют большой объем, поэтому перед загрузкой, такой файл необходимо обработать и уменьшить его вес. "Компрессовать" видео вы можете с помощью бесплатной версии программы Any Video Converter (ссылка откроется в новом окне) или использовать для этого любую другую программу на ваше усмотрение.

Файл необходимо переименовать: правильное название должно содержать только строчные латинские символы, цифры, дефис "-" и подчеркивание (земля) "_". Использование пробелов и других символов запрещено! Это приведет к "битой ссылке" и ролик не будет воспроизводиться на сайте.

Пример правильного названия файла: video_na_sayt.mp4

Пример НЕ правильного названия: Видео на сайт.mp4

Итак, когда вы "сжали" свое видео, правильно его переименовали, пришла пора его загрузить на хостинг.

2. Загружаем видео файл на сайт (на хостинг)

Открываем систему управления сайтом ТСАдмин и переходим в раздел "Файлы" (файловый менеджер):

В разделе переходим во вкладку "Показать файлы":

Для хранения видео, создаем папку "video". Для этого на папку "files" кликаем правой клавишей мыши и выбираем "Создать папку".

Папку называем "video" маленькими буквами без пробелов и других символов.

Выделяем папку для загрузки в нее видео файла и кликаем на кнопку "Загрузить".

Выбираем на компьютере подготовленный файл и ждем когда он загрузится. После окончания процесса загрузки, у вас должно выглядеть примерно так: видео файл размещен в папке "video".

3. Размещение видео плеера на страницу сайта

В системе управления сайтом ТСАдмин открываем страницу на которой необходимо разместить видео плеер и переходим к текстовому редактору.

Сначала мы установим сам плеер.

Копируем от сюда код плеера как есть:

<video controls="controls" src="путь к видео файлу"></video>

Для установки кода, текстовой редактор переключаем на "Источник":

В нужном месте, с новой строки вставляем скопированный код плеера, получается примерно так:

Сейчас нам необходимо узнать путь размещения видео файла, чтобы указать его в коде плеера. Для этого мы открываем еще одну вкладку (вкладку браузера с плеером не закрываем). В новой вкладке, так же открываем редактор, кликаем на иконку "Ссылка" (цепочка):

В открывшемся окне кликаем "Выбрать на сервере":

В следующем окне выбираем папку "video' и в ней кликаем 2 раза на загруженный видео файл.

В предыдущем окне в поле "ссылка" мы видим путь размещения видео файла на хостинге. Выделяем все содержимое поля и копируем.

Открываем вкладку браузера, в которой у нас открыт редактор с вставленным кодом плеера, и в нужном месте вставляем путь к файлу.

Тут: 

Чтобы получилось так:

Страницу с плеером необходимо сохранить кликнув на "Сохранить" в левом верхнем углу.

Вкладку, в которой скопировали путь к видео файлу, можно закрыть, она больше не нужна.

После сохранения, страница с установленным видео плеером в системе управления должна выглядеть примерно так:

Откроем страницу на сайте, чтобы проверить как работает установленный плеер. Для этого можно кликнуть "Открыть на сайте" в правом верхнем углу.

На сайте плеер выглядит примерно так:

Размер видео и картинка-заставка, автоматически берутся из самого видео файла. 

Кликаем "Воспроизвести", смотрим видео. Видео размещено!

Длительные видео, файлы большого объема, низкая скорость интернета, слабая производительность компьютера... эти и другие параметры могут замедлить воспроизведение видео, имейте это ввиду при просмотре.

У нас получилось вот так: