Как встроить аудио и видео плееры в WordPress

1. Загрузить и вставить
2. Что вы получите
3. Как это сделать
4. Типы файлов
5. Видео Соображения
6. Использование URL
7. Использование шорткодов
8. Встраивание с других сайтов
9. Заключение

Устаревший : информация в этой статье устарела. Смотрите наш Медиа Встраивает руководство вместо Он показывает вам, как работают блоки встраивания медиа в WordPress 5.0.

WordPress 3.6 был выпущен, и одна из его лучших новых функций - возможность встраивать аудио и видео проигрыватели для загруженных медиафайлов непосредственно в контент поста или страницы. Отлично MediaElement.js Библиотека JavaScript используется для вывода проигрывателя HTML5 или Flash, в зависимости от браузера и устройства, для почти полной совместимости. Это очень уважаемый скрипт, и теперь он включен в ядро ​​WordPress для собственной функциональности и для использования авторами тем / плагинов.

При подготовке руководств к предстоящему запуску churchthemes.com, я был удивлен, что не нашел нескольких учебных пособий, объясняющих обычным пользователям, как они могут использовать эту новую функцию. Как раз этим утром клиент спросил меня, можно ли показать плеер для загруженного файла MP3. Ответ несколько недель назад был бы использовать плагин. Сегодня ответ - да, WordPress может это сделать. Вот как.

Загрузить и вставить

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

Что вы получите

Вот выдержка из Джона Пайпера Наследие Антиохии проповедь.

https://churchthemes.com/wp-content/uploads/2013/08/john-piper.mp3

А теперь видео о ветряных мельницах ...

Как это сделать

Процесс похож на вставку изображения в ваш контент.

1. Добавьте или отредактируйте страницу или сообщение.

2. Нажмите на свое содержимое, где вы хотите, чтобы проигрыватель появился, затем нажмите « Добавить медиа» над редактором содержимого.

3. Нажмите Загрузить файлы .

4. Загрузите аудио или видео файл.

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

6. Нажмите Вставить на страницу .

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

Типы файлов

MP3 для аудио и MP4 для видео довольно стандартны, но проигрыватель MediaElement.js поддерживает все эти типы файлов.

• WebM
• ОГВ
• mp4 / m4v
• WMV
• мы / кварты
• FLV
• mp3 / m4a / m4b
• OGG / Ог
• WMA
• WAV

Видео Соображения

Имейте в виду, что видеофайлы часто имеют очень большой размер. Обычно рекомендуется размещать видео на таких сервисах, как YouTube или Vimeo, поскольку их серверы оптимизированы для потоковой передачи видео. Это также сэкономит вам место на диске и пропускную способность. См. Внедрение с других сайтов ниже.

Использование URL

Может быть, вы загрузили аудио или видео файл на другой сервер, скажем Amazon S3 или файлообменник. В этом случае вы не можете использовать процесс выше. Вместо этого просто укажите URL-адрес файла в вашем контенте. WordPress прочитает его расширение (например, .mp3), а затем автоматически покажет медиаплеер. Просто введите URL-адрес вашего медиа-файла (без ссылки) в отдельной строке.

http://sample-content.churchthemes.com/resurrect/uploads/2013/06/sample.mp3

Это автоматически произведет это, играя с другого сервера.

http://sample-content.churchthemes.com/resurrect/uploads/2013/06/sample.mp3

Использование шорткодов

Возможно, вы заметили, если просматриваете свой контент в текстовом режиме, что медиапроигрыватель создается с помощью шорткода аудио или видео. Вы можете использовать шорткод напрямую с набором атрибутов для еще большего контроля над тем, как MediaElement.js отображает проигрыватель. Читать Скотта Тейлора Поддержка аудио / видео в Core опубликовать в блоге WordPress Core примеры коротких кодов.

Встраивание с других сайтов

Считайте это бонусом. Вы также можете добавить видео с сайта, такого как YouTube. Это было возможно до WordPress 3.6 с очень удобной функцией под названием Встраивание , Это не ново, но я считаю, что многие пользователи совершенно не знают об этом и пытаются скопировать / вставить блоки HTML-кода для встраивания, что часто требует помощи плагина. Это слишком много работы! Вместо этого просто вставьте URL-адрес страницы с видео.

Например, на YouTube есть видео на http://www.youtube.com/watch?v=mmRPSoDrrFU что вы хотите встроить. Просто вставьте его в свой контент в отдельной строке, и проигрыватель YouTube будет отображаться на своем месте при публикации. Убедитесь, что URL не связан.

http://www.youtube.com/watch?v=mmRPSoDrrFU

Эта простая строка выше становится такой:

Вот один из SoundCloud, чтобы продемонстрировать широкий спектр поддерживаемых сайтов.

https://soundcloud.com/hillsongmusic/cornerstone-1

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

Заключение

Так что это все довольно круто. WordPress теперь имеет огромный спектр поддержки для локального и внешнего размещения аудио и видео. Наши темы на churchthemes.com все адаптивные (для мобильных устройств), поэтому я разработал некоторый код, чтобы сделать большинство встраиваемых WordPress также адаптивными (измените размер своего браузера, чтобы увидеть его в действии в этом посте). Я надеюсь поделиться этим с разработчиками темы в следующем посте.

Наследие Антиохии видео и аудио от Джона Пайпера. © 2012 Фонд желающих Бога. Веб-сайт: desiringGod.org , Используется с разрешения.