Простой инструмент для добавления коротких видео на сайт в формате сторис "Beta"

Простой инструмент для добавления коротких видео на сайт в формате сторис "Beta"

Мне нравится тратить свободное время на создание интересных и полезных сервисов (по моему мнению). С одной стороны, это позволяет выразить свой творческий потенциал, а с другой — может привести к созданию успешного и прибыльного бизнеса. Однако, некоторые проекты могут со временем уйти в небытие.

В таком творческом порыве родились такие проекты, как:

И еще десять проектов, которые были “рождены мертвыми”. А проекты выше превратились в хорошие SaaS-сервисы и процветают с каждым днем.

Мне нравится формат коротких видео

Думаю, что я не единственный стал заложником коротких видео в Instagram и TikTok. Если отбросить эффект погони за быстрым дофамином для обычного потребителя, остается очень важное свойство для бизнеса — возможность за короткое время донести ключевые преимущества своего продукта, показать, как им пользоваться, рассказать красивую историю или новость и быстро получить обратную связь.

Пример использования сторис в Т-Банке
Пример использования сторис в Т-Банке

В дополнение, многие известные компании, такие как Яндекс и Тинькофф, используют в своих приложениях этот формат. Да и за собой я заметил, что люблю кликнуть на превью и посмотреть несколько советов — руки так и тянутся…

Именно поэтому я подумал: чем я хуже? Почему бы не сделать в своих сервисах блок сторис? Ведь каждый разработчик знает и постоянно использует формулу успеха, которая гласит: если существует хороший велосипед, почему бы не сделать свой?

С чего я начал?

Старт проекта, само собой, стоило начать с выбора крутого и емкого названия — такого, чтобы перед глазами сразу возникали яркие образы и картинки летящие в лицо, которые принимаешь с улыбкой. Имя проекту я дал StoryShot — в переводе это означает “Сюжетный кадр”. А что вы подумали?

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

Я начал искать решение на видеохостингах и сайтах с автозапуском, и с божьей помощью наконец нашел его. Для тех, кто ищет, вот быстрый ответ из моего React проекта.

<video className="storys-video" preload="metadata" ref={videoRef} loop playsInline autoPlay no-controls="true" muted={isMuted} <source src="video2.mp4" type="video/mp4" /> Your browser does not support the video tag. </video>

По итогу я создал плеер который меня устроил, добавил несколько первых видео к нему, и подключил этот компонент к своему проекту thesimstree.com я оставил чтобы проверить реакцию пользователей и кол-во просмотров.

Первый плеер в сервисе

Через месяц, проанализировав метрики, мне показалось, что статистика достаточно хорошая, особенно в части инструкций по функционалу.

Маркетингу инструмент тоже пришелся по душе, поскольку в социальных сетях мы постоянно пользуемся сторис для рассказов о новых фичах продукта, новостях и отзывах. Однако в контексте плеера добавление новой истории превратилось в небольшой ад для разработчиков, из-за доработок и постоянного обновления самого сервиса, поскольку плеер был частью кода фронденда SaaS-сервиса.

Поскольку создание онлайн сервисов и приложений мой хлеб, да и недавно купили набор готовых компонентов Nuxt UI (кстати искренне рекомендую если вы как и мы разрабатываете фронт на Vue). Было решено выделить немного времени разработчика и протестировать все наши наработки на новом проекте.

По мне, получилось очень крутая годнота, щас расскажу как это все работает.

Краткое превью

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

Интерфейс создания истории
Интерфейс создания истории

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

Раздел публикации
Раздел публикации

Итоговый код блока историй можно скопировать с помощью кнопки и вставить его на сайте. Справится даже тот, у кого нету сайта, ведь код можно вставить даже в статью VC. Пример ниже:

<script type="module" crossorigin src="https://player.story-shot.com/player.js"></script> <div story-block data-story-block-id="YvdwLpMYJFO17uXU" data-auth-token="1000"></div>

Можно попробовать у себя, должно работать, если работать не будет, то, вероятно, это ваши проблемы.

На этом все, буду рад услышать ваше экспертное мнение, ведь каждый на VC понимает, что любой российской проект это импортозамещение, и, может быть, это тот самый инстаграм, который мы с вами заслужили?

А кому совсем интересно, можете зарегистрироваться и попробовать сервис по ссылке ниже, чтобы окончательно убедиться в его работоспособности. Поскольку сервис бесплатный и в бета режиме, в любой момент он может просто закрыться, а ваш профиль будет удален, таков путь.

А если вы не хотите, чтобы ваш профиль был удален, то напишите мне в телеграм t.me/sebafurego, буду рад пообщаться с приятными и конструктивными ребятами. Всем добра!

11
Начать дискуссию