Кроссплатформенное Smart TV приложение в одном экземпляре. Библиотека SmartBox для Samsung, LG, Philips, STB Mag 200/250 и других

Разработка веб-сайтов *JavaScript * Копаясь в памяти своего неискушённого идеальным миром мозга, я, припоминаю, как два года назад начиналась наша история по разработке приложений для SmartTv. Если коротко, то это был АД!!! богатейший опыт. Однако, хотелось бы получить этот опыт сразу, не наступая на недокументированные грабли, разложенные по всей технологии, и специальные детские грабли разложенные каждым вендором отдельно. Но как говорится «c’est la vie» и нам пришлось пробиваться сквозь тернии к звёздам! В итоге мы получили кроссплатформенную расширяемую библиотеку для всех SmartTv. И имя этой библиотеке — SmartBox. Opensource, а потому постоянно в процессе разработки и документирования.

Координаты и демки Smartbox

• Репозиторий — github.com/immosmart/smartbox, можете подружиться с авторами.
• Полное демо — immosmart.github.io/smartbox/demo/demoApp (можно запускать в любом SmartTV, для браузера зарезервированы кнопки ESC=return, A,B,C,D = функциональные кнопки). Больше картинок от демо приложения
  

  Плеер, Клавиатура, Навигация, Лог

  (Картинки кликабельны)

• Демо hello word, клавиатуры, навигации, «фантомная» навигация
• Документация скоро будет даже на английском, чаще смотрите в develop ветку.

Предпосылки к созданию библиотеки

Несмотря на то, что почти всё SmartTv стоит на браузерных движках (Gecko, Webkit), есть у каждого отдельного вендора свои баги нюансы и баги недокументированные возможности. Собственно отсюда всё зло:

• Невозможность писать один раз. Несмотря на созданные вендорами телевизоров альянсы и даже SDK, как ни старайся, а несколько приложений делать. Да и плюс к этому, есть вендоры, которым этот альянс за глаза не нужен, например, Samsung. Итого: если появится еще одна платформа или вы захотите расширить приложение на существующую, вам придётся не сладко.
• Невозможность писать один раз для одного вендора. Да, как ни удивительно, но есть и такое. Различие вёрстки, различные движки браузеров, различие API объектов. Голова кругом! (например 2011 и 2012 и 2013 TV Samsung)
• Нежелание использовать чужое. Здесь это как раз оправданный баг сознания. Под чужим я понимаю специализированные разные элементы управления интерфейсом: клавиатуры, селекты, инпуты, формы и т.д. У каждого вендора они, к сожалению, разные. Попробовав однажды — откажешься навсегда! А откажешься из-за банальной непереносимости на другие платформы.
• Необходимость использовать чужое. Есть целый комплекс низкоуровневых для TV API, который нет возможности, а порой и желания переносить на TV-братьев по разуму. К таким мы относим: видеоплееры, системы защиты контента, DRM и т.д.
• Сырость технологии в целом. Действительно, редкий фронтэнд программист сядет и с лёту сделает приложение для SmartTV, а тем более для нескольких разом. К тому же, как я уже говорил, детские грабли, разложенные каждым вендором отдельно, создают некоторые болевые ощущения в области их удара после обнаружения. Более глубокое осознание проблемы заключается в диком желании писать код абстрагируясь от конечного устройства. Это полезно как на первом этапе знакомства с технологией, так и после досконального изучения всего сущего в Smart Tv.
• Альтруизм. Избавляем мир от граблей! Особенно детских.

Возможности библиотеки SmartBox

Нудно и упорно разрабатывая свои приложения для Смартов, мы вынуждены были изучать всю документацию вплоть до обращения в саппорт за пояснениями. Всё это систематизировалось и накапливалось в нашем таск трекере и wiki. Также мы изучили исходники наших конкурентов братьев по оружию — i*i, yo*a, TV*avr, Z**mbyBox и иных видео сервисов. (Откуда и каким способом они были получены я не знаю, даже не спрашивайте). Из этих исходников мы просто выяснили, что все мы идём одной дорогой к счастливому будущему SmartTv. В итоге сели и всё переделали написав библиотеку, которая упростила нам жизнь в разы. И, надеемся, что упростит и начинающим «смартистам».

Из возможностей:

• Писать абстрактный код основываясь на API библиотеки, а не каждого TV или приставки (и это реально работает).
• Расширять приложения на различные платформы без перепиливания самого приложения.

Поддерживаемые платформы:

Пока мы используем термин triple penetration, т.е. имеем проникновение в 3 платформы:

• Samsung,
• Lg,
• Philips,
• STB Mag 200/250

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

Из плагинов на сегодняшний день:

• Методы отдельных платформ,
• Консоль Лог,
• Навигация (Логика и возможности описаны очень подробно в документации),
• Поля ввода,
• Виртуальная расширяемая на любой язык или набор символов клавиатура,
• Голосовое управление (актуально для Samsung),
• Управление жестами,
• Легенда,
• Плеер,
• Абстракция LocalStorage — хранение данных на конечных устройствах.

TODO на ближайшее будущее

• Написать более высокоуровневый framework.
• Внедрять поддержку других Вендеров помимо лидеров (Sony, Panasonic, DuneHD, др).
• Фичи и баги.

Всем спасибо и хорошего окончания недели!

PS:

• Возможные баги в браузере не являются аномалией. Песня о другом.
• Надеюсь Сашка не засудит меня как мистера Дурова.
• Вероятно не на все тонкости смогу ответить. Потому инвайты можно слать заслуженным разработчикам:
  • Чинин Денис (chininden[at]gmail.com) — девелопер,
  • Полецкий Артём (artempoletsky[at]gmail.com) — девелопер,
  • Попович Илья (Loshadushka[at]gmail.com) — тестер-языковед-переводчик,
  • Шамгунов Ильдар (il.shamgunov[at]gmail.com) — режиссёр и оператор,
  • Логинов Павел (@PLoginoff) — критик и главный редактор.

UPD:

Вышла статья о том как создать и запустить приложение. Создание кроссплатформенного Smart TV приложения на базе библиотеки SmartBox для Samsung, LG, Philips и других

UPD2:

Внедрена поддержка STB Mag 200/250

Большинство современных людей не могут уже представить свою повседневную жизнь без Интернета – общение, развлечения, отдых, работа, покупки, образование. Многое на сегодняшний день базируется именно на Интернет-технологиях, которые не обошли своим внимание даже телевизоры. «Умной» техникой уже никого не удивишь, однако немногие владельцы в курсе всех возможностей своих устройств. Редакция сайта «ЯНашла» подготовила для Вас обзор лучших приложений для Smart TV, который представляет собой наиболее полный материал по данной теме.  

Технология Smart TV

Технология Смарт ТВ позволяет превратить привычный телевизор в многофункциональное устройство по типу смартфона — с полноценной операционной системой, доступом в Интернет и набором приложений, которые можно скачивать из специального магазина. Все это в комплексе с большим экраном, объемным звучанием и насыщенно-красочным изображением добавляет Smart TV преимуществ.

В зависимости от функционала, отдельные «умные» устройства могут иметь файловый менеджер и медиа-плеер, поддерживать функцию управления жестами или голосом, оснащаться встроенной камерой и микрофоном, а также различными наборами разъемов, которые определяют возможности техники. Популярность моделей со Smart TV растет с каждым годом, что вызвано постепенным усовершенствованием ПО и расширением списка производителей.

На данный момент Smart TV дает возможность:

• просматривать ролики на YouTube;
• работать с сетевыми ресурсами (в том числе, используя пульт дистанционного управления);
• подключать различные телеканалы;
• просматривать фильмы в онлайн-кинотеатрах;
• осуществлять поиск в Сети;
• общаться в социальных сетях;
• осуществлять видеозвонки и видеоконференции;
• совершать покупки в онлайн-магазинах;
• запускать спортивные трансляции;
• играть.

Приложение – что это?

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

Для функционирования большинству из них требуется непрерывная связь с Сетью и лишь некоторые способны работать в формате оффлайн.

Далее рассмотрим основные критерии выбора программ для телевизора со Смарт ТВ, чтобы понять какие лучше установить.

Как выбрать сервис для Smart TV?

Один из главных параметров, характеризующих Smart TV, является платформа, на которой базируется программное обеспечение.

По мнению покупателей, самые хорошие операционные системы для ТВ на 2021 — это:

1. Android TV – устанавливается как на бюджетных устройствах, так и на моделях марки Sony и PHILIPS. К плюсам ПО следует отнести такие функциональные особенности, как рекомендации содержания в поисковой строке и достаточно чистый интерфейс. К минусам – софт не отличается стабильностью и способен порой сбоить. В таких случаях чаще всего помогает перезагрузка системы;
2. WebOS – устанавливается в основном на моделях фирмы LG типа OLED и Nano Cell. Достоинства – интеграция с Google Assistant и Alexa, а также быстрая и удобная навигация. Значительные недостатки у данной ОС отсутствуют;
3. Tizen – применяется на устройствах от Samsung. Из плюсов следует отметить наличие бесплатных каналов и качественной навигации. Из минусов – универсальный поиск недостаточно хорошо проработан. Интерфейс Tizen похож на WebOS, однако на данный момент система уступает конкурирующим продуктам;
4. SmartCast – функционирует на продуктах марки Vizio. Плюсы – встроенный Google Chromecast. Минусы – общая медлительность системы. Несмотря на то, что SmartCast можно назвать одной из самых гибких операционок, она при этом и самая медлительная;
5. Roku TV – встречается в телевизорах бренда TCL, Insignia и Hisense. ПО отличается простотой использования, а также продуманными инструментами универсального поиска. Но при этом у него слишком простой интерфейс;
6. MyHomeScreen – имеется в ТВ от Panasonic. Создавался на базе Firefox TV. К достоинствам следует отнести хорошую скорость, а также интуитивно понятный и быстро настраиваемый интерфейс. К недостаткам – простоватый вид.

Какие бывают приложения?

В общем они делятся на такие виды:

• для рабочего стола;
• нативные;
• веб-приложения;
• гибридные.

Для рабочего стола

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

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

Нативные

Пишутся тех языках программирования, которые были утверждены непосредственно разработчиками ПО под конкретную платформу. В связи с чем, нативные софты легко встраиваются в «родную» операционку, под которую оптимизированы, и функционируют быстро и корректно. Подобные программы загружаются через Интернет из магазинов приложений (Google Play для Android, App Store для WebOS и т.д.).

Веб-приложения

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

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

Однако некоторые веб-приложения могут быть представлены в официальных магазинах и при установке отображаться иконкой на экране. Но качество таких программ уступает полноценным нативным разработкам. Как правило, долго такой софт на устройствах не «живет». В том числе, по той причине, что не отличается безопасностью — он не способен шифровать файловую систему, а для расширения функционала и создания обновлений разработчикам приходится заново писать программу. То, что такие сервисы все еще присутствуют на рынке обуславливается быстротой их создания и низкой стоимостью.

Гибридные

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

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

Какой фирмы телевизор лучше?

Лучшие производители моделей телевизоров со Smart TV – это Samsung и LG. Они поставляют на рынок технику среднего ценового сегмента и премиум-класса.

Популярные модели также выпускают Sony, PHILIPS, Panasonic, Toshiba и Xiaomi.

Недорогие устройства производятся под брендами BBK, Thomson, Mystery, Supra, Erisson, Telefunken, JVK, Harper, TCL.

Основные технические характеристики

Номер	Характеристики	Рекомендации
1	ОС для Smart TV	На российском рынке представлены модели с такими операционными системами: Android, Android TV, AQUOS NET+, Firefox OS, Linux, Opera TV, Orsay, SAPHI, Tizen, VIDAA, webOS.
2	Категории программ	Существует три категории. Рекомендуемые, которые выгодны фирме-производителю и устанавливаются по умолчанию. Социальные, которые наиболее популярны и востребованы в конкретный временной период. Они, в том числе, имеются в наличии при покупке устройства. И пользовательские – программы для индивидуальных нужд, которые устанавливаются самостоятельно.
3	Предназначения приложений
4	Сколько стоит	Приложение может находиться в открытом доступе, то есть скачиваться бесплатно. Или же предоставлять возможность скачивания только после оплаты. Средняя цена на платное предложение зависит от набора функций и варьируется от 99 до 600 руб./мес. Многие платные программы имеют пробный ознакомительный период, в течение которого сервисом можно пользоваться бесплатно, однако возможности такого софта сильно урезаны, а полный функционал будет доступен только после оформления платной подписки.
5	Особенности скачивания	Большинство представленных в официальных магазинах программ оснащены маркером географической принадлежности, которые определяет ареал распространения. Таким образом, в России доступны для скачивания одни программы, в США – другие.

Рейтинг ТОП-10 качественных приложений на 2021 год

Megogo

Сервис Megogo – крупнейший в Восточной Европе. Предназначен для просмотра фильмов, сериалов, мультиков, шоу и музыкальных видео со всего мира. Он отлично подходит как для развлечения, так и для самообразования. Пользователю доступен обширный каталог, где собраны как мировые новинки, так и продукция, выпущенная десятками лет назад. При желании по единой подписке можно просматривать и популярные ТВ-каналы – локальные и международные. Также в рамках софта функционирует «Megogo Live», которое обеспечивает доступ к крупнейшим музыкальным и культурным событиям, конференциям и фестивалям.

Подключить сервис можно оформив подписку, которая существует в трех вариантах. «Легкая» — 197 руб./мес., «Максимальная» — 397 руб./мес., «Премиальная» — 597 руб./мес.

Достоинства:

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

Недостатки:

• ограничения по конкретным регионам.

Разговоры про Smart TV в последнее время участились, продаются умные телевизоры чаще, чем обычные, их аудитория постоянно растет, но вот магазины приложений пустуют. Почему так? Ведь, казалось бы, разработка под Smart TV не отличается от front-end’а: привычные JavaScript, HTML, CSS и браузер. Все дело в том, что кодинг под Smart TV имеет свои специфические особенности, о которых лучше знать еще при проектировании приложения.

Что такое Smart TV и зачем нужны приложения в телевизорах?

Представь, что ты заходишь на кухню. Холодильник сообщает, что можно приготовить из имеющихся продуктов, а затем перекидывает выбранный рецепт на мультиварку. Безумие? Таким же безумием казались приложения в телевизорах еще лет двадцать назад.

Что же такое Smart TV? Это интернет и интерактивные сервисы в телевизоре или телевизионном ресивере, или, вкратце, компьютер в форм-факторе «зомбоящика». Первую попытку реализовать подобие Smart TV предприняла компания Microsoft в далеком 1997 году, но идея провалилась из-за dial-up-соединения и CRT-телевизоров. Позднее возник другой способ сделать телевизор «умным»: в 2000 году стали появляться устройства Set Top Box (STB) различных производителей, расширяющие функционал стандартного (кабельного, спутникового) ТВ. STB — это обычная телевизионная приставка, принимающая сигнал цифрового телевидения, декодирующая и преобразующая его в аналоговый сигнал для вывода через разъемы RCA или SCART либо выводящая сигнал через разъем HDMI на телевизор. Но с ростом скорости соединения и новыми технологиями экранов стали появляться телевизоры со встроенным функционалом Smart TV, и с 2009 года началась сертификация таких устройств. В настоящий момент технология Smart TV внедряется в различные устройства: телевизоры, ресиверы цифрового телевидения, Blu-ray-проигрыватели, игровые консоли и аналогичные им девайсы.

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

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

• Если планируешь разработку для моделей 2011 года и старше, то не рассчитывай на помощь CSS3. Вспоминай, как делать спрайты, и приготовься к интересным особенностям CSS, которые не встречаются в браузерах на компьютере и редко поддаются логичному объяснению.
• Мощность вычислительного модуля телевизора в разы слабее компьютера, не удивляйся, что анимации в старых моделях будут отнюдь не плавными, а при измерении скорости исполнения кода окажется, что он в десятки и сотни раз медленнее, чем в браузере.
• Слабая документация у некоторых производителей, а иногда и полное ее отсутствие могут привести тебя в отчаяние и заставят проводить часы на форумах разработчиков.
• Для тестирования придется использовать реальные телевизоры. Эмуляторы не повторяют полного функционала устройств и часто содержат свои собственные, не возникающие на реальных устройствах баги.
• В телевизорах полностью отсутствуют средства отладки, придется использовать свои «велосипеды» при разработке.
• Непривычное взаимодействие пользователя с приложением. Учитывай, что, скорее всего, передвигаться по приложению тебе придется с помощью одного пальца руки, нажимая на кнопки пульта управления (правда, можно еще управлять голосом, жестами и гироскопическим пультом, как, например, у LG, но такое встречается далеко не во всех моделях и не у каждого производителя). На этапе проектирования приложения необходимо учитывать не только навигацию внутри приложения, но и ввод данных в инпуты.
• Необходимо прорабатывать ситуацию потери соединения. Небольшая подсказка: тестировщики Samsung в процессе премодерации для своего магазина любят при проигрывании видео отключить сетевой кабель из разъема и смотреть, как эта ситуация отрабатывается в приложении :).
• Разнообразие JavaScript API платформ усложнит кросс-платформенную разработку в разы, каждый производитель предоставляет свой API для взаимодействия с внутренним функционалом (проигрывание видео, отображение клавиатуры и прочее).

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

Samsung

Сайт для разработчиков

Samsung сейчас занимает наибольшую долю среди всех телевизоров с поддержкой технологии Smart TV. В моделях 2010 и 2011 года в качестве движка браузера используется MAPLE — сильно измененная версия Gecko, который был в Firefox 3.0. К счастью разработчиков, компания отказалась продолжать изобретать свой велосипед и с 2012 года в телевизорах Samsung Smart TV используется WebKit.

Помимо управления с пульта ДУ, в этой платформе можно использовать управление голосом и жестами (начиная с моделей 2012 года), а также подключать привычную мышь и клавиатуру.

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

Ключевые возможности API: управление звуком из приложения, получение данных сети и модели, широкие возможности управления плеером.

LG

Сайт для разработчиков

Отличительная черта этой платформы — возможность использовать Magic Remote, гироскопический анатомический пульт управления. Движение пульта в пространстве сопровождается движением курсора на экране, что очень сильно упрощает навигацию внутри приложений.

Из других способов управления — многокнопочный пульт и распознавание голоса. Во всех моделях LG Smart TV используется WebKit, что значительно сокращает количество «специфичных» багов.

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

Компания LG является учредителем Smart TV Alliance — это проект, созданный в 2012 году совместными усилиями с TP Vision (компанией, производящей телевизоры под брендом Philips) в целях создания унифицированной платформы приложений для умных телевизоров.

Philips

Сайт для разработчика

Достаточно своеобразная платформа. Вторая по объемам продаж в России, но, несмотря на это, разработка для Philips конкретно прокачивает навыки логического мышления, так как документация невероятно скудная :).

Вот что известно про эту платформу:

• До моделей 2012 года вместо HTML необходимо было использовать CE-HTML (специально разработанный стандарт для телевизоров и мобильных устройств на основе XHTML).
• Нет структурированной документации, зато есть примеры и немного статей, из которых можно крупицами собирать информацию.
• Очень плохой эмулятор и отсутствие возможности запустить приложение полноценно в телевизоре. Для тестирования приходится открывать приложение во встроенном в устройство браузере.

Разработка кросс-платформенного приложения при помощи Smartbox

Как ты понял, в разработке приложения для Smart TV очень много особенностей. Недолго думая, мы с командой решили создать библиотеку, основываясь на опыте кросс-платформенной разработки для умных телевизоров. Вот список того, чем наши наработки могут упростить тебе жизнь:

• возможность написать абстрактный код, основываясь на API библиотеки, а не каждого TV или приставки;
• добавление новой поддерживаемой платформы без изменения кода самого приложения;
• плагин навигации, позволяющий переключать фокус внутри приложения без лишних проблем;
• инпуты и виртуальная мультиязычная клавиатура;
• плагин для использования возможности управления голосом;
• плагин легенды (подсказки по клавишам внизу экрана);
• абстракция LocalStorage — хранение данных на конечных устройствах;
• абстракция над функциями плеера;
• удобная замена console.log в телевизоре.

На данный момент библиотека позволяет запускать приложение на трех мажорных платформах:

• Samsung;
• LG;
• Philips.

Кроме того, Smartbox без проблем запускается и на приставке STB Mag 200/250.

INFO

Добавить новую платформу в Smartbox не составит труда, в репозитории ты сможешь найти документацию, как это сделать. Код библиотеки мы выложили на GitHub.

LET’S GO!

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

Накидаем HTML для меню:

            Videos     Inputs     Navigation     

Самое важное, что стоит тут отметить, — атрибуты data-* и класс nav-item. Атрибут data-nav_type="vbox" служит для оптимизации навигации, при его использовании фокус начинает перемещаться от одного sibling-элемента к другому. Атрибут data-nav_loop="true"позволяет зацикливать навигацию в рамках своего элемента. Все видимые элементы с классом nav-item могут получить на себя фокус и позже инициировать события (focus, click, etc). Атрибут data-content будем использовать для отображения сцен приложения.

Добавим HTML для сцен.

   <!—- Список видео будем генерировать из внешнего файла -->        <!—- Сцена для демонстрации инпутов -->               Standart input       />                 Input value:                            Input with email keyboard         />                   Input with num keyboard and maximum 4 signs         />            <!—- Сцена для демонстрации навигации -->               1       //...       8                

Теперь HTML нашего приложения готов, приступим к написанию главного JS-файла приложения app.js. После инициализации самого Smartbox происходит старт приложения.

  //     SB() — главная функция Smartbox, вызывается после инициализации всех плагинов и запуска платформы   SB(function(){         App.initialize();     }); 

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

App.initialize = function () {   this.$wrap = $('.wrap');    // Показываем легенду   $$legend.show();    this.setEvents();    // Запускаем навигацию (в фокусе будет первый видимый элемент с классом nav-item)   $$nav.on(); };  App.setEvents = function () {   var self = this;    // Отображаем сцену при клике на элементе меню   $('.menu').on('click', '.menu-item', function ( e ) {      // Именно здесь и нужен атрибут data-content     var scene = e.currentTarget.getAttribute('data-content');     self.showContent(scene);   });    $(document.body).on({     // Скрываем/отображаем интерфейс при клике по синей кнопке пульта или клавише D на клавиатуре     'nav_key:blue': function() {       self.toggleView();         },     // remote events     'nav_key:stop': function () {       Player.stop();     },     'nav_key:pause': function () {       Player.togglePause();     },     'nav_key:exit': function(){       SB.exit();     }   }); }; 

Метод showContent будет скрывать текущую сцену и отображать новую. Каждая сцена будет иметь три метода — init для разовой инициализации и show/hide для управления отображением. Реализация методов отображения будет одинаковой во всех сценах:

show: function () {   if (!_inited) {     // Отложенная инициализация сцены     this.init();     _inited = true;   }   this.$el.show(); }, hide: function () {   this.$el.hide(); } 

Ну а теперь приступаем к реализации сцен, я буду приводить код без методов show/hide. Но для начала вынесем список видео в отдельный файл:

window.App.videos = [   {       title: 'Elephants Dream',       url: 'https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4',       type: 'vod'   },   {       title: 'Redbull',       url: 'http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8',       type: 'hls'   },   //... ]; 

Можно приступать к реализации сцены со списком видео.

Другие статьи в выпуске:

Хакер #184. Современный фронтенд

Технология Smart-TV, позволяющая расширить возможности девайса, является распространенной и поддерживается почти каждой моделью современных телевизоров. Но несмотря на популярность «умных телевизоров», их счастливые обладатели зачастую и не подозревают о большинстве полезных функций, довольствуясь лишь доступом к YouTube и подпиской на платные каналы. В результате огромный потенциал техники так и остается не полностью раскрытым.

Содержание показать Топ 10 10 место — X-plore File Manager 9 место — VLC Media Player 8 место — Tv Bro 7 место — TuneIn Radio 6 место — Smart YouTube TV 5 место — Torrent Stream Controller 4 место- Fry!TV 3 место — Kodi 2 место — HD VideoBox 1 место — ForkPlayer Видеообзор Выводы

Топ 10

Овладеть возможностями «умной» техники можно, используя специальные приложения. С их помощью обыкновенный домашний телевизор превращается в полновесный центр, заточенный под работу с медиаконтентом. Данная статья, освещая лучшие бесплатные программы для Smart-TV, позволит разобраться в колоссальном их разнообразии и выбрать подходящее владельцу.

ЧИТАЙТЕ ТАКЖЕ: Программа для видеонаблюдения для ПК.

10 место — X-plore File Manager

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

Одно из лидирующих мест среди представителей программных обеспечений такого рода занимает X-plore File Manager. Софт позволяет отобразить содержимое различных запоминающих устройств, подключенных к телевизору, и легко производить необходимые в конкретной ситуации операции, например удаление, перемещение или копирование с устройства хранения информации.

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

Скачать приложение С официального магазина Google Play

9 место — VLC Media Player

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

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

Видеоплеер необходим для работы с другими приложениями, например, онлайн-кинотеатрами. Приятным бонусом является отсутствие рекламы в приложении.

Скачать приложение С официального магазина Google Play

8 место — Tv Bro

Smart-TV предусматривает использование интернета, то есть, серфинг сайтов. Намного удобнее заниматься этим, используя соответствующее программное обеспечение. Tv Bro выступает одним из лучших браузеров, специализированных на телевизорах.

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

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

Скачать приложение С официального магазина Google Play

7 место — TuneIn Radio

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

Разработчики устраняют недостатки, к которым относится, например, старый интерфейс или отсутствие фонового проигрывания. Так или иначе, хороших альтернатив TuneIn Radio еще не имеется.

Загрузить софт можно как с плей маркет, так и с Samsung Apps Store. Бесплатный вариант не обошелся без рекламных вставок, но Pro-версия поддерживает затемненный интерфейс и включает возможность сохранять эфиры.

Скачать приложение С официального магазина Google Play

6 место — Smart YouTube TV

Бывает и так, что девайс, поддерживающий Smart-TV, не может справиться с банальной задачей — проигрыванием видео с YouTube. Эта неприятная проблема легко решилась с появлением данной программы, которая отличается расширенным набором функций, высокой скоростью и разнообразным разрешения видео. Софт поддерживает русский язык, управляется пультом и имеет располагающий к себе интерфейс.

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

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

Скачать приложение С официального магазина Google Play

5 место — Torrent Stream Controller

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

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

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

• история просмотров;
• возможность отмечать каналы как важные;
• поиск по названиям и прочие приятные бонусы.

Ссылка на скачивание в Play Market не найдена.

4 место- Fry!TV

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

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

На заметку! Программа устанавливается с помощью загрузки соответствующего APK-файла, а для работы понадобится плеер.

Ссылка на скачивание в Play Market не найдена.

3 место — Kodi

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

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

Скачать приложение С официального магазина Google Play

HD VideoBox является наилучшим кинотеатром на Android. Это одна из первых программ, позволяющих бесплатно просматривать разнообразный контент.

В функционал приложения входит все, что нужно настоящим ценителям:

1. Качество, постоянные обновления, комфортный интерфейс и поиск.
2. Онлайн-кинотеатр позволяет, в том числе, производить видео с торрентов.
3. Бесплатная версия приложения содержит рекламу, которая исчезает с покупкой Plus-версии, также предоставляющей доступ к плей-листам и поиску по особо популярным торрентам.
4. Для работы необходим сторонний плеер.

Программу можно найти в виде APK-файла.

Ссылка на скачивание в Play Market не найдена.

1 место — ForkPlayer

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

Ссылка на скачивание в Play Market не найдена.

Выводы

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

Статья поможет выбрать необходимое ему программное обеспечение и разобраться с волнующими его вопросами о Smart TV.