YouTubePlayer v1.0 — просмотр youtube-видео фрагментами и циклически с целью обучения (JavaScript, HTML)

     Cтатья была написана специально для habr.com.

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

     Решение не 100% реализованное, но и в таком виде может кого-то натолкнет на желание реализовать это в расширении или подскажет мне где-то ресурс, который смог бы реализовать требуемую задачу… или кто создал бы профессиональный сайт с подобным функционалом.

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

     Итак, проблема:

Видео на youtube бывает полезно для обучения, но требуется просмотр определенных фрагментов помногу раз.

     Уже готовые найденные решения:

1. Скачать видео и вырезать требуемое или требуемые части и разместить у себя.
(долго, проблемы с правами на это, но кому надо, то есть даже сайт www.clipconverter.cc/2 который поможет скачать фрагмент видео)

2. Разместить ссылку на просмотр 1 фрагмента видео на подобных ресурсах как:

— www.infinitelooper.com/?v=fsD1zoI7NYo#/308;319
— youxube.com
— looptube.io
— youtubeloop.net

возможно и другие, но не найдено удобное и главное, чтобы много разных фрагментов (не всегда ссылка удобна́, бывает куча рекламы на таких сайтах и блокировщики рекламы не всегда помогают)

3. Использование расширений
(расширение должны быть у пользователя, в мобильных браузерах тоже с этим будет проблема)

— Looper for YouTube расширение для гуглхром (удобно зациклить фрагмент, пример: https://www.youtube.com/watch?v=qmk_kc71Fd4&start=01:39&end=03:21&loop=2)

— Video Speed Controller расширение для гуглхром
(можно задать горячие клавиша на скорость, можно выставить временную точку начало фрагмента и перейти назад когда надо)

— Magic Actions for YouTube расширение для гуглхром
(более 1 000 000 пользователей уже говорит, о интересности расширения, а фрагменты можно выделять кликая то левой, то правой кнопкой… но вот сохранение этих фрагментов где-то в запросе не обнаружил)

     Основное, что требовалось по минимуму:

— перемотка на 1 секунду назад, чтобы просто прослушать только что сказанное слово;
— возможность изменить скорость видео быстро (замедлить для иностранных языков, убыстрить для новостей);
— хорошо бы пометить какое-то время и потом быстро перейти на него.

Основное можно найти в расширении Video Speed Controller, ютюб же горячими клавишами хоть и позволяет скорость менять (хелп по горячим клавишам тут был на хабре, но есть в официальный), но на 1 секунду проблематично вернуться назад.

     Требовалось для удобства и автоматизации:

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

     Недостатки реализации: (ссылка на сайт — не гарантирую бесперебойную работу и вечное расположение этого кода)

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

     Достоинства реализации:

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

     Простой пример использования:

Требуется выучить фрагмент стихотворения «Не ветер бушует над бором». Пример чтения есть в ютюбе, но там слишком длинно и по середине есть лишнее музыкальное проигрывание.
Создаем 2 фрагмента, ставим проигрывание 1 раз и получаем такую ссылку, которая задает уже готовые фрагменты. Для начала циклического воспроизведения достаточно только нажать на кнопку «Повтор А-В».

     Рекомендации для оптимального заучивания:

— заучивать частями, для стихотворения один столбик можно записать как 1 фрагмент и запустить как вечный цикл (0 — раз)… и да, не забываем об отдыхе каждые 10 минут;
— для иностранных языков желательно не более предложения под 1 фрагмент и возможно понизить скорость до 0.85 (идеально для довольно чистого и незаметного замедления);
— длинные видео разбивать на части по 5-7 минут не более и делаем перерывы после каждого такого блока на те же 5 минут (отвлечься от получения какой-либо информации вообще);
— вы должны уже заученное успеть внутренне проговорить (вспомнить) раньше проигрывания на видео, а если вы думаете, что фоном оно само запомнится, то это бывает совсем не так;
— не учить постоянно и долго одно и тоже, делайте большие перерывы в час и более;
— если болит голова от повторов, то просто выключайте это и идите спать!


     Только на моем сайте вы можете скачать локальную версию программы:
     Скачать архив «YouTubePlayer_1_0.rar»    Альтернативная ссылка для скачивания с яндекс-диска