Разработка сайтов в Святогорске, ДНР. Как разработать видеоплеер с учетом UX

 
 

В этой статье рассматриваются различные элементы управления видеоплеером, их назначение и элементы управления, которые следует выбирать для конкретных случаев использования, таких как обучающие платформы, платформы социальных сетей, опытные пользователи или мобильные пользователи. Знаете ли вы, сколько классных элементов управления для опытных пользователей есть на YouTube? Читать дальше!

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

Взгляните на YouTube в наши дни. Пользователи могут перемещаться по сегментам видео, используя функцию глав YouTube. Эта функция помогает пользователям быстро находить видео для релевантного для них сегмента.

Как часто вы смотрели видео в надежде найти конкретную информацию, но обнаруживали, что оно не отвечает на ваш конкретный вопрос? Это расстраивает!

Опытные ютуберы придумали временное решение этой проблемы. Они сочли полезным перечислить различные сегменты вместе с отметками времени в описании видео. Это решение по-прежнему означало, что вам нужно было открыть описание, чтобы найти свой конкретный вопрос. Вдобавок ко всему, Google было непросто индексировать видео, в которых рассматриваются разные вопросы по определенной теме.

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

Почему UX для видеоплееров имеет значение?

Возьмите видеоплатформу, такую ​​как YouTube. Пользователи потребляют контент по-разному. Давайте рассмотрим, как три разных человека используют YouTube:

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

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

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

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

Итак, какие элементы управления видеоплеером мы можем найти?

Какие элементы управления видеоплеером существуют?

Существует множество различных элементов управления видеоплеером. В этом списке перечислены элементы управления, которые вы чаще всего встречаете:

Кнопка воспроизведения/паузы.

Перейти к следующему видео.

Отрегулируйте громкость.

Включите субтитры.

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

Изменить качество видео. Не у всех хороший интернет. Поэтому разрешите пользователям регулировать качество. Обязательно предоставьте возможность автоматической настройки качества видео. Для пользователей с нестабильным интернет-соединением видеоплеер может автоматически регулировать качество видео в зависимости от скорости соединения. Большинство пользователей предпочитают пониженное качество, чтобы продолжить просмотр видео без перерывов.

Изображение видео, воспроизводимого на YouTube

Менее распространенные элементы управления включают следующее:

Отрегулируйте скорость видеоплеера. Этот элемент управления позволяет замедлять или ускорять видео. Чаще всего вы можете регулировать скорость видеоплеера с шагом 25% в диапазоне от 0,25 до 2.

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

Перемотка назад и вперед. Хотя этот элемент управления полезен, он в основном скрыт. Например, YouTube позволяет использовать этот элемент управления только с помощью сочетаний клавиш. Немногие видеоплееры реализуют эту функцию как часть своих элементов управления видео по умолчанию.

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

настройки ютуба

Наконец, мы не должны забывать, как мы отображаем текущую временную метку и продолжительность видео. Самое простое решение — сначала показать текущую временную метку видео, а затем общую продолжительность видео. В этом примере мы поставили видео на паузу на 40 секунд с общей продолжительностью видео две минуты 13 секунд — «0:40 / 2:13». С другой стороны, некоторые видеоплееры показывают оставшуюся длину видео. Не делайте этого, так как это сбивает пользователя с толку.

В следующем разделе рассматриваются распространенные и более экспериментальные сочетания клавиш для навигации по видеоплееру.

Как разработать видеоплеер для опытных пользователей?

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

Сочетания клавиш улучшают работу опытных пользователей.

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

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

Пробел: начать/приостановить видео

Клавиша со стрелкой вправо: перемотка видео вперед на 5 или 10 секунд.

Клавиша со стрелкой влево: перемотка видео назад на 5 или 10 секунд.

M: отключить или включить звук видео

F: вход или выход из полноэкранного режима

Но зачем ограничивать возможности этими сочетаниями клавиш? YouTube является ведущим игроком в реализации сочетаний клавиш. Вот чему мы можем научиться у опытных пользователей YouTube:

Нажатие Jперематывает видео на 10 секунд, а клавиша со стрелкой влево перематывает видео на 5 секунд.

Нажатие Lперематывает видео вперед на 10 секунд, а клавиша со стрелкой вправо перематывает вперед на 5 секунд.

Цифровые клавиши — менее известное сочетание клавиш. Нажатие 0возвращает вас к началу видео. YouTube также разбивает каждое видео на девять частей одинаковой длины. Независимо от длины, нажатие любой из цифровых клавиш (кроме нуля) приведет вас к этому месту в видео. Это отличный способ прыгнуть в конец, вернуться к началу или куда-нибудь посередине.

Здорово, что на YouTube реализована быстрая перемотка вперед/назад на 5 или 10 секунд. Если вы пропустили небольшую деталь видео, вы можете быстро перемотать его назад с помощью клавиши со стрелкой влево. Если вы хотите просмотреть видео, вы можете нажать Lклавишу для сканирования видео с 10-секундными интервалами.

Различные типы элементов управления видео для разных целей

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

Образовательные видео

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

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

Социальные видео

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

Тем не менее, стоит реализовать параметры быстрого обмена как часть элементов управления вашего видеоплеера. Не забудьте добавить возможность делиться с определенной временной меткой. Чаще всего пользователи хотят поделиться определенным моментом в видео с друзьями.

Twitch, с другой стороны, позволяет пользователям копировать видео прямо из видеоплеера.

Clips позволяет зрителям Twitch быстро делиться самыми уникальными моментами из трансляций, а вещателям — расширять свои каналы с помощью обмена в социальных сетях!

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

Источник: видеоплеер Twitch

Мобильные видеоплееры

Мобильные видеоплееры требуют более простого дизайна. Невозможно добавить множество элементов управления на экран мобильного устройства.

Мобильный видеоплеер YouTube, например, предоставляет следующие элементы управления:

войти в полноэкранный режим

перейти к следующему или предыдущему видео

приостановить видео

включить субтитры

открыть настройки видео

Однако для мобильных видео ярлыки улучшают взаимодействие с пользователем. Например, дважды коснитесь правой стороны экрана, чтобы перемотать видео вперед на десять секунд. То же самое относится к левой части экрана, чтобы перемотать видео на десять секунд назад. Кроме того, вы можете провести вверх и вниз, чтобы увеличить видео или снова отобразить результаты поиска. Здесь основное внимание уделяется скорости использования, что положительно влияет на пользовательский опыт.

Вывод: определите свою аудиторию

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

Например, функция обрезки Twitch уникальна среди других видеоплееров. Эта функция идеально адаптирована для своей пользовательской базы, чтобы быстро сохранить крутой момент во время прямой трансляции.

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

Взгляните на все доступные сочетания клавиш YouTube, чтобы черпать вдохновение!

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

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая