使用內置mediaelement.js的wordpress嵌入無牌YouTube視頻使用函數

Question

我試圖找到一個函數，使用mediaelement.js播放器嵌入相對無品牌的YouTube視頻。

由於mediaelement.js內置於Wordpress中，所以我可以用無鑲邊的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>'; 
} 
?> 

，因爲它應該在現在的目標是一個功能做到這一點，在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, 
})}); 

Answer 1

你非常接近，基本上只是錯過了正確的過濾器鉤子。請注意：

• $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); 
});