Изменение размера встроенного аудио плеера WP


Содержание материала:

Как добавить аудио в WordPress самым простым и практичным способом

Как система управления контентом, WordPress позволяет легко добавлять и воспроизводить аудио-файлы и даже целые плейлисты встроенными в неё возможностями. То есть, для работы с музыкой нет необходимости использовать дополнительные плагин, хоть и многие новички этого не знают.

В этой статье я расскажу вам, как добавлять аудио в WordPress, не используя плагины. Покажу на встроенных в эту CMS возможностях. Вы увидитесь, как всё просто.

Как добавить аудио в WordPress

Для того, чтобы добавить аудио в WordPress, откройте редактор записи или страниц, и нажмите кнопку «Добавить медиафайл».

Откроется стандартный загрузчик WordPress. Здесь либо выберите ваш аудио-файл во вкладке «Библиотека файлов», либо загрузите его с компьютера во вкладке «Загрузить файлы», и потом выберите его.

И затем в данной записи или странице вы сразу же увидите плеер для загруженного вами аудио.

В опубликованном виде это будет выглядеть так. И можно уже прослушать аудио в WordPress.

И готово! Буквально в пару кликов у вас на сайте есть полноценное аудио.

Как добавить плейлист в WordPress

WordPress также позволяет добавлять и плейлисты – несколько визуально объединённых аудио-файлов. Для этого в редакторе записей или страниц нажмите кнопку «Добавить медиафайл».

Слева нажмите на ссылку «Создать плей-лист аудио». Затем выберите во вкладке «Библиотека файлов» необходимые для вашего плей-листа аудио-файлы. Либо можно добавить аудио в WordPress во вкладке «Загрузить файлы». После того, как выберите аудио, нажмите на кнопку «Создать плей-лист».

После этого произведите необходимые настройки (вы также можете менять порядок аудио-файлов, перетащив их мышкой) и нажмите кнопку «Вставить плей-лист аудио».

Затем вы увидите аудио-плеер с вашими файлами в редакторе.

После публикации это будет выглядеть, как на скриншоте. И уже пригодно к прослушиванию.

Как добавить аудио в WordPress

Начиная с версии 4.8, разработчики внедрили аудио-виджет в состав стандартного набора. Он так и называется «Аудио».

Чтобы добавить аудио в WordPress в боковую колонку, перейдите в пункт «Внешний вид», подпункт «Видджеты». Найдите виджет «Аудио» и переместите его в нужную вам область виджетов. Разверните его и нажмите кнопку «Добавить аудио запись», а также заполните поле «Заголовок» при необходимости.

После добавления аудио, вы можете произвести его настройку, нажав на кнопку «Редактировать». А чтобы всё опубликовать нажмите кнопку «Сохранить».

После публикации это выглядит так.

Итак, теперь вы знаете, как добавить аудио в WordPress средствами самой CMS. Конечно же, вы можете использовать и плагины для этой цели, если вам требуется дополнительный функционал. Но для большинства случаев годится и такой вариант.

5 способов добавить аудио в ваш блог на WordPress

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

1. Автоматически

По умолчанию WordPress способен обрабатывать любые аудиофайлы. Это весьма простая вещь, которая не потребует особых усилий. Так же просто, как вы можете добавлять изображения в свои посты, вы также можете вставить и аудио. Это стало еще проще с HTML, до которого ранее не было стандартного способа воспроизведения аудиофайлов на веб-сайте. Несмотря на то, что был Flash и был весьма популярен, но он был не очень приятным. Сегодня WordPress может использовать HTML5, чтобы вставлять аудио на веб-сайт. Звук будет воспроизводиться на любом браузере и устройстве, в том числе на мобильных телефонах.

2. Использование WordPress Audio Player

Это самый простой способ добавить аудио на ваш сайт WordPress. Использовать аудиоплеер WordPress легко и поэтому данный метод может быть принят как единственный выход, если только у вас нет особых потребностей. С помощью него вы сможете добавить файлы mp3, m4a, ogg и wav в медиатеку WordPress, откуда они могут быть вставлены в любую запись по вашему выбору. Вы также можете добавить дополнительную надпись к своей загрузке. Что вам необходимо сделать, так это нажать кнопку мультимедиа на своем веб-сайте WordPress, перетащить аудиофайл в библиотеку, а затем нажать «Загрузить файлы». Затем нажмите «Выбрать файлы», чтобы добавить аудиоконтент в медиа-библиотеку. На вашем экране используйте правильный размер, чтобы заполнить соответствующие метаданные, относящиеся к загруженному аудио, включая такую информацию, как название аудио, артист, данные альбома, любые заголовки и описание, которое вы хотите, чтобы ваши пользователи увидели. Всегда не забывайте убедиться, что выбран параметр «Включить медиаплеер», чтобы позволить вашим пользователям воспроизводить аудиофайл непосредственно из этой записи. Когда все будет сделано, нажмите «Вставить в сообщение», чтобы добавить файл в нужный пост.

3. Создание звукового плейлиста WordPress

Это может быть отличным способом добавления звука в блог на Word Press, если у вас есть более одного аудиофайла, которым вы хотите поделиться. Хорошая вещь заключается в том, что WordPress также поддерживает плейлисты. В этом случае вы должны нажать кнопку «Создать аудиоплеер» в своей медиабиблиотеке, а затем выбрать все аудиофайлы, которые вы хотели бы включить в этот плейлист. Как только это будет сделано, вы сможете добавить любые метаданные, относящиеся к данному списку, чтобы пользователи могли их видеть. Наконец, нажмите «Создать новый плейлист». Затем вы можете выбрать необходимые параметры, которые будут использоваться для отображения ваших аудиофайлов, включая список дорожек, имя исполнителя и т. д. Нажмите «Вставить аудио-плейлист», как только все будет сделано, и пользователи вашего сайта смогут воспроизводить все аудиофайлы в вашем плейлисте.

4. Вставка звука с проигрывателя SoundCloud

SoundCloud — это сервис, который в наши дни используется людьми, которые хотят делиться музыкой в Интернете. Он работает так же, как и YouTube, только в основном для аудио. SoundCloud можно очень легко использовать для размещения ваших аудиофайлов, которые вы хотите встроить на свой сайт. Он также может использоваться для обмена файлами, которые у вас уже есть, с пользователями вашего веб-сайта. Услуга была разработана таким образом, что ее можно легко встраивать в любой контент на любом веб-сайте. Чтобы начать работу, убедитесь, что все аудиофайлы, которыми вы хотите поделиться, имеют под ними кнопку общего доступа, так как это единственный способ, которым их можно вставить. Если у всех из них имеется кнопка расшаривания, нажмите «Вставить» и выберите между большим квадратом или меньшими прямоугольными параметрами, которые появляются. Теперь скопируйте его и вставьте в пост, в котором хотите, чтобы ваши файлы отображались.

5. Использование аудио-плагина WordPress

Это лучший вариант для тех, кто хочет сделать что-то большее, поскольку плагины предлагают расширенную функциональность, а также большую конфигурацию по сравнению с аудиоплеером WordPress. Хорошо, что существует так много вариантов: поэтому легко найти плагин, который будет легко отвечать вашим потребностям в зависимости от того, какую функциональность вы ищете. Некоторые из доступных опций включают компактный проигрыватель WP audio.

Это более компактный вариант, который появляется как значок воспроизведения. С его помощью вы сможете добавлять файлы MP3 и OGG в свой блог на WordPress. Другим отличным вариантом является MP3-jplayer. Это более гибкий вариант, который можно использовать для расширения коротких кодов WordPress с новыми возможностями и функциями. Плагин имеет отличный стиль, множество вариантов компоновки и цвета. Вы также можете использовать интерфейс перетаскивания, а еще возможность воспроизведения звука непосредственно из медиа-библиотеки, URL-адресов и загруженных файлов.

Топ-пост этого месяца:  Создание скрипта, звездного рейтинга статей, на PHP

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

PressDev

Все об IT

Свежие записи
  • Уведомляем пользователей о подтверждении комментариев WordPress
  • Создаем бесплатно качественный логотип для сайта
  • Запрещаем доступ к сайтам с локального компьютера
  • Идентифицируем старые записи WordPress и уведомляем об этом пользователей
  • Как сделать перенаправление страницы в WordPress
  • Плагины для создания слайдеров и слайдшоу на WordPress
  • Сбрасываем графический пароль на Andro >Дмитрий к записи Сохраняем и открываем DBF-файлы в Excel 2007 и 2010
  • Мирон к записи Уменьшаем или увеличиваем количество выводимых тегов WordPress
  • DuavidkeK к записи Что такое лиды в интернет-маркетинге?
  • Елена к записи Получаем бесплатно инвайт для социальной сети PostPR
  • Mixkino к записи Запрещаем доступ к сайтам с локального компьютера
  • WordPress 3.6: изучаем встроенный аудио- и видеоплеер

    Среди всех самых новейших возможностей в WordPress 3.6 хочется отдельно отметить интересную «фишку», которая будет интересна множеству блоггеров. Сейчас я говорю про нативную поддержку для видео- и аудио- файлов в самой последней версии этого движка. Данная опция может хорошо изменить ситуацию с применением в блогах медиа-контента. В этом посте мы сейчас расскажем о том, как по работе со звуком и видео применить можно новые возможности в рамках нашего WordPress-сайта. Но для начала хочется вспомнить, как раньше приходилось работать с мультимедиа-содержимым для блогов и сайтов.

    Если вы ведете какой-нибудь видео-блог тогда на вашем WordPress-сайте раньше устанавливать нужно было плагин, который давал возможность проигрывать записанного аудио или созданного видео.

    Например, если мы собрались загружать видео, как обычно экран создания нового поста WordPress и редактирования у нас выглядел с контентом, говорящий про то, что типа нет проигрывателя для файла, а стоит обычная ссылка.

    Как мы видим, не было плеера для файлов, только обычная ссылка, поэтому воспроизвести было невозможно.

    Естественно, всегда можно взять инструментарий левых сервисов вроде Vimeo и YouTube, которые легко позволяют встроить уже ранее загруженные в WordPress ролики. Но что нам сделать, если мы хотим мультимедиа-контент размещать на своих серверах? Чуть ранее такую задачу можно было решить при помощи плагинов.

    Предварительно просматриваем медиа-контент в WordPress 3.6


    Чуть ниже приведен предварительный обзор именно того, как мы можем видео-ролик загрузить в новом для WordPress 3.6 посте.

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

    У пользователей теперь есть представление о том, что следует за каждым последующим действием. Например, выбрав «Видео», нам больше не нужно угадывать, как именно видео будет добавляться в пост и как это отображаться будет. Нам просто нужно или выбирать адрес к ранее готовому загруженному видео на левом ресурсе, либо просто на собственный сервис загружаете файл, при этом автоматически создается шорт-код.

    На сегодняшний день работа с аудио и видео-роликами стала намного понятнее и проще. Теперь нам не придется выискивать медиа-проигрыватель, а все файлы ваши воспроизводятся моментально после добавления их к постам и загрузки.

    Многие из читателей уже слышали про такой скрипт, как Media Elements.js. Может быть такое, что вы даже пользовались им. Есть огромный ряд причин, по которым выбрать можно MediaElement.js, но главные причины, почему данный скрипт лег в основу при добавлении медиа-файлов, будут таковы:

    • Хорошая поддержка всех основных устройств и браузеров.
    • MediaElement.js применяет одну и одинаковую HTML разметку для всех вариантов встраивания видео.
    • Любые проигрыватели легко адаптировать к шаблону или дизайну оформления сайта, применив при этом таблицу CSS.

    MediaElement.js и его параметры

    • Плееры видео и для аудио-файлов с поддержкой CSS на основе HTML5.
    • Настраиваемые проигрыватели Silverlight и Flash, для старых браузеров имитирующие HTML5 Media Element API.

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

    За счёт чего и почему облегчается наша жизнь?

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

    Нативный проигрыватель даёт возможность избежать всего этого и приступить к применению контента и загрузке без левых затрат на изучение, настройку и использование. Проще станет не только блогерам и администраторам, но и простым читателям нашего блога или сайта. Большая поддержка различных устройств и браузеров — это и есть главный «плюс» данного проигрывателя.

    Левые сервисы больше не нужны нам

    Представьте, что вы сняли интересный ролик и хотите его всем показать. Естественно нам не нужен YouTube или иной видео сервис. Мы просто загружаем видео на свой собственный блог. Аналогично поступать могут все, кто ведет видео-блог: подкастеры, музыканты, редакции онлайн-СМИ и журналисты. Левые сервисы и плагины сложны были в настройке, но это всё в далёком прошлом. Начиная с WordPress 3.6 версии, нам достаточно сделать мышкой всего 2 клика— и ваш видеоролик увидят любые читатели.

    В принципе всё, что хотелось рассказать по этому поводу, спасибо за внимание!

    WordPress. Как изменить размеры встраиваемого видео

    Добрый день! Из этого туториала Вы узнаете, как изменить размеры видео, встраиваемого в шаблоны WordPress.

    Перейдите в раздел Записи -> Все записи -> Добавить новую (Posts -> All Posts -> Add new) в админ панели сайта.

    Добавьте ваш код вставки видео на страницу.

    Затем, перейдите на вкладку Внешний вид -> Редактор (Appearance -> Editor ), для того чтобы изменить файл function .php.

    Добавьте эти строки кода в конец файла.

    Здесь XX и YY – нужные значения.

    Нажмите на кнопку Обновить файл ( Update file) и проверьте изменения на фронтенде сайта.

    Теперь Вы знаете, как изменить размеры видео, вставляемого в WordPress. Благодарим Вас за ваше внимание!

    Вы можете также ознакомиться с детальным видео-туториалом ниже:

    Похожие записи

    Our Technical Support Team is ready to present you the easy way to integrate the Google Forms to your WordPress website.

    Today, we’re going to show you how to install and use the «File Manager» plugin on your WordPress website.

    WordPress is the dominant CMS nowadays. No wonder even the famous brands choose it for building their websites and today, we’re going to showcase you some interesting ones.

    Submit a ticket

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

    Как уменньшить ширину аудиоплеера на HTML5

    При создании странички уже в конце работы решил вставить аудио отзывы от клиентов на плеерах html5. В Мозилее всё крректно, а в Google 3 плеера не вмещаются по ширине.страницы.

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

    В связи с этим вопрос, Как уменьшить ширину изображения аудиоплеера на HTML5 Посоветуйте, пож. кто что может. Лучше без скриптов. Только ширину!

    Идеальный случай, убрать часть картинки с плеера кнопку со значком «СКАЧАТЬ» и всё.Тем более, что она даже вредит уникальности. Получается классно. Как такая мысль?.

    Проблему решил, тему желательно удалить в связи с не актуальностью. Спасибо.

    Проблему решил, тему желательно удалить

    Зачем удалять тему?

    Может вы решение напишите, вдруг кому тоже пригодится.

    Качественный хостинг Тут может быть ваша ссылка.

    Поясню. Дело в том, что во всех браузерах отображение плеера выглядит по разному. Просто подобрал отступ, который удовлетворяет два основных браузера, конечно выравнивание приблизительное. Можно раздвинуть ширину страницы немного, лишь бы плеера стали в ряд по горизонту. Потом они съезжают под низ при адаптации.

    Главное, изначально выстроить в ряд по горизонту. Вот результат на странице: https://servis.kharkov.ua/

    Топ-пост этого месяца:  Как правильно вставить шорткод в single.php

    В Мозилле отступы мне не нравятся, а в Гугле пойдёт. Придётся поискать как подстроить боковые отступы. Ауто и % не получается.

    @master-vek, заглянул в код ваших плееров, заодно и всего сайта.

    Я бы блок плееров сверстал в виде списка, в виде:

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

    убрать часть картинки с плеера кнопку со значком «СКАЧАТЬ»

    Попробуйте разобраться. Если не получится, то как у меня будет немного свободного времени (сейчас запара) попробую набросать кусочек кода в песочнице.

    И по коду в целом.

    1. У вас творится некоторая «вакханалия» с заголовками: h1-h5-h3-h2 — такой порядок не обеспечивает ожидаемой от них пользы, так как идёт вразрез с тем назначением для которого они были созданы.

    2. В продолжение темы заголовков мне абсолютно не понятен смысл конструкции

    Заголовок в который обёрнута только картинка является абсолютно лишним и неоправданным

    3. Абсолютно точно, на 200%, вы очень сильно переборщили с количеством тегов

    4. Выделите отдельным цветом/стилями внутренние ссылки — о том что между картинками вверху находятся 4 ссылки догадаться может только экстрасенс.

    5. Попробуйте поменять в своём сознании понимание блочной вёрстки. Понимаю что это происходит не сразу — сам это проходил. Переход с табличной на блочную вёрстку это не просто замена tr/td на div, скорее это принципиально иное формирование структуры всего кода в целом. То есть просто другой подход.

    Схематично, для Вашего кода, при блочной вёрстке более уместна конструкция в следующем виде:


    Более активно используйте вложенность, нет необходимости в целом ряде открытия/закрытия «горизонтальных» областей:

    • открыли блок с основным стилем страницы
    • написали что нужно
    • внутри блока с основным стилем открыли дополнительный стилевой блок/элемент
    • написали что нужно
    • закрыли дополнительный и все стили вернулись к основным

    Внутри дополнительных стилевых классов также можно вкладывать ещё и ещё другие вложенности, со своими стилями.

    Безумно глубокой вложенность конечно не стоит делать, но именно когда начинаешь правильно использовать вложенность при блочной вёрстке начинаешь испытывать кайф о её применения. Именно в этот момент приходит понимание того, что табличная вёрстка — прошлый век. Сам через это прошёл

    ЗЫ. Прошу воспринять не как «критику», а как «подсказку» — каждый дро коддит, как хочет, и это его право.

    Урок 48 Плагин Audio Player: добавление аудио на свой блог

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

    В современное время текстовой контент немного поднадоел. Лично я, предпочитаю слушать аудиоподкасты, так как дорожу своим временем. Пока я слушаю что-то, “ручки” занимаются своими делами.

    И вообще аудио- и видеоподкасты выделят Вас среди “толпы” блоггеров. Эта функция покажет посетителям вашего блога то, что вы тоже человек, который может с легкостью выйти на связь.

    Итак, давайте приступим. Вставлять аудио на свой блог мы будем с помощью плагина Audio Player. Также можно вставить аудио без помощи плагинов, через популярный и очень полезный сервис для «подкастеров» podfm.ru Там подробно все объяснено как вставлять аудиоподкасты, какой программой записывать свою речь и много другой полезная информация (советую всем ознакомиться).

    Установка плагина Audio Player

    1. Для начала, конечно, нужно скачать плагин Audio Player, активировать его в админке WordPress.
    2. Теперь заходим в админку WordPress –> Настройки –> Audio Player. Должно открыться примерно следующее:
    3. Спускаемся вниз и можно увидеть надпись “Default audio folder location”:
    4. Это означает, что по умолчанию папка “audio” будет является папкой для хранения аудиофайлов.
    5. Создаете в корневой папке Вашего блога (если у Вас хостинг от Yutex, то это public_html) папку под названием audio:
    6. Закачиваете в папку audio тестовый файл в формате mp3. Я закачал песню из “Титаника”:
    7. Теперь нам нужно вставить этот аудиофайл в запись. Для этого переходим в любую статью и вставляем квадратные скобки [] и внутри написать audio:название_трека.mp3:

    Настройка плагина Audio Player

    Напомню, чтобы попасть в настройки плагина, нужно зайти в админку WordPress –> Настройки –> Audio Player.

    Вкладка General

    Тут лучше ничего не трогать и все оставить по умолчанию:

    1. Первая галочка означает, что вставлять аудиозаписи Вы будете вставлять с помощью тега audio в квадратных скобках.
    2. Если поставите галочку на второй строке, то вам нужно будет вставлять аудиофайлы в виде ссылки, что не так удобно.
    3. 3-ая строка Enable in comments, позволяет оставлять аудиокомментарии. Для этого комментатору придется оставить ссылку на аудиофайл, который плагин Audio Player подгрузит и позволит воспроизвести “прямо на месте”.
    4. Эта строка позволяет вставлять аудиозаписи с помощью произвольных полей (о них я расскажу в будущих уроках).
    5. Галочка в этом месте позволяет переместить наш плеер в начало заметки.

    Вкладка Display (Внешний вид)

    Чтобы изменить цвет плеера, нужно из выпадающего списка выбрать объект (например, background – фон), потом его цвет и сразу можно наблюдать за результатом:

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

    Еще в этой вкладке можно изменить ширину аудиоплеера. Для этого достаточно изменить значение width:

    Вкладка Feed options

    Здесь будет указываться, что передастся Вашим RSS подписчикам в отношении аудио.

    1. Nothing – ничего.
    2. Download link – ссылка на скачивание.
    3. Custom – будет вместо аудио текст, который Вы укажете. Я, например, выбрал этот пункт и поставил следующий текст:

    Вкладка Podcasting

    Здесь все просто, эта функция если для того, чтобы воспроизводилась какая-то мелодия в начале и/или в конце статьи (как на радио и т.п.).

    В строке “Pre-appended audio clip URL:” указываете адрес аудиофайла, который будет воспроизводится после нажатия на play.

    В строке “Post-appended audio clip URL:” нужно указать адрес аудиозаписи, воспроизводимой после основного аудиофайла.

    Вкладка Advanced

    Тут можно поменять строку “Alternate content for excerpts:”, поставить что-то наподобие [Чтобы прослушать аудио, перейдите на полную версию статьи].

    Также можно изменить первоначальную громкость аудиоплеера, изменив значение “Initial volume”.

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

    Вот музыка из фильма “Титаник”, которая вставлена в ходе урока.

    Спасибо за внимание, до встречи на следующих уроках!

    Изменение высоты звукового проигрывателя WordPress по умолчанию

    Я использую стандартный [аудио] короткий код для встраивания встроенного аудиоплеера с аудиоэлементом. Я переопределил таблицы стилей, поэтому я могу их настроить, как описано здесь. Я скрыл ползунок объема и изменил цвет фона. Это то, что у меня есть до сих пор:

    Теперь я хочу сделать проигрывателя тоньше. Я хочу изменить высоту mejs-container , но есть встроенные стили, которые mejs-container мне переопределить высоту в CSS:

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

    Мне нужно знать, где находится код WordPress, который создает экземпляр игрока, и как я могу переопределить этот код для предоставления моей собственной высоты?

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

    Как добавить аудио на ваш WordPress сайт?

    Опять давненько не писал новых статей – сейчас исправляюсь! И сегодня мы затронем такую тему как вставить аудио на ваш блог. В статье получилось очень много картинок, так что даже новичок разберется со всем. Погнали!

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

    Добавление аудио файлов в посты и страницы

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

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

    2. Если у вас аудио-файл уже загружен, выберите его из библиотеки мультимедиа.


    3. Если нет, перейдите во вкладку загрузить файлы и загрузите файлы.

    4. Звуковые файлы и другие медиа-файлы, как правило, большие по размеру. По умолчанию в PHP выставлена максимальная загрузка файлов размером 2M. Таким образом, вы можете столкнуться с ошибкой, что выбранный файл превышает максимальный размер загружаемого файла.

    5. В таком случае перейдите к файлу php.ini и посмотреть на эту линию:

    6. Перезапустите сервер Apache, а затем повторите попытку чтобы загрузить файл. Вы должны увидеть новый размер на экране.

    7. Выберите файл и загрузите его. В редакторе вы получите готовый плеер.

    8. Опубликованная статья будет также иметь такой же плеер, который может быть использован для запуска / паузы / остановки аудио. Вы также сможете регулировать громкость звука. Это аудио-плеер по умолчанию, который поставляется с WordPress.

    Аудио Shortcode:

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

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

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

    Вы хотите воспроизводить аудио-отрезок непрерывно? Делайте это с аргументом цикла. По умолчанию цикл установлен в положение OFF. Установите его в положение ON.

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

    По умолчанию является FALSE или 0. Установите его TRUE или 1.

    Некоторые сайты запускают автовоспроизведение аудио в фоновом режиме, когда посетитель заходит на сайте. Это может быть достигнуто с помощью шорткода с циклом и автовоспроизведением, кроме некоторых дополнительных CSS, то есть, установив visibility : hidden для аудиоплеера.

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

    Добавляем плейлист

    Иногда, на музыкальном сайте необходимо отобразить список воспроизведений вместо одного звукового файла.

    Списки воспроизведения также можно легко создать в WordPress, следуйте инструкции ниже.

    1. В редактора нажмите на кнопку Добавить медиа. Теперь, нажмите на Создать аудио-плейлист.

    2. Появиться страница Создать аудио-плейлист. Вы можете добавить необходимые (уже загруженные аудио файлов или вы можете загрузить их из вкладки загрузки файлов) аудио файлов, а затем нажмите кнопку Создать новый список воспроизведения.

    3. Появится страница Редактировать аудио-плейлист, где вы можете выбрать настройки для воспроизведения. Вы можете выбрать: показыватьть или скрывать список дорожек, имена исполнителей и миниатюры исполнителей. Это также может быть сделано с помощью шорткода списка воспроизведения (как описано в следующем разделе подробно). Теперь нажмите на кнопку Вставить аудио-плейлист.

    4. Вы можете сохранить пост и просмотреть его. Вы увидите список воспроизведения, миниатюры, детали в списке воспроизведения, аудио-плеер и, наконец, пронумерованный список треков с именами исполнителей и продолжительностью.

    Если посмотрите на вкладке Текст в редакторе то вы увидите шорткод списка воспроизведения с идентификаторами дорожек (или загруженные аудио файлы), которые будут включены.

    Playlist Shortcode:

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

    Базовый формат, чтобы добавить аргумент идентификаторов с разделенной запятой списка идентификаторов, как показано выше.

    Как найти идентификаторы аудио файлов?

    1. Перейдите в библиотеку мультимедиа и отфильтруйте аудио файлы.

    2. Нажмите на звуковой файл, чтобы изменить его. В окне Редактировать медиафайл можно увидеть идентификатор сверху в ссылке.

    3. Теперь, когда мы знаем, как использовать основной шорткод плейлиста, давайте рассмотрим различные варианты.

    4. Вы можете изменить стиль воспроизведения, используя параметры. Установите его в темном стиле или пусть это будет светлый стиль по умолчанию.

    5. Теперь список воспроизведения имеет темный стиль, и это хорошо выглядит на светлом фоне.

    6. Вы можете выбрать, чтобы список дорожек не отображался, установив его на FALSE или 0 вместо стандартного TRUE или 1.

    7. Вы увидите только детали списка воспроизведения и аудиоплеер.

    8. Вы можете изменить порядок идентификаторов, чтобы изменить порядок дорожек в списке воспроизведения.

    9. Вы можете также установить аргумент tracknumbers в FALSE или 0 вместо стандартного TRUE или 1, чтобы скрыть или показать номера дорожек соответственно.

    10. Посмотрите на список воспроизведения с номерами дорожек когда они скрыты.

    Что делать, если вы не хотите, чтобы отображалась миниатюра на верху? Вы можете сделать это, установив аргумент изображения на FALSE или 0 вместо значения по умолчанию TRUE или 1.

    Вот список воспроизведения без миниатюры.

    И, наконец, почему бы не удалить имена исполнителей тоже?

    Используйте аргумент artists и установить его на FALSE или 0 вместо стандартного TRUE или 1, чтобы скрыть или показать имена исполнителей соответственно.

    Вот список воспроизведения где имена исполнителей удалены.

    Итак. Два разных способа использования и отображения аудиофайлов на вашем сайте – один файл или как список. Используйте шорткоды для быстрого и простого добавления аудиофайлов. Играйте с аргументами или их комбинацией для достижения желаемого результата, который вы имеете в виду.

    Разве это не потрясающе?

    Вот и конец статьи про вставки аудио-файлов на сайт. Всего вам хорошего и до новых встреч!

    Как изменить размер встроенного проигрывателя WordPress или показать только кнопку воспроизведения

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

    Что еще я могу сделать, чтобы изменить размер? Я просто хочу показать кнопку воспроизведения, ничего больше.

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

    Solutions Collecting From Web of «Как изменить размер встроенного проигрывателя WordPress или показать только кнопку воспроизведения»

    Я предполагаю, что вы говорите о встраивании аудиофайлов , например:

    Обработчик аудио встраивания зарегистрирован в wp_maybe_load_embeds() и фильтруется через фильтр wp_embed_handler_audio .

    Таким образом, в WP_Embed::shortcode() это генерируется для:

    поэтому некоторые из методов, упомянутых здесь для короткого кода должны работать.

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

    Здесь мы используем $rawattr так как мы хотим только проверить вход пользователя.

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

    Затем мы вводим стиль inline после таблицы стилей mediaelement, чтобы скрыть соответствующие части, такие как продолжительность и громкость :

    Разумеется, это можно было бы добавить к соответствующей таблице стилей.

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

    Теперь мы можем использовать параметр width внутри для аудиофайлов:

    Вывод:

    Протестировано по теме «Двадцать шестнадцать».

    Лучшие видео-плагины для WordPress 2020

    Поисковые системы регулярно ужесточают требования к сайтам по качеству контента и его размещению. Информационные ресурсы с текстовой информацией должны публиковать медиафайлы (изображения, видео, инфографику) для улучшения восприятия материала посетителями. Чтобы размещение роликов в WordPress было удобным, стоит рассмотреть самые популярные плагины за 2020 год.

    Рейтинг бесплатных видео-плагинов

    Easy Video Player

    Достаточно простой видео-плагин для WordPress, позволяющий осуществить демонстрацию медиаконтента с внешних источников и/или библиотеки платформы. В месте предположительного размещения файлов устанавливаются специальные шорткоды (добавляя атрибуты, можно установить режим воспроизведения, размеры плеера, настроить элементы управления и изменить шаблон). Для функционирования модулей используется библиотека jQuery.

    • поддержка форматов MP4, HTML5, изображений;
    • адаптация контента для мобильных устройств;
    • несколько параметров воспроизведения;
    • шаблоны для изменения внешнего вида плеера.

    Активных установок более 30 000. Средняя оценка – 4 балла. Ошибки, связанные с работоспособностью плагина, решаются при помощи обновлений или отдельных обращений в службу поддержки. Недостаток – присутствует водяной знак разработчиков.

    FV Flowplayer Video Player

    Представляет собой комплексное решение управления медиафайлами формата MP4 и FLV. Благодаря использованию передовых технологий, разработчики смогли обеспечить 98% совместимость со всеми существующими браузерами и мобильными устройствами. Также доступна коммерческая версия за 95 долларов (для одного сайта), добавляющая новые функции и удаляющая водяной знак с плеера.

    Особенности стандартного плагина:

    • поддержка MP4, HTML5, FLV, WebM;
    • редактируемый плей-лист со списком файлов;
    • адаптивный размер под любое расширение и устройство;
    • Flash fallback – модуль воспроизведения контента в старых браузерах;
    • удобная панель управления;
    • изменение внешнего вида проигрывателя.

    Приобретая платную версию, становятся доступными следующие функции:

    • интеграция интерактивных заставок в ролик;
    • установка всплывающих окон по завершени и воспроизведения;
    • встроенные кнопки социальных сетей.

    Доступно включение функции загрузки файлов посетителями, установка превью и запуск контента в полноэкранном режиме. Плагин установлен более 30 000 вебмастерами. Оценка – 4,5 балла. Негативные отзывы связаны с некоторыми сложностями использования и интеграцией ссылок со сторонних источников. В новой версии все проблемы исправлены.

    Топ-пост этого месяца:  Числа в JavaScript. Значение NaN
    Добавить комментарий
    28 июня 2010