Как написать свой плеер на c

Создать аудио плеер

Вопросы:
1. (Пауза) Я не понимаю как сделать счётчик нажатия, чтобы пауза стартовала и останавливала аудио. А также я не понимаю, как сделать, чтобы аудио стартовало с той же точки, а не заново.
2. (Плейлист) Как вызвать окно для выбора папки с которой загружать файлы из папки?
3. (Назад, вперёд) Исходя из 2-ого как сделать, чтобы музыку из папки можно было проигрывать по очереди?
4. (Релоуд) Как повторить проигрывание аудиофайла после его окончания?

Если хотите, можете сделать код посвоему главное, чтобы были действия с аудио.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Аудио плеер
Хочу взять в качестве курсовой, да и сам давно хотел попробовать что-то такое. Сложно ли на С++.

Как создать аудио плеер?
Давненько уже мучаюсь, хочу создать аудио плеер с поддержкой плагинов от winamp(in_mp3.

Можно ли создать на PHP аудио-плеер?
Изучаю PHP чуть больше года, для отработки теоретических знаний создал сайт, посвященный этому.

Как создать аудио-видео плеер с плейлистом
нужно написать аудио видео плеер с плейлистом !! отдельно видео и отдельно аудио есть ! как.

Как сделать собственный видео-плеер на 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-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:

 
  
 
Play 

#controls span < display:inline-block; >#playpause

Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).

Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:

$(document).ready(function()< var controls = < video: $("#myvideo"), playpause: $("#playpause") >; var video = controls.video[0]; controls.playpause.click(function() < if (video.paused) < video.play(); $(this).text("Pause"); >else < video.pause(); $(this).text("Play"); >$(this).toggleClass("paused"); >); >); 

При желании можно сразу добавить несколько css-стилей для кнопок управления и их различных состояний и.

… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.

Проигрывание сначала

Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:

video.addEventListener("ended", function() < video.pause(); controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); >);

Контекстное меню

Во-вторых, браузеры обычно добавляют возможность управлять воспроизведением через контекстное меню. Это означает, что пользователь, вообще говоря, может что-то изменить в обход наших элементов управления. Этот момент нужно также отловить и внести необходимые изменения во внешний вид контролов. Для этого достаточно подписаться на события onplay и onpause.

video.addEventListener("play", function() < controls.playpause.text("Pause"); controls.playpause.toggleClass("paused"); >); video.addEventListener("pause", function() < controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); >);

Так как у нас становится многовато мест, где меняется внешний вид, самое время попутно произвести небольшой рефакторинг, убрав из изначального переключения режимов теперь уже дублирующую смену внешнего состояния:

var controls = < . togglePlayback: function() < (video.paused) ? video.play() : video.pause(); >. >; controls.playpause.click(function()< controls.togglePlayback(); >);

Кликабельное видео

Наконец, наверняка, нам захочется, чтобы проигрывание и пауза переключались по нажатию на само видео, поэтому нужно добавить еще несколько строчек:

controls.video.click(function() < controls.togglePlayback(); >);

Текущий результат:

Прогресс

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

  ​   00:00 / 00:00 

И соответствующие стили:

#progress < width:290px; >#total < width:100%; background:#999; >#buffered < background:#ccc; >#current < background:#eee; line-height:0; height:10px; >#time

И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:

var controls = < . total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, . >;

Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration. Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay:

video.addEventListener("canplay", function() < controls.hasHours = (video.duration / 3600) >= 1.0; controls.duration.text(formatTime(video.duration, controls.hasHours)); controls.currentTime.text(formatTime(0),controls.hasHours); >, false);

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

Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:

function formatTime(time, hours) < if (hours) < var h = Math.floor(time / 3600); time = time - h * 3600; var m = Math.floor(time / 60); var s = Math.floor(time % 60); return h.lead0(2) + ":" + m.lead0(2) + ":" + s.lead0(2); >else < var m = Math.floor(time / 60); var s = Math.floor(time % 60); return m.lead0(2) + ":" + s.lead0(2); >> Number.prototype.lead0 = function(n) < var nz = "" + this; while (nz.length < n) < nz = "0" + nz; >return nz; >;

Для отображения процесса проигрывания нам понадобится событие ontimeupdate, срабатывающее при изменении текущего момента:

video.addEventListener("timeupdate", function() < controls.currentTime.text(formatTime(video.currentTime, controls.hasHours)); var progress = Math.floor(video.currentTime) / Math.floor(video.duration); controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + "px"; >, false);

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

controls.total.click(function(e) < var x = (e.pageX - this.offsetLeft)/$(this).width(); video.currentTime = x * video.duration; >);

Также будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:

video.addEventListener("progress", function() < var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration); controls.buffered[0].style.width = Math.floor(buffered * controls.total.width()) + "px"; >, false);

Важный нюанс относительно свойства buffered, который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.

Промежуточный результат:

Звук

Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):

С соответствующими стилями для включенного и выключенного состояний:

#dynamic < fill:#333; padding:0 5px; >#dynamic.off

Для переключения состояния динамика нам понадобится свойство mute:

controls.dynamic.click(function() < var classes = this.getAttribute("class"); if (new RegExp('\\boff\\b').test(classes)) < classes = classes.replace(" off", ""); >else < classes = classes + " off"; >this.setAttribute("class", classes); video.muted = !video.muted; >);

(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume, принимающее значения в диапазоне [0, 1].

Финальный результат:

Что еще.

• проверка поддержки браузером HMTL5 Video,
• программное определение и переключение поддерживаемых кодеков,
• поддержка субтитров, в том числе для обеспечния accessibility.

video.addEventListener("canplay", function() < . >, false);

Либо нужно делать соответствующие проверки или отлавливать возможные исключения. Исключения вообще надо отлавливать, например, событие onerror, возникающее при ошибке загрузки видео-потока 🙂

Из дополнительных опций, которые могут вам понадобиться: изменение скорости проигрывания. Для этого есть свойство playbackRate и соответствующее событие onratechange.

Готовые плееры

• VideoJS
• MediaElementJS
• Kaltura
• JW Player
• LeanBack Player
• Табличка со сравнениями плееров

Как создать плеер для сайта на HTML5 и JavaScript

Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Уже прошли те времена, когда для воспроизведения аудио или видео на сайте нужно было подключать сторонний плеер на Flash — в Adobe решили больше не поддерживать эту технологию, а значит, мы можем вздохнуть с облегчением, потому что HTML5 позволяет создавать плееры с помощью тегов и .

Как использовать audio и video в HTML5

Чтобы создать плеер, достаточно такого кода для аудио:

Нас пока не интересует красивое оформление, но в этом варианте есть всё необходимое:

• кнопка старта и паузы;
• текущее время (в том числе и на прогресс-баре);
• общая длительность;
• кнопка отключения звука;
• шкала громкости;
• выбор скорости;
• кнопка скачивания.

Теперь нужно написать функции, которые будут отдавать команды плееру. Начнем с получения объектов, запуска и паузы:

Заключение

Встроенный плеер на HTML5 — это лучшее решение, которое доступно современному веб-разработчику. Больше не нужно мучиться с Flash и другими подключаемыми плеерами, потому что есть более удобный вариант, который еще и хорошо оптимизирован и не требует скачивания сторонних приложений.

Читайте также:

• JavaScript: главный инструмент frontend-разработчиков
• Может ли компания претендовать на весь написанный разработчиком код
• Учимся верстать: что такое CSS

Как создать видеоплеер на c#? [дубликат]

Хочу создать видеоплеер на c#,но везде видел только варианты с WMP или VLC,но это не то. Мне нужен свой плеер с тайм лайном,паузой,перемоткой и.т.д. Кто подскажет способ?

Отслеживать
задан 12 фев 2019 в 21:45
21 3 3 бронзовых знака

Нашёл через Google статью: professorweb.ru/my/WPF/UI_WPF/level26/26_2.php Ключевое: вам надо научиться разрабатывать WPF приложения, то есть обычные оконные приложения. Для них есть готовые компоненты MediaPlayer и MediaElement .

13 фев 2019 в 11:15
спасибо! помогли
14 фев 2019 в 20:18

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

береш стандарный браузер что в списке контролов и результат

 public Form1() < InitializeComponent(); webBrowser1.Navigate(new Uri($"\\src\\index.html", UriKind.Absolute)); > 

вот так можно работать с элементами

webBrowser1.Document.GetElementById("video").SetAttribute("src", "urlvideo");