Как сделать так чтобы проигрыватель
Как сделать проигрыватель видео на HTML5 с нуля
Создание документа
Перед началом проекта нужно подготовить исходные материалы. Вам понадобятся:
Результат должен выглядеть примерно так:
Вставка видео на веб-страницу
Теперь в теге нужно указать, какие размеры должен иметь плеер ( рекомендуется установить размеры плеера, чтобы избежать мерцания ). Источник видео, которое вы хотите воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку « Play ».
Теперь рассмотрим доступные атрибуты и посмотрим, как они работают.
Атрибут poster — он нужен для создания изображения-презентации вашего видео. В нем необходимо указать папку с изображением ( в данном случае « Images » ) и название файла. Затем нужно выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.
Чтобы собрать плеер для сайта, важно вставить атрибут « controls ». Без него вы можете управлять своим видео только правой кнопкой мыши, а затем выбрать « Воспроизвести » или другие основные функции. Тег отображает основной массив элементов управления: кнопки « Воспроизвести », « Пауза », « Громкость » и кнопку полноэкранного режима для более удобного использования функций.
Теперь, если вы нажмете кнопку « Video Preview » ( Предварительный просмотр видео ), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.
Позиционирование видеоплеера с помощью CSS
Создаваемый плеер для сайта будет находиться в
У кнопки воспроизведения есть своя временная шкала, которую я вставил в
После всего этого ваш « Live Preview » ( Предварительный просмотр ) должен выглядеть так:
Стили видеоплеера
Для цветовой палитры видеоплеера я выбрал различные оттенки синего, чтобы различать его основные элементы.
Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды « display: inline-block » и центрируется атрибутом « vertical-align: middle ».
Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.
Создание функциональности с помощью JavaScript
На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его « video-player.js ». Сохраните файл в той папке, которую используете для этого проекта.
Как установить флеш-плеер в браузеры и проверить работу
Видео, музыка, игры и другой контент используют технологию флеша, и чтобы всё это работало нужен Flash Player. В этой статье я подробно расскажу как установить Adobe Flash Player на любом компьютере или ноутбуке под управлением системы Windows 7/8/10.
Честно говоря, технология дурацкая и многие уже ждут-не дождутся когда она умрёт и на замену придёт HTML5. Многие сайты и видеролики на Ютубе уже не требует установленного плеера, т.к. работают по технологии HTML5. Но, тем не менее, флеш живёт и здравствует, несмотря на нечеловеческое потребление ресурсов и глючность.
Когда нужно устанавливать Adobe Flash Player?
Я думаю, что если вы нашли эту статью, то уже в курсе зачем вам плеер 🙂 но всё же. Зачастую браузер или сайты сами сообщают о том, что для их правильной работы нужен Flash Player. Так, например, социальная сеть ВКонтакте прямо об этом заявляет: «Для того, чтобы воспользоваться аудиосервисом, Вам необходимо установить Flash-проигрыватель». Некоторые видеохостинги также рапортуют: «Для воспроизведения видео требуется проигрыватель Adobe Flash»
На других сайтах, там где подобных сообщений нет, просто что-то не будет работать и всё. Но как правило, в этом случае вверху отображается сообщение с предложением скачать или включить флеш плеер. При проблемах с уже установленным плеером, его сперва надо правильно удалить.
В последних версиях браузеров, кроме Mozilla Firefox, флеш-плеер всегда встроен и отдельная установка не требуется, но он может быть выключен.
Сначала обновим свой браузер
Сперва нужно будет обновить браузер до последней версии, чтобы в будущем не было конфликтов. Давайте я покажу как это сделать для самых популярных браузеров.
Opera
Google Chrome
Internet Explorer
Mozilla FireFox
Если что-то не получилось – не огорчайтесь, всё равно приступайте к установке плеера.
Устанавливаем Flash Player на свой компьютер
Современные браузеры, кроме Firefox, не требуют отдельной установки флеша-плеера, но если встроенный плеер не заработал, то заходим на официальный сайт Adobe Flash Player, скачиваем установщик и запускаем его, но есть нюансы.
Учтите, что есть два вида установки: для Internet Explorer и для всех остальных браузеров. Чтобы установилась правильная версия, нужно заходить на сайт с того браузера, для которого устанавливается флеш плеер. Если устанавливается версия НЕ для Internet Explorer, то плагин будет установлен во все ваши браузеры: Chrome, Opera, FireFox и другие. Соответственно, версия для IE устанавливается только в него.
В Google Chrome, Opera, Яндекс Браузер уже встроен Flash Player, но обновляется он не так часто как официальная версия плеера. Иногда он глючит и конфликтует с установленным вручную плагином.
Итак, чтобы установить Adobe Flash Player переходим на сайт и нажимаем «Установить сейчас».
Рекомендую поснимать галочки дополнительных предложений слева:
Сохраните установщик, откройте папку загрузок и найдите установочный файл Adobe Flash Player, например install_flashplayer[xxx].exe. В Mozilla Firefox папка загрузок находится в этом меню:
Запускаем установщик и следуем указаниям мастера. Когда спросят о методе обновления флеш плеера, рекомендую оставить первый вариант «Разрешить Adobe устанавливать обновления» и нажать «Далее».
В конце жмём «Завершить» и на этом установка закончена. Перезагружаем браузер и проверяем, что всё работает хорошо.
В случае проблем с установкой, также проверьте не осталось ли запущенных процессов от браузеров или просто перезагрузите компьютер и заново запустите установщик.
Как проверить правильно ли установлен Flash Player
Если есть сомнения по поводу нормальной работы плеера, то это легко проверить. Заходим по адресу https://helpx.adobe.com/flash-player.html, нажимаем кнопку «Check Now» и смотрим что пишет:
Как включить встроенный в браузер Flash Player
Установка отдельного плагина обычно не требуется, но нужно проверить, включён ли встроенный флеш в браузере. Сделать это очень легко.
Google Chrome
Mozilla FireFox
Opera
Internet Explorer
Подводим итоги и смотрим видео
В простейшем случае установка сводится к следующим действиям: автоматический переход на сайт Adobe, скачивание и запуск установщика.
Смотрим видео по правильной установке флеш плеера:
Комментарии ( 35 )
Добрый день.
Сталкивался пару раз с проблемами флеш плеера, но все удалось решить своими силами…
хорошая статья со всеми ньюнсами которые могут возникнуть при переустановке флеша!
Огромное спасибо за подробную инструкцию! Все удалилось и установилось на «раз-два». Работает!:)
Алексей, здравствуйте. У меня последняя версия плагина и Mozilla FireFox, но почему то у меня он постоянно падает.. мне приходится по 10-15 раз на день выходить с браузера, по другому не получается заставить его работать…. уже сил на него нет!… а в другом браузере я не могу работать. В чем может быть причина и как ее исправить.
попробуйте его переустановить и посмотрите в строну браузера Maxthon
Здравствуйте, Алексей! Столкнулась с ужасной проблемой — при открытии любой страницы, сайта, почты перенаправляет на страницу от mvd.ru «Ваш компьютер заблокирован», чистила, сканировала, удаляла, ничего не помогало, но сейчас вроде убрался. Но надолго ли? Прочитала Ваши статьи, но еще не воспользовалась советом. Хотела Вас спросить об Flash Plaere — я обнаружила в «Программы и компоненты», что у меня установлено 1.Adobe AIR, 2.Adobe Flash Player 15 Activex, 3.Adobe Flash Player Plugin и 4.Adobe Reader 9.5.5 — Russian. и все они установлены в сентябре этого года, одна в августе, хотя я не устанавливала. Может это автоматическое обновление? Подскажите, пожалуйста, какие из них мне не нужны. Я еще не совсем хорошо разбираюсь в программах.
Наталья, все эти программы не помешают и скорей всего были встроены в вашу сборку виндовс. Надолго ли ушла ваша проблема я не могу знать, но скажу точно что нужно установить нормальный антивирус, например NOD32, но даже после зачистки нужно сбросить все параметры браузера по умолчанию.
Алексей, спасибо за ответ. Через сутки этот гадкий вирус появился опять, пришлось переустановить ОС. Блог Ваш мне очень понравился, буду пользоваться Вашими советами, столько полезного!
Конечно Наталья, буду рад видеть вас на блоге!
Анна, мой блог про Windows, т.ч. как в Ubuntu не подскажу
Во-первых спасибо за ваш сайт,всё очень понятно.Проблема-все ролики проигрываются,кроме в Одноклассниках.Удалила предыдущий адоде через Ревоанинсталлер.Загрузила новый флеш плауер через ваш сайт как вы советовали,но проблема с Одноклассниками осталась..
попробуйте другой браузер
Спасибо. Оказывается, всё так просто.
Спасибо Вам! Даже блондинке все понятно ))
Замечательная статья, как раз то, что я хотела найти в инете, чтобы установить флэш плеер уж наверняка правильно. А тут рассказали даже, как правильно его удалить, если что, и «хвосты» почистить:) Для специалистов, может быть, это все и просто, но для таких как я, которые устанавливают программы в большинстве своем на уровне интуиции, информация очень полезная. Например, я не знала таких нюансов, что плеер надо устанавливать на последнюю версию браузера, чтоб не глючило, и что есть фл.плееры отдельно для ИЕ и отдельно для всех остальных. В общем, спасибо за статью:)
А теперь, если можно, два вопроса.
Первое. Я, как Вы и советовали, оставила флажок на «Разрешить Adobe устанавливать обновления». И что теперь, когда плеер обновится, я как-то узнаю об этом? Должно появиться какое-нибудь сообщение или все произойдет совсем незаметно?
И второе. Я конечно сняла галочку с предложения установить Хром (McAffee Security Scan Plus скачивать мне не предлагали, хоть я и внимательно все просмотрела). А если все будет обновляться автоматически, мне под шумок не поставят какую-нибудь программу-приложение, которая мне совершенно не нужна? 🙂
под шумок ничего лишнего вам не поставят. А на счёт обновлений, они либо будут проходить незаметно для вас, либо будет выдаваться запрос на скачивание и установку, при обнаружении новой версии. Зависит от настроек, в общем не парьтесь.
у меня в последние несколько дней перестали грузиться видео на ютубе,в вк и твиче всё норм,может ли быть всему виной устаревший флешплеер? подскажите,очень нужно!
да, скорей всего так и есть
Устанавливаю флеш плеер по правилам, (opera), в конце установки открывается интернет эксплорер и благодарят за использования флеш плеера. А в опере не могу смотреть видеоролики
несколько раз переустановил флеш плеер. все равно видео не грузится, появляется просьба установить флеш плеер.(в конце установки открывается интернет эксплорер и благодарят за установку плеера, а мне в оперу установить надо, что делать, помогите)
К сожалению не помогло. Я скачиваю плейер, запускаю его и ничего не происходит. Просто висит установщик плейера, причем без всяких кнопок, просто голое диалоговое окно установщика. Никогда такого еще не было.
а что если пишет software exception (0xc000001d)?
и ни в какую не устанавливает ни плеер, ни хром?
я выяснил, что проц не поддерживает SSE2
Комп Атлон 1600, Win XP
Можно ли решить эту проблему?
Попробуй поставь ранние версии флеш плеера, не требующих sse2, если они есть. Но что это даст, если сайт будет требовать новых версий…только железо менять, всё равно помимо флеш-плеера, с таким железом постоянно будут проблемы с различными программами, и с каждым днём таких проблем будет всё больше. Железо, более-менее всё поддерживающее, копейки стоит, на авито.
К слову, часть видероликов на Ютубе уже не требует установленного плеера
Видеохостинг YouTube также рапортует: «Для воспроизведения видео требуется проигрыватель Adobe Flash»
сдром читает не все диски.посоветуйте что делать?спасибо))
Не устанавливается на Windows XP
Что делать? Помогите.
искать старые версии плеера, а лучше переходить на десятку
Adobe Acrobat PDF тоже ваш продукт. Ко мне приходит на почту детализация звонков Мегафон. Нажимаю на Посмотреть, но документ одновременно с просмотром загружается в загрузки. На Скачать я не нажимала. Можно ли сделать так, чтобы он без моего ведома не загружался?
Компания Adobe вообще не имеет ко мне никакого отношения. А у вас всё правильно. Без загрузки просмотреть документ нельзя. Потом можете удалить.
зачем надо было удалять старую программу?могу загрузить Adobe Flash Player если только удалю хром!проблемы и заморочки!не могу загрузить!
здраствуйте незнаю к кому обратится вот на днях у меня возникла такая проблема с этим «Абоде Флеш Плауером»я сним никогда не сталкивался и типерь незнаю что мне делать вот здесь у вас на странице справа есть такой раздел что скачивать можно его бесплатно но я нимного побаиваюсь незнаю можно ли его нажымать или нет. дайте мне ответ очень прошу зарание благодарен
Алексей, здравствуйте. В Интернет эсплорере встроен Adobe Flash Player. Я сняла галочку на «Фильтрация ActiveX» — все заработало. И теперь все время у меня должен быть отключен «Фильтрация ActiveX»? Это как скажется на работе компьютера с разными сайтами?
Всё делаю при установке этого Флеша как у вас в инструкции, но в конце запрет и всё…
Как сделать собственный видео-плеер на HTML5 Video
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.
Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.
Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
API для управления воспроизведением
Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.
Интерфейс HTMLMediaElement
Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:
Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео
Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука [0, 1]
play() — начать проигрывание
pause() — поставить на паузу
События
oncanplay — можно начать проигрывание
ontimeupdate — изменена позиция проигрывания
onplay — запущено проигрыв
onpause — нажата пауза
onended — воспроизведение закончилось
Важно: это далеко не все методы и свойства, выставляемые через интерфейс HTMLMediaElement.
Интерфейс HTMLVideoElement
Видео отличается от аудио несколькими дополнительными свойствами:
width и height — ширина и высота контейнера для проигрывания видео;
videoWidth и videoHeight — внутреннее значение ширины и высоты видео, если размеры не известны, равны 0;
poster — ссылка на картинку, которую можно показывать, пока видео недоступно (обычно это один
из первых непустых кадров).
Разница между width/height и videoWidth/videoHeight в том, что последние — это собственные характеристики видео, в частности, с учетом соотношения сторон и других характеристик, в то время как контейнер для видео может быть любых размеров (больше, меньше, с другой пропорцией).
Play & Pause
Создание нашего собственного видео-плеера мы начнем с простой задачи: научимся запускать видео на проигрывание и останавливать воспроизведение. Для этого нам понадобятся методы play() и pause() и несколько свойств, описывающих текущее состояние видео-потока (мы также будем использовать библиотеку jQuery, не забудьте ее подключить).
Первым делом нам необходим video-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:
Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).
Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:
При желании можно сразу добавить несколько css-стилей для кнопок управления и их различных состояний и.
… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.
Проигрывание сначала
Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:
Контекстное меню
Во-вторых, браузеры обычно добавляют возможность управлять воспроизведением через контекстное меню. Это означает, что пользователь, вообще говоря, может что-то изменить в обход наших элементов управления. Этот момент нужно также отловить и внести необходимые изменения во внешний вид контролов. Для этого достаточно подписаться на события onplay и onpause.
Так как у нас становится многовато мест, где меняется внешний вид, самое время попутно произвести небольшой рефакторинг, убрав из изначального переключения режимов теперь уже дублирующую смену внешнего состояния:
Кликабельное видео
Наконец, наверняка, нам захочется, чтобы проигрывание и пауза переключались по нажатию на само видео, поэтому нужно добавить еще несколько строчек:
Текущий результат: 
Прогресс
Теперь давайте перейдем к отображению прогресса проигрывания. Для начала необходимо добавить несколько элементов, которые будут использоваться для отображения текущего состояния и управления текущей позицией:
И соответствующие стили:
И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:
Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration. Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay:
В данном случае, мы попутно определяем, нужно ли отображать количество часов в видео-плеере (кстати, вообще говоря, спецификация предполагает, что длительность ролика может изменяться — в этот момент срабатывает событие ondurationchange, и к тому же быть бесконечной — например, при стриминге радио).
Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:
Для отображения процесса проигрывания нам понадобится событие ontimeupdate, срабатывающее при изменении текущего момента:
Свойство currentTime выдает в секундах текущее время. Его же можно использовать, чтобы изменить время проигрывания:
Также будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:
Важный нюанс относительно свойства buffered, который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.
Промежуточный результат: 
Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):
С соответствующими стилями для включенного и выключенного состояний:
Для переключения состояния динамика нам понадобится свойство mute:
(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume, принимающее значения в диапазоне [0, 1].
Финальный результат: 
Что еще.
Либо нужно делать соответствующие проверки или отлавливать возможные исключения. Исключения вообще надо отлавливать, например, событие onerror, возникающее при ошибке загрузки видео-потока 🙂
Из дополнительных опций, которые могут вам понадобиться: изменение скорости проигрывания. Для этого есть свойство playbackRate и соответствующее событие onratechange.