Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
arcmag
261 / 257 / 180
Регистрация: 27.06.2014
Сообщений: 668
1

Видео/Аудио (можно ли получить кадр определенной минуты видео и статус загрузки?)

19.03.2015, 20:51. Просмотров 1086. Ответов 3
Метки нет (Все метки)

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

Вопрос 1: в любом нормальном видео плеер имеет помимо индикатора прогресса проигрывания файла еще и индикатор загрузки файла (то есть полоска с информацией где видно какая часть файла уже загрузилась а какая нет).
С индикатором прогресса все понятно currentTime - текущее время проигрывания файла duration общая длинна тут все просто вычислить а вот как быть с ходом загрузки?

То есть у меня имеются такая разметка для этого дела
HTML5
1
2
3
4
<div class="wrapperProgress"> <!--блок обертка-->
     <div class="wrapperLoading"></div> <!--блок загрузки файла (не реализовано)-->
     <div class="wrapperPosition"></div> <!--блок прогресса-->
</div>
и тут блок прогресса .wrapperLoading должен менять свою ширину по мере загрузки файла.

Вопрос 2: на не безызвестном ютубе при просмотре видео можно навести курсор мыши на полосу прогресса и тут же в маленьком окошечке можно увидеть кадр видео соответствующий тому отрезку времени видео на котором мы остановились, можно ли как то подобное реализовать средствами JS ? Если да то покажите пожалуйста пример
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.03.2015, 20:51
Ответы с готовыми решениями:

Помогите со скриптом аудио(видео)плеера
Думается, их много может быть. Меня интересуют простенькие, компактные плееры...

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

Как поставить на паузу видео при воспроизведении второго видео
Как поставить на паузу видео при воспроизведении второго видео: &lt;video...

Как загрузить видео на ютуб с другого сайта? (Загрузить видео в конкретный плейлист)
Как загрузить, с другого сайта, видео на ютуб в конкретный плейлист? А то...

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

3
Опан
Юзер с абсолютным слухом
578 / 389 / 158
Регистрация: 17.12.2010
Сообщений: 1,164
20.03.2015, 01:23 2
Лучший ответ Сообщение было отмечено arcmag как решение

Решение

1) За вывод количества буферизованных (загруженных) секунд медиафайла отвечает свойство audio/video.buffered.end(0). Теперь остаётся рассчитать, чтобы регулярно поддерживалось соотношение ширины дива wrapperLoading к ширине дива wrapperProgress таким, как выше приведенного свойства audio/video.buffered.end(0) к audio/video.duration.

Добавлено через 1 час 6 минут
Код к первому вопросу на примере с аудио: допустим ширина блока обёртки = 300px. Присваиваем блоку загрузки файла id, на пример loadprogress:
Javascript
1
2
3
setInterval(function{
    loadprogress.style.width=Math.floor(audio.buffered.end(0)/audio.duration*300)+"px";
},100);
1
arcmag
261 / 257 / 180
Регистрация: 27.06.2014
Сообщений: 668
20.03.2015, 13:23  [ТС] 3
Хмм спасибо, вроде бы работает..
Сделал вот так вот...
Javascript
1
2
3
4
5
6
    this.fLoading = function(e){ /*test test test*/
        var oneRateAllTime = this.video.duration/100;
        var oneRateWidth = this.Progress.offsetWidth/100;
        var buff = this.video.buffered.end(0);
        this.Loading.style.width = ((buff/oneRateAllTime)*oneRateWidth).toFixed(4)+"px";
    }
а по второму вопросу не подскажите ?
0
Опан
Юзер с абсолютным слухом
578 / 389 / 158
Регистрация: 17.12.2010
Сообщений: 1,164
20.03.2015, 15:34 4
Пака нет, дело в том, что на youtube это делается на флеше, а средствами JS представьте - при наведении курсора должен возвращаться статический кадр - значит в формате jpeg или gif, т. е., должен быть механизм, который на лету будет конвертировать один кадр видео в какой-то из этих форматов. Потом нужно будет это изображение показать в отдельном <img> В общем, я пока не представляю.
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.03.2015, 15:34

Как получить кадр в виде QImage или QPixmap для видео и кусок оцифровки для аудио?
Qt5.2. Использую модуль QMultimedia. Как получить кадр в виде QImage или...

RTMP получить кадр видео
Здравствуйте. Хочу сделать следующее: на сервере лежит видео, которое доступно...

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


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru