如何用“点击播放”缩略图取代YouTube视频？

时间：2012-11-26 作者：Richard

我使用了很多嵌入式视频（通过oembed) 这可以减缓页面加载速度。

有没有办法用缩略图（最好是帖子的特色图片）自动替换YouTube（和其他）视频。然后单击时将缩略图替换为视频iframe？

4 个回复
最合适的回答,由SO网友:brasofilo 整理而成

注：YouTube和Vimeo的解决方案使用视频提供商提供的特色图像或默认缩略图<iframe> 和<img> 尺寸，其他oEmbed

oEmbed, thumbnails and wordpress

用嵌入替换图像

https://stackoverflow.com/q/838878/1287812

插件

<?php
/**
 * Plugin Name: oEmbed Replace Iframe with AutoPlay-Image
 * Plugin URI: https://wordpress.stackexchange.com/q/73996/12615
 * Description: Replaces the iFrame embed with the Featured Image 
 * and if this not exists replaces with the Video Thumbnail
 * Version: 1.0
 * Author: brasofilo
 * Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
 */

//avoid direct calls to this file
if (!function_exists (\'add_action\')) {
        header(\'Status: 403 Forbidden\');
        header(\'HTTP/1.1 403 Forbidden\');
        exit();
}

add_filter( \'oembed_dataparse\', \'wpse_73996_oembed_click2play\', 10, 3 );

function wpse_73996_oembed_click2play( $return, $data, $url ) 
{
    // Create Unique ID, case more than one oembed is used in the page 
    // https://stackoverflow.com/questions/3656713/
    $uuid = gettimeofday();
    $uuid = mt_rand() . $uuid[\'usec\'];

    // Use Featured Image, if exists
    // This only works visually if 1 oEmbed per post is used
    $post_thumbnail_id = get_post_thumbnail_id( $_REQUEST[\'post\'] );
    if( $post_thumbnail_id )
    {
        $thumb = wp_get_attachment_image_src( $post_thumbnail_id, \'medium\' );
        $image = $thumb[0];
    }

    if( !$image ) 
        $image = $data->thumbnail_url; 

    // YouTube
    if ( $data->provider_name == \'YouTube\' ) 
    {
        $autoplay = str_replace(\'feature=oembed\', \'feature=oembed&autoplay=1\', $return );

        $return = \'<script type="text/javascript">var embedCode\' 
            . $uuid . \' = \\\'\'
            . $autoplay .\'\\\';</script><div id="videocontainer\' 
            . $uuid . \'"><img src="\'
            . $image
            . \'" onclick="document.getElementById(\\\'videocontainer\'
            . $uuid . \'\\\').innerHTML = embedCode\'
            . $uuid . \';" height="360" width="480" /></div>\';
    }

    // Vimeo
    elseif ( $data->provider_name == \'Vimeo\' ) 
    {
        $autoplay = str_replace(\'" width=\', \'?autoplay=1" width=\', $return );

        $return = \'<script type="text/javascript">var embedCode\'
            . $uuid . \' = \\\'\'
            . $autoplay . \'\\\';</script><div id="videocontainer\'
            . $uuid . \'"><img src="\'
            . $image
            .\'" onclick="document.getElementById(\\\'videocontainer\'
            . $uuid . \'\\\').innerHTML = embedCode\'
            . $uuid . \';" height="360" width="480" /></div>\';
    }
    return $return;
}
的内容$data 视频提供商返回
stdClass(
    type = \'video\'
    version = 1.0
    provider_name = \'Vimeo\'
    provider_url = \'http://vimeo.com/\'
    title = \'Earth\'
    author_name = \'Michael König\'
    author_url = \'http://vimeo.com/michaelkoenig\'
    is_plus = 1
    html = \'<iframe src="http://player.vimeo.com/video/32001208" width="540" height="304" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>\'
    width = 540
    height = 304
    duration = 300
    description = \'lorem ipsum\'
    thumbnail_url = \'http://b.vimeocdn.com/ts/307/031/307031094_295.jpg\'
    thumbnail_width = 295
    thumbnail_height = 166
    video_id = 32001208
)

stdClass(
    provider_url = \'http://www.youtube.com/\'
    thumbnail_url = \'http://i2.ytimg.com/vi/552yWya5RgY/hqdefault.jpg\'
    title = \'Tu cara me suena - Arturo Valls imita a Rihanna\'
    html = \'<iframe width="540" height="304" src="http://www.youtube.com/embed/552yWya5RgY?fs=1&feature=oembed" frameborder="0" allowfullscreen></iframe>\'
    author_name = \'antena3\'
    height = 304
    thumbnail_width = 480
    width = 540
    version = 1.0
    author_url = \'http://www.youtube.com/user/antena3\'
    provider_name = \'YouTube\'
    type = \'video\'
    thumbnail_height = 360
)

SO网友:pravdomil

以下是brasofilo插件的增强verison：

add_filter( \'oembed_dataparse\', function($str, $data, $url) {

    if ( ($yt = $data->provider_name == \'YouTube\') || ($vm = $data->provider_name == \'Vimeo\') ) 
    {
        if($yt) $html = str_replace(\'feature=oembed\', \'feature=oembed&autoplay=1\', $str);
        else $html = str_replace(\'" width=\', \'?autoplay=1" width=\', $str);

        $html = htmlentities($html, ENT_QUOTES);
        $img = $data->thumbnail_url; 
        $title = esc_attr($data->title);

        return \'<img src="\'. $img . \'" onclick="this.outerHTML=\\\'\' . $html . \'\\\'" title="\' . $title . \'">\';
    }

    return $str;

}, 10, 3);
Do not remember to clean oembed cache! 可以使用此SQL命令执行以下操作：

DELETE FROM wp_postmeta WHERE meta_key LIKE \'_oembed%\'
更多信息，请访问https://siteorigin.com/clearing-oembed-cache/

SO网友:user41133

这是一个好方法。。。但一个较少涉及的方法（对于我们这些经验较少的人来说）是使用this tutorial.

不要像YT（YouTube）所提供的那样插入YouTube嵌入代码（你可以尝试，但它将是ganky）。。。相反，只需将源代码从视频的嵌入代码替换为&amp;autoplay=1 （让它保持原样）。

例如：。

original code YT gives:

<object width="420" height="315">
    <param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Code used in tutorial with same YT src:

<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess"value="always" />
    <param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" />
    <embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
</object>
除此之外，只需将img源和路径替换为您自己的，瞧！

SO网友:Muhammad Azeem

请尝试此代码。只需复制并粘贴到HTML文件中。

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        var tag = document.createElement(\'script\');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName(\'script\')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player(\'player\', { // "player" id of youtube player container where video comes using youtube iframe api.
                height: \'390\',
                width: \'640\',
                videoId: \'M7lc1UVf-VE\',
                events: {
                    \'onReady\': onPlayerReady, // on ready event below callback function "onPlayerReady" will be called.
                }
            });
        }

        function onPlayerReady(event) { // as youtube player will ready
            $(\'#play_vid\').click(function() {  // it will wait to click on overlay/image
                event.target.playVideo();  // as overlay image clicked video plays.
            });
        }

        $(document).ready(function() {
            $(\'#player\').hide(); // on document ready youtube player will be hiden.
            $(\'#play_vid\').click(function() {  // as user click on overlay image.
                $(\'#player\').show();    // player will be visible to user 
                $(\'#play_vid\').hide(); // and overlay image will be hidden.
            });
        });
    </script>

    <div id="player"></div> <!-- Youtube player container -->
    <img id="play_vid" src="YOUR_IMAGE_PATH" /> <!-- overlay image that comes in front of youtube video. when user click on this, image will be hidden and video plays using youtube api.-->
</body>
</html>

结束
标签： thumbnails   youtube   oembed   小码农  

相关推荐

有没有办法阻止YouTube视频显示在主页上，而只显示在单独的帖子上？

我有一个有趣的问题，需要一些创造力来解决。我们有一个website 我们正在制作一段关于我们的儿子的视频，他出生时患有唐氏综合症。我们每天发一篇帖子，里面有一分钟的视频。在主页上，我展示了几篇最近的博客文章，其中有一个“阅读更多”链接，其中有几个段落是指向该文章的，有人可以单击该文章转到单个文章。我总是把视频放在帖子的顶部（这是我们的读者现在期望看到的），但在主页上可能会出现5-8个视频，这会让我的页面在等待从youtube获取所有这些视频的视频信息时变慢。我不知道最好的方法是什么。我想找到一种方法，使主