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

Question

我正在尝试找到一个使用 mediaelement.js 播放器来嵌入相对无品牌的 youtube 视频的功能。

由于 mediaelement.js 是内置在 Wordpress 中的，我当然可以用 chromeless mediaelement api 嵌入代码替换从 oembed 返回的 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>';
}
?>

因此，现在的目标是使用函数执行此操作，并在将 youtube 嵌入发送到浏览器之前将其替换为 str_replace。这是我到目前为止所拥有的，我很清楚我的体重超过了我的体重：

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,
})});

Answer 1

您非常接近，基本上只是缺少正确的过滤器挂钩。请注意：

• $html 参数是<iframe... HTML。

• $url 包含正在解析的 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 );
});