Question

我正在尝试使用mediaelement.js播放器来嵌入相对无品牌的YouTube视频。

由于mediaelement.js内置于Wordpress中，我可以用ompmbed替换从无格式的mediaelement api嵌入代码返回的youtube品牌iframe嵌入代码。

我的网站上有2000个视频，进入每个视频以更改youtube嵌入是遗憾的不是一个选项。这必须是一个功能！

在我的测试中，mediaelement api似乎在ipad上很糟糕，所以我使用了if语句来排除ios设备。使用一个小Jquery这个代码在wordpress php文件中运行良好。

<?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');

任何帮助都会非常感激，因为我还在学习，这已经有几个小时的痛苦了。

////// EDIT //////

这是我使用过的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,
})});

Answer 1

你非常接近，基本上只是错过了正确的过滤器钩子。请注意：

$html参数是<iframe... HTML。
$url包含要解析的网址（youtu.be/...或youtube.com/...）。
$attr是height和width的对象。
$html字符串替换应优化以适用于任何width/height;在这个例子中，我使用的是一个主题生成的值，但它们各不相同。
<video id="ID">应优化以适用于任意数量的嵌入。
play图标显示两个版本：YouTube和MediaElement的
我无法使用$('#youtube1').mediaelementplayer()实例化MediaElement并使用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 );
});

使用mediaelement.js中内置的wordpress使用函数嵌入brandless youtube视频

1 个答案: