Запознаване с аудио тага и видео тага в HTML


В седмата обучителна сесия обсъдихме как да вмъкваме изображения в уеб страници, а в тази образователна статия научаваме за видео и аудио тагове за вмъкване на аудио и видео файлове в уеб страници в HTML5. Тагът

Сега е време да започнете да добавяте видео и аудио плейъри към вашите HTML документи с този урок!

Поддръжка на HTML5 за аудио таг и видео таг

През последните години, тъй като честотната лента на интернет ставаше все по-бърза и по-бърза, видяхме развитието на мрежата от статични страници, които отнемаха няколко секунди за отваряне и предимно съдържаха малко текст и изображения, до въвеждането на Macromedia Flash и неговите анимации в края на 90-те години.

Първият приток на онлайн видео и аудио стана възможен благодарение на собствени технологии за добавки като Flash и Silverlight Macromedia Flash изигра огромна роля в разработването на уеб страници в началото на 2000-те години, всяка компания искаше уебсайт, изграден с анимация, музика , Video и Flash са възможни с помощта на специални добавки и плейъри. И двете имаха проблеми със сигурността и достъпността и вече са отхвърлени.

През 2014 г. най-новата версия на HTML5 въведе два нови елемента, които позволяват комбинирането на медийни обекти в HTML страница, тези елементи са аудио и видео тагове и Flash плъгините вече не са необходими, както и аудио, така и видео, за да се добавят лесно към уеб страници. Този етикет поддържа Chrome, Firefox, Safari, Opera и Edge в три аудио формата: MP3, WAV, OGG. Само браузърът Safari не поддържа OGG аудио формат.

Преди HTML5, за въвеждане на аудио и видео в HTML страници, се използваше етикет, наречен обект, и това направи невъзможно за вас да създадете много добра персонализация за аудио плейъри и видео плейъри.

Запознаване с аудио тага и видео тага в HTML

Съвети и уроци как да използвате видео маркера в HTML5

Както подсказва името му, видео тагът се използва за показване на видео файлове в браузъра. Използвайки този маркер, можете да показвате създаденото от вас видео на уебсайта си. Има ограничение за типовете видео файлове, които можете да показвате на уебсайта. Можете да използвате само mp4, .webm и ogg файлове. използване. В противен случай форматите не се показват на уеб страницата.

Сега включването на тези тагове във вашия HTML текст не гарантира, че видеоклипът ви ще бъде показан. Вашият видео път трябва да е чист. Можете да направите това с помощта на тага.

Като :

<video>
         <source src=" ویدیوی خود" type="video/mp4">
</video>

По-горе е как да използвате видео маркера. Както можете да видите, предоставихме пътя до нашия mp4 файл с помощта на атрибута ‘src’. Това ще покаже вашето видео на уебсайта ви.

Има много функции, налични за видео маркера, които ви позволяват да правите почти всичко с видеоклипа си. Нека проверим функциите заедно.

Характеристики на видео тага

Атрибутите се използват в HTML таговете, за да добавят някои персонализирани функции към нашите тагове. Използва се за предоставяне на допълнителна информация за вашите тагове като контроли, ширина, височина и т.н. Видяхме по-горе, че само предоставянето на таг

Ширина и Височина

Атрибутите Height и Width се използват за определяне на височината и ширината на размера на видеото в HTML. Като цяло всеки видеоклип има определен размер, като 9×16 (вертикален изглед) или 16×9 (хоризонтален изглед). По същия начин можете да изберете ширината и височината на вашата видео резолюция.

Като:

<video width="320" height="240">
  <source src=" type="video/mp4">
</video>


Надявам се да забележите как се е променил размерът на видеоклипа. Стойностите, които предавате в тези свойства, винаги са в пиксели. Колкото по-висока е стойността, толкова по-голяма ще бъде тя.

Контроли

Тази функция ни позволява да показваме различни контроли като възпроизвеждане, пауза, настройки на силата на звука, икона на цял екран и 3 точки, което дори ви позволява да изтеглите видео файл във видеоклипа си. Просто трябва да напишете контролите като атрибут.

Например:

<video>
  <source src=" type="video/mp4" controls>
</video>

В изхода вече можете да видите контроли като бутони за възпроизвеждане и пауза, бутони за сила на звука, бутони за цял екран и т.н.

постер

Всеки път, когато видео се показва на екрана, отнема известно време, за да се изтегли и след това да се покаже. Ако размерът на файла е голям и връзката е слаба, може да видите икона за изтегляне. Като алтернатива можете да използвате функцията за плакат, за да добавите изображение върху видеоклипа, което ще изчезне, след като видеоклипът бъде напълно зареден.

Например:

<video controls poster="image.png">
  <source src=" type="video/mp4">
</video>

Имайте предвид, че изображението се показва вместо иконата за зареждане. Изображението ще бъде там, докато не пуснете видеоклипа.

видео таг в HTML

Изключете звука

Да приемем, че видеоклипът ви има музика и не искате тя да се възпроизвежда в началото, когато пускате видеоклипа. Можете да използвате тази функция за това. Да видим примера.

<video controls muted>
  <source src=" type="video/mp4">
</video>

Когато възпроизвеждате видеоклипа, не чувате никакъв звук, защото видеоклипът прекъсва.

Автоматично изпълнение

Това, което прави тази функция, е, че автоматично възпроизвежда видеоклипа веднага щом видеоклипът бъде напълно изтеглен. Потребителите няма да трябва да натискат бутона за възпроизвеждане, тъй като видеото ще стартира автоматично. Единственото ограничение тук е, че трябва да използвате функцията за заглушаване заедно с функцията за автоматично пускане.

Да видим примера.

<video autoplay muted controls>
  <source src=" type="video/mp4">
</video>

Сега, както можете да видите, видеото ще се възпроизведе автоматично.

циклично видео

Функцията за цикъл ни позволява да повтаряме конкретен видеоклип безкраен брой пъти. Веднага щом видеото свърши, то започва отначало. Да видим примера.

<video controls loop>
  <source src=" type="video/mp4">
</video>

Пуснете видеото до края и ще видите, че видеото ще започне да се възпроизвежда отначало.

Предварително зареждане

Тази функция ви позволява да попитате потребителя как иска да се зареди вашето видео, след като страницата се зареди. Основно има три стойности: автоматично, метаданни и никой.

  • auto : Автоматично зареждане на целия видеоклип, когато страницата се зареди.
  • метаданни : Когато страницата се зареди, стойността на метаданните зарежда само метаданните на видеоклипа.
  • никой : Когато страницата се зареди, тя не зарежда никакъв видеоклип.

Като:

<video controls preload="auto">
  <source src=" type="video/mp4">
</video>

<video controls preload="metadata">
  <source src=" type="video/mp4">
</video>

<video controls preload="none">
  <source src=" type="video/mp4">
</video>

Универсални характеристики

HTML предоставя някои универсални функции. Тъй като името казва „глобален“, можем да разберем, че тези атрибути могат да се използват от всички HTML елементи. По-долу е даден списък на всички глобални функции.

ключ за достъп: Указва клавишна комбинация за активиране/фокусиране на елемент.

клас: Указва едно или повече имена на класове за елемент.

съдържание за редактиране: Указва дали съдържанието на елемент може да се редактира или не.

контекстно меню: Указва контекстно меню за елемент. Когато потребителят щракне с десния бутон върху елемента, се появява контекстно меню.

данни-* : Използва се за съхраняване на лични персонализирани данни на страница или приложение.

реж.: Указва посоката на текста за съдържанието на елемент.

плъзгащ се: Указва дали даден елемент може да се плъзга или не.

падаща зона: Указва дали изтеглените данни се копират, преместват или свързват.

скрит: Указва, че даден елемент все още не е свързан или вече не е свързан.

документ за самоличност : Указва уникален идентификатор за елемент.

език: Указва езика на съдържанието на елемента.

проверка на правописа: Указва дали елементът трябва да бъде проверен за правопис и граматика.

стил: Указва вграден CSS стил за елемент.

tabindex: Указва реда на табулиране на елемент.

заглавие : Указва допълнителна информация за даден елемент.

превеждам: Указва дали съдържанието на даден елемент трябва да бъде преведено.

Съвети и уроци как да използвате аудио тага в HTML5

Тъй като видео тагът се използва за добавяне на видео файлове към вашия уеб сайт, аудио тагът също се използва за добавяне на аудио файлове към вашата уеб страница.

HTML5 предоставя аудио таг, където можете да вграждате музикални/аудио файлове във вашия HTML документ, вместо да използвате добавки на трети страни (външни библиотеки). Има 3 вида файлове, които можете да добавите към аудио таг:

<audio>
    <source src=" type="audio/mp3">
</audio>

По-горе е как да използвате аудио тага за вмъкване на аудио файлове в HTML документи.

Сега само да напиша това не е достатъчно. Трябва да посочите пътя на вашия аудио файл в атрибута src. Ще ги видим в секцията с функции. По принцип аудио тагът е почти същият като видео тага. Дори някои атрибути са еднакви. Нека видим някои от тях.

Характеристики на аудио тага

Надявам се, че вече разбирате по-добре функциите. И така, без повече шум, нека започнем с първия.

src

Атрибутът ‘src’ се използва за добавяне на аудио файл към вашия HTML документ. Трябва да предоставите пътя на аудио файла тук и тогава само аудиото ще се възпроизвежда в браузъра.

<audio src= " فایل صوتی"> </audio>

Дори ако добави аудио файла към вашата уеб страница, вие няма да можете да го видите. Това е така, защото трябва да добавите друг атрибут, наречен „Контроли“, който ви дава контроли като бутони за възпроизвеждане, пауза и сила на звука точно като видео таг.

Тук сме добавили само един аудио файл (mp3). Ами ако браузърът не поддържа този тип аудиофайл? В такива случаи трябва да имате архивен файл, който ще бъде възпроизведен, ако първият файл не се поддържа.

Например, ако mp3 файлът. Не се поддържа, ще добавя друг файл (напр. ogg .). Ако mp3. Не пускайте, този файл действа като архивен файл.

Понастоящем не можете да използвате атрибута src в аудио тага, тъй като „src“ може да съдържа само един файлов път. Трябва да добавим повече от 1 файлов път. Ето защо трябва да дефинирате отделен тагза него.

Нека разберем с помощта на последния пример.

<audio>
    <source src= " type="audio/mp3">
    <source src= "audio.ogg" type="audio/ogg">
</audio>

Както можете да видите, използвах два аудио файла тук. В резултат на това трябва да използваме тага.

Контроли

Следващата функция е функцията за управление, която се използва за показване на контроли като възпроизвеждане, пауза, заглушаване и т.н. в браузъра. Трябва да предоставите контролен атрибут в тага

<audio controls>
  <source src=" type="audio/mp3">
</audio>

Можете да видите контролите на аудио файловете като изход.

Автоматично изпълнение

Тази функция се използва за автоматично възпроизвеждане на аудио веднага щом страницата се зареди или веднага щом аудиофайлът бъде напълно изтеглен. Но наскоро тази функция за „автоматично пускане“ беше деактивирана за най-новата версия на Google Chrome. Можете да стартирате кода на стари Mozilla, Microsoft Edge и Google Chrome. По-долу е даден пример.

<audio controls autoplay>
  <source src=" type="audio/mp3">
</audio>

Не можете да видите автоматичното възпроизвеждане на звука, защото е деактивирано в Google Chrome. Но ако се опитате да стартирате този код на който и да е друг браузър, определено ще видите аудиото да се възпроизвежда автоматично.

заглушен

Атрибутът muted се използва за заглушаване на звука при зареждане на страницата. Можете да видите кръстче до звуковата лента, което показва, че звукът е заглушен. Кликнете върху тази икона, за да чуете звука.

<audio controls muted>
  <source src=" type="audio/mp3">
</audio>

Можете да видите от изхода, че звукът е деактивиран. Това се дължи на заглушената функция.

Звукови цикли

Тази функция се използва за възпроизвеждане на аудио в цикъл. След като аудиото завърши възпроизвеждането до края, аудиото ще започне да се възпроизвежда отново от началото. Това ще продължи безкрайно.

Пример:

<audio controls loop>
  <source src=" type="audio/mp3">
</audio>

Пуснете звука докрай и ще видите, че звукът започва отново. Това се дължи на функцията “примка”.

Други начини за добавяне на аудио към вашия HTML документ.

Аудио тагът не е единственият начин за добавяне на аудио файлове към вашия браузър. Има 3 други начина да направите това.

Нека видим всеки от тях:

обект

Елементът обект е HTML таг, който ни позволява да вмъкваме различни медии в нашите уеб страници, като аудио, видео, снимки и PDF файлове. Не се използва често, защото не се поддържа от повечето браузъри. И как работи зависи от вида на носителя, който свързваме към него.

Пример:

<object data=" width="300" height="200"></object>
<object data=" width="300" height="200"></object>

Както можете да видите, вместо и

Етикет за котва таг за котва

Използва се за създаване на връзка към вашата уеб страница, която, когато щракнете, ще ви насочи към тази дестинация. Като се има предвид, че маркерът за котва се нуждае само от път, ако предоставим пътя до нашия аудио файл, той ще пренасочи към аудиото. Да видим следния пример.

<a href=" 1</a>
<a href="audio2.mp3">Audio 2</a>

Тази част от кода създава две връзки: Аудио 1 и Аудио 2. И ако щракнете върху една от връзките, ще се отвори нов раздел, за да възпроизведете този конкретен аудио файл.

По принцип този метод не е за предпочитане, тъй като маркерът за котва създава ненужни пренасочвания на вашия уебсайт, където потребителите искат да видят съдържание на същата страница.

Вграждане на елемент

Този етикет е създаден с една единствена цел: да ви позволи да вграждате мултимедийни активи във вашия HTML документ. Подобно на обектния таг, можете да поставите произволен тип файл в този таг. Да видим пример:

<embed src=">
<embed src="video.mp4">

Той вгражда аудио файла във вашата уеб страница.

Прочетете повече за HTML и станете професионалист:

Ако имате въпроси или коментари, ще се радваме да ги споделите с нас. Свържете се с нас в Telegram.

Related Posts

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *