Как правильно задать css для тега "video" (video.buffered)?

24.07.2017, 19:33. Показов 1146. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Здравствуйте! Пишу видео-плеер. Плеер почти готов, но не хватает одной детали. Не могу понять как правильно стилизовать буферизованные куски, как отлавливать TimeRanges и стилизовать их. Долго мучаюсь, много где пишут что надо как-то через "video.seekable.start(0)" и/или "video.seekable.end(0)" или "video.buffered.end(0)" но, к моему сожалению, не могу понять как оно работает. "video.seekable.start(0)"- выдает 0 сек., а "video.seekable.end(0)"- общую длину ролика в секундах, откуда брать буферизованные отрезки и стилизовать их? Надеюсь понятно все сформулировал. Буду признателен любой помощи, в идеале, конечно, хотелось бы пример видеть, через примеры лучше понимаю. Пожалуйста помогите. Ну или на крайний случай пошлите что ль... на ресурс какой??

Добавлено через 15 часов 18 минут
Как активно здесь помогли решить проблему чайнику. Просто исчерпывающие советы получаю от вас (форумчан). Спасибо всем за просмотры данного поста, и за то что НИКТО не нажал кнопку "ответить". Проблему помогли решить на другом форуме:

JavaScript
1
2
3
4
5
6
7
video.addEventListener('progress', function() {
    var bufferedEnd = video.buffered.end(video.buffered.length - 1);
    var duration =  video.duration;
    if (duration > 0) {
        document.getElementById('buffered_track').style.width = ((bufferedEnd / duration)*100) + "%";
    }
});

Programming

Эксперт

39485 / 9562 / 3019

Регистрация: 12.04.2006

Сообщений: 41,671

Блог

24.07.2017, 19:33

Ответы с готовыми решениями:

Стилизация кнопки тега video для воспроизведения
можно ли сделать в html5 в тэгах video, такую кнопочку как в youtube посередине видео, для воспроизведения и паузы?

Как заменить ссылку на poster у тега video через JS?
Специалисты! Нужна ваша помощь, помогите пожалуйста. Нужно заменить ссылку у атрибута poster тега video с классом .my-guest. Причем...

Как удалить атрибут poster у тега video?
Здравствуйт товарищи! Помогите пожалста.. Есть некий код, что то типа того. Причем этот код сам отрисовывается другим скриптом и...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

inter-admin

Эксперт

29715 / 6470 / 2152

Регистрация: 06.03.2009

Сообщений: 28,500

Блог

24.07.2017, 19:33

Помогаю со студенческими работами здесь

Автоплей видео из тега Video при прокрутке
Здравствуйте. Пытался гуглить но ничего дельного не нашел. Есть такой код <section class="features"> <h2...

Как указать poster для тега video через css?
Всем привет! Подскажите пожалуйсто, можно ли указать poster для тега video через css? либо как то скрыть его или убрать?

Как указать ширину для poster у тега video?
Всем привет! Подскажите как указать ширину для poster у тега video? у меня вместо постера svg анимация и что то ее широко растягивает....

Как задать область проигрывания для Video Player?
Как задать область проигрывания для Video Player (т.е. нужные размеры "рамочки", в которых и будет проигрываться видео - не более и не...

HTML <video> </video>, как проигрывать видео с компьютера?
У меня такая проблема: Делал html страницу, поставил тег <video> как надо, но браузер не показывает mp4 файл. <html> ...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

Наверх