Оглавление

Предисловие

1. Аудио тег: аудио

1. Знакомство со звуком

2. Общие атрибуты

3. Проблемы совместимости

2. Тег видео: видео

1.video

Подвести итог

Предисловие

Сегодня я изучил базовый курс HTML от учителя Шанга из Кремниевой долины, который в основном фокусировался на свойствах и использовании аудио- и видеотегов.

Методы вставки аудио и видео в html в основном одинаковы. Здесь в качестве примера для демонстрации мы возьмем аудио.

Аудиоформат: mp3, ogg, wav

Формат видео: mp4, ogv, webm.

1. Аудио тег: аудио

1. Знакомство со звуком

Тег audio используется для добавления на страницу внешнего аудиофайла. При добавлении аудио- и видеофайлов пользователям по умолчанию не разрешается самостоятельно управлять кнопкой воспроизведения.

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

 <audio src="./Zeraphym Серафим - Lifeline.mp3"></audio>

2. Общие атрибуты

controls：Разрешить ли пользователям управлять воспроизведением。

 <audio src="./Zeraphym Серафим - Lifeline.mp3" controls></audio>

autoplay：Будет ли аудиофайл воспроизводиться автоматически。Если установленоautoplay,Музыка будет воспроизводиться автоматически при открытии страницы.,Но в настоящее время большинство браузеров не воспроизводят музыку автоматически. Браузер IE может выполнять автоматическое воспроизведение.

 <audio src="./Zeraphym Серафим - Lifeline.mp3" controls autoplay></audio>

loop：Будет ли музыка воспроизводиться циклично。Это свойство установлено,Музыка будет воспроизводиться циклично.

 <audio src="./Zeraphym Серафим - Lifeline.mp3" controls loop></audio>

3. Проблемы совместимости

Обычно при вставке аудио и видео браузеры совместимы, но IE8 не сможет их отобразить. В этом случае есть два метода. Первый метод — добавить то же приглашение, что и комментарий (как показано ниже), второй метод — использовать тег для встраивания.

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

 <audio controls>
        К сожалению, ваш браузер не поддерживает воспроизведение аудио, обновите браузер.
        <!-- Этот метод может включать несколько источников -->
        <source src="./Zeraphym Серафим - Lifeline.mp3">
    </audio>

 embed：совместимыйIE8。Как его использовать：

Элемент предоставляет атрибуты ширины и высоты для управления отображаемым размером.

<!-- Этот метод совместим с IE8. -->
    <embed src="./Zeraphym Серафим - Lifeline.mp3" type="audio/mp3" width="200" height="100">


        <!-- Если вы хотите избежать проблем с совместимостью, вы можете использовать следующие методы. -->
        <audio controls>0
            <!-- Этот метод может включать несколько источников -->
            <source src="./Zeraphym Серафим - Lifeline.mp3">
            <embed src="./Zeraphym Серафим - Lifeline.mp3" type="audio/mp3" width="200" height="100">
        </audio>

2. Тег видео: видео

1.video

video：Добавьте видео на веб-страницу,Использование аналогично аудио.

<video src=""></video>

Подвести итог

Выше приведены сегодняшние учебные заметки. Надеюсь, они будут полезны всем~.