Используйте WordPress, встроенный в mediaelement.js, чтобы встроить видео без бренда с помощью функции

Question

Используйте WordPress, встроенный в mediaelement.js, чтобы встроить видео без бренда с помощью функции

Я пытаюсь найти функцию, которая использует проигрыватель mediaelement.js для встраивания относительно безликих видео на YouTube.

Так как mediaelement.js встроен в WordPress, я, несомненно, смогу заменить встроенный код iframe на youtube, возвращаемый из oembed, на кодовый код для вставки api medialelement.

У меня есть 2000 видео на моем сайте, и заходить в каждое видео для изменения встраивания на YouTube, к сожалению, не вариант. Это должно быть возможно с помощью функции!

В моих тестах Mediaelement API, кажется, сосет на Ipad, поэтому я использовал оператор if, чтобы исключить устройства IOS. Используя небольшой Jquery, этот код хорошо работает в php-файле wordpress.

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
{
echo '<iframe width="560" height="315" src="//www.youtube.com/embed/TKgDzpc3lZ8?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>';
}
else
{
echo '<video controls="controls" id="youtube1">
<source type="video/youtube" src="//www.youtube.com/embed/TKgDzpc3lZ8"/>
</video>';
}
?>

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

function youtubeme($youtubeme) {
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
{

}
else
{
return (str_replace('<iframe width="750" height="422"', '<video controls="controls" id="youtube1"><source type="video/youtube" ', $youtubeme));
return (str_replace('?feature=oembed&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>', '"/></video>', $youtubeme));

}}

add_action('wp_embed', 'youtubeme');

Любая помощь будет очень признательна, так как я все еще учусь, и это заняло несколько часов боли.

//////РЕДАКТИРОВАТЬ//////

Это Jquery, который я использовал.

jQuery(document).ready(function($) {
$('#youtube1').mediaelementplayer({
alwaysShowControls: true,
// force iPad's native controls
iPadUseNativeControls: true,
// force iPhone's native controls
iPhoneUseNativeControls: true,
// force Android's native controls
AndroidUseNativeControls: true,
})});

2

mediaelement.js oembed php wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы были очень близко, в основном просто пропустили правильный крючок фильтра. Обратите внимание, что:

$html параметр является <iframe... HTML.
$url содержит анализируемый URL (youtu.be/... или же youtube.com/...).
$attr это объект с height а также width,
$html замена строки должна быть оптимизирована для работы с любым width/height; в этом примере я использую значения, сгенерированные одной темой, но она варьируется от одной к другой.
<video id="ID"> должен быть оптимизирован для работы с любым количеством вставок.
play значок показывает две версии: YouTube и MediaElement
Мне не удалось создать экземпляр MediaElement с $('#youtube1').mediaelementplayer() и использовал new MediaElementPlayer("#youtube1"),

add_filter( 'embed_oembed_html', 'oembed_so_26585894', 10, 4 );

function oembed_so_26585894( $html, $url, $attr, $post_ID )
{
$provider = parse_url( $url );

if( !in_array( $provider['host'], array('youtu.be','youtube.com') ) )
return $html;

if(
strstr($_SERVER['HTTP_USER_AGENT'],'iPhone')
|| strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
|| strstr($_SERVER['HTTP_USER_AGENT'],'iPad')
)
return $html;

$html = str_replace( '<iframe width="584" height="438"', '<video controls="controls" id="youtube1"><source type="video/youtube" width="640" height="360" ', $html );
$html = str_replace( '?feature=oembed" frameborder="0" allowfullscreen></iframe>', '"/></video>', $html );
$html .= '<script>jQuery(document).ready(function($) { var player = new MediaElementPlayer("#youtube1"); });</script>';
return $html;
}

И следующее, чтобы поставить в очередь необходимые скрипты / таблицу стилей:

add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-mediaelement', false, array('jquery'), false, true );
});

1