Комментарий: Эта статья даст вам подробный обзор использования аудиотегии музыкального игрока HTML5. Друзья, которые любят HTML5, могут ссылаться на это. Я надеюсь, что это будет полезно для вас.
<Audio> Свойства тега: SRC: Music UrlPreload: Preload Autoplay: Autoplay Loop: Контрольные управления: Собственная панель управления браузером
<audioid = "media" src = "http://www.abc.com/test.mp3" Controls> </audio>
<dive> Свойства тега: src: url of Video Poster: Видео -обложка, изображение, отображаемое, когда нет воспроизведения Preloyd: Preload Autoplay: Autoplay Loop: Цикл Управление: Собственная панель управления браузера: Высота ширины видео: Высота видео
<Videoid = "media" src = "http://www.abc.com/test.mp4" controlsheigt = "400px"> </video>
Получить объекты HTMLVideOelement и HTMlaudioElement
// аудио может создавать объекты непосредственно через новые
Media = newaudio ("http://www.abc.com/test.mp3");
// как аудио и видео могут получить объекты через теги
Media = document.getelementbyid ("Media");
Методы и свойства среды:
HTMLVideOelement и HTMlaudioElement унаследованы от HTMlMedieEmement
// Статус ошибки
Media.Error; // null: нормальный
Media.error.code; // 1. Завершение пользователя 2. Сетевая ошибка 3. Ошибка декодирования 4. URL -адрес неверный
// статус сети
Media.currentsrc; // возвращать URL -адрес текущего ресурса
Media.src = value; // возвращать или установить URL -адрес текущего ресурса
Media.canplaytype (type); // может ли он сыграть ресурс определенного формата
Media.networkstate; // 0. Этот элемент не инициализируется 1. Нормальный, но не используя сеть 2. Данные загружаются 3. Ресурс не найден
Media.load (); // перезагрузить ресурс, указанный SRC
Media.buffered; // возвращение в буферированную область, тайранты
Media.peload; // Нет: не предварительно нагрузка метаданных: информация о ресурсе предварительной нагрузки Авто:
// Готовный статус
Media.ReadyState; // 1: haf_nothing 2: hab_metadata 3.have_current_data 4.have_future_data 5.have_enough_data
Media.seking; // это ищет
// Статус воспроизведения
Media.currenttime = value; // текущая позиция воспроизведения, назначение может изменить позицию
Media.Starttime; // Обычно 0, если это потоковая носитель или ресурс, который не начинается с 0, это не 0.
Media.duration; // текущий поток длины ресурса возвращает бесконечно
Media.paused; // Будь пауза
Media.defaultplaybackrate = value; // Скорость воспроизведения по умолчанию может быть установлена
Media.playbackrate = value; // текущая скорость воспроизведения будет изменена сразу после настройки
Media.played; // Вернуться в играбельную область, тайранты, см. Ниже для этого объекта
Media.seekable; // Вернуться в область, где вы можете искать тайнинге
СМИ. // это закончилось
Media.autoplay; // это автоматически играет
Media.loop; // Будь то играть в петлю
Media.play (); //Играть
Media.pause (); // пауза
//контроль
Media.controls; // есть ли строка управления по умолчанию
Media.volume = value; //Объем
Media.muded = value; //Немой
// Timeranges (область) объект
Timeranges.length; // количество сегментов площади
Timeranges.start (index) // начальная позиция области сечения индекса
Timeranges.end (index) // конечная позиция зоны сечения индекса
событие:
EventTester = function (e) {
Media.addeventlistener (e, function () {
console.log ((newdate ()). gettime (), e);
});
}
EventTester ("LoadStart"); // клиент начинает запрашивать данные
EventTester («Прогресс»); // клиент запрашивает данные
EventTester («Приостановка»); // Задержка скачивания
EventTester («прервать»); // Клиент активно завершает загрузку (не вызвана ошибкой),
EventTester ("ошибка"); // была обнаружена ошибка при запросе данных
EventTester ("Застопорился"); // Остановить скорость сети
EventTester ("Play"); // запускается, когда Play () и Autoplay начинают играть
EventTester ("пауза"); // Пауза () Триггеры
EventTester ("LoadedMetadata"); // успешно получить длину ресурса
EventTester ("LoadedData"); //
EventTester («ожидание»); // ожидание данных, а не ошибка
EventTester («игра»); // начать воспроизведение
EventTester ("canplay"); // может играть, но может быть приостановлен из -за загрузки в середине
EventTester ("canPlayThrough"); // можно сыграть, все песни загружены
EventTester («поиск»); //Идет поиск
EventTester («Seeked»); // Поиск завершен
EventTester ("TimeUpdate"); // Изменения времени воспроизведения
EventTester («закончился»); // заканчивается воспроизведение
EventTester ("RateChange"); // Изменения скорости воспроизведения
EventTester ("DurationChange"); // Изменения длины ресурса
EventTester ("VolumeChange"); // изменение объема
Абзац JS, написанный мной:
$ (function () {
var p = new Player ();
P.Read ("Play");
$ ("#Stop"). Click (function () {
p.pause ();
});
$ ("#start"). Click (function () {
p.play ();
});
$ ("#show"). click (function () {
оповещение (p.duration ());
});
setInterval (function () {
$ ("#currenttime"). Text (p.currenttime ());
}, 1000);
});
function player () {};
Player.prototype = {
коробка: новый объект (),
Читать: function (id) {
this.box = document.getelementbyid (id);
},
play: function () {
this.box.play ();
},
Пауза: function () {
this.box.pause ();
},
src: function (url) {
this.box.src = url;
},
CurrentTime: function () {
return (this.box.currenttime/60) .tofixed (2);
}
};
Player.prototype.duration = function () {
return (this.box.duration/60) .tofixed (2);
};