Реализуйте пример кода для пользовательского игрока HTML5 от нуля

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

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

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

 <Видео Controls = Controls Autoplay = Autoplay> <source src = movie.ogg type = video/ogg/> </video>

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

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

 Myvid = document.getelementbyid (видео1); .duration // Возврат общей длины видео // моделирования видео Myvid.volume // Том // После получения видео он определяется, когда оно переключается от загрузки на воспроизведение myvid.readstate // 0 = haf_nothing -no О звуке/готово ли видео // 1 = HASE_METADATA -ABOUT AUDIO/VIDEY AT METADATA // 2 = HASE_CURRENT_DATA -дата о текущем месте воспроизведения доступны, но нет достаточно данных, чтобы воспроизвести следующий кадр/Millisecond // 3 = HASE_FUTURE_DATA -Текущее и, по крайней мере, доступны следующие кадры данных // 4 = HASE_ENOUGH_DATA -EVALABLE Данные достаточно, чтобы начать воспроизведение

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

 // Пример кода ядра var dragdis = 0VAR Proceswidth = XXX // Общая длина перетаскивания («тело»). рендеринг в том же месте videoSource.pause ()}). (слева <0) {Left = 0} Dragtarget.css ({left: left}) dragprocess.css ({width: left}).). Процесс -Whidth * Продолжительность // Рассчитайте правильную позицию воспроизведения видео после перетаскивания

Управление объемом в основном такое же, как и вышеуказанное поведение.

 Функция ifState () {var vator = videoSource.readyState if (state === 4) {// 状态为 4 即可播放 videoOplayer ()} else {$ ('. Play-sym-wrapper'). remove () $ ('Body'). FSTATE, 10)}} SETTIMEOUT (IFSTATE, 10)

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

Выше всего содержимое этой статьи.