Как заменить видео YouTube на миниатюру "Нажмите для воспроизведения"?

Question

Как заменить видео YouTube на миниатюру "Нажмите для воспроизведения"?

26 нояб. 2012 г., 22:24:20

Просмотры: 28.2K

Голосов: 5

Я использую много встроенных видео (через oembed) в своем блоге, и это может замедлять загрузку страниц.

Есть ли способ автоматически заменять видео YouTube (и другие) на миниатюру (желательно установленную миниатюру записи), а затем при клике заменять миниатюру на iframe видео?

Richard

167

миниатюры youtube oembed

Комментарии

Можно ли открывать видео во всплывающем окне при клике? Можно ли использовать миниатюру видео?

Gaia

26 нояб. 2012 г. 23:05:28

@Richard Пожалуйста, вернитесь и доработайте (прокомментируйте, отметьте как решённое, если есть решение) свои старые вопросы.

kaiser

26 нояб. 2012 г. 23:58:00

Все ответы на вопрос

Комментарии

Чувак, огромное тебе спасибо за это! Ты даже не представляешь, насколько это мне помогло. Тебе стоит выложить этот плагин на сайт wordpress.org.

Richard

27 нояб. 2012 г. 19:29:18

К твоему сведению: я нашел невероятно простой трюк на Stackoverflow для наложения изображений через CSS <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" /> --> http://stackoverflow.com/questions/403478/css-how-to-overlay-images

Richard

27 нояб. 2012 г. 19:32:48

Да, я думал об этой иконке "play" для наложения, но не искал. Отличное дополнение!

brasofilo

27 нояб. 2012 г. 19:36:08

Не получается заставить это работать в версии 3.5, у кого-нибудь ещё есть такая проблема?

chrismccoy

24 февр. 2013 г. 23:33:08

Вот улучшенная версия плагина brasofilo:

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

Не забудьте очистить кеш oembed! Для этого можно использовать следующую SQL-команду:

DELETE FROM wp_postmeta WHERE meta_key LIKE '_oembed%'

Подробнее на https://siteorigin.com/clearing-oembed-cache/

pravdomil

121

4 мар. 2015 г. 21:03:05

Это хороший метод... но для тех, у кого меньше опыта, можно воспользоваться этим руководством.

Не вставляйте код для вставки YouTube, который предоставляет YT (YouTube) (можно попробовать, но он будет работать некорректно)... вместо этого просто замените источник из кода вставки вашего видео ДО &autoplay=1 (оставьте это в конце как есть).

Например:

оригинальный код от YouTube:

<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>

Код, используемый в руководстве с тем же источником YouTube:

<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>

Кроме этого, просто замените источник и путь изображения на свои, и вуаля!

user41133

1

30 окт. 2013 г. 19:08:16

Попробуйте этот код. Просто скопируйте и вставьте в 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" - идентификатор контейнера для плеера YouTube, куда загружается видео через YouTube Iframe API.
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady, // При готовности плеера будет вызвана функция обратного вызова "onPlayerReady".
                }
            });
        }

        function onPlayerReady(event) { // Когда плеер YouTube будет готов
            $('#play_vid').click(function() {  // Ожидание клика по оверлею/изображению
                event.target.playVideo();  // После клика по оверлейному изображению видео начнет воспроизводиться.
            });
        }

        $(document).ready(function() {
            $('#player').hide(); // При загрузке документа плеер YouTube будет скрыт.
            $('#play_vid').click(function() {  // При клике пользователя по оверлейному изображению.
                $('#player').show();    // Плеер станет видимым для пользователя.
                $('#play_vid').hide(); // Оверлейное изображение будет скрыто.
            });
        });
    </script>

    <div id="player"></div> <!-- Контейнер для плеера YouTube -->
    <img id="play_vid" src="YOUR_IMAGE_PATH" /> <!-- Оверлейное изображение, которое отображается поверх видео. При клике оно скрывается, и видео воспроизводится с помощью YouTube API. -->
</body>
</html>

Muhammad Azeem

101

19 мая 2015 г. 14:54:20

Комментарии

Что именно делает этот код и как он решает проблему? Сделайте [правку] и подробно объясните, что делает ваш код и как он работает.

Pieter Goosen

19 мая 2015 г. 14:57:23

Код обновлен с комментариями. При загрузке страницы видео с YouTube будет скрыто, а пользователю будет показано наложенное изображение. Когда пользователь кликнет по изображению, оно скроется и начнется воспроизведение видео с YouTube, которое будет показано пользователю.

Muhammad Azeem

27 мая 2015 г. 18:31:05

brasofilo 22.1K · Accepted Answer · 2012-11-27T01:13:12Z

Примечания

Решение для YouTube и Vimeo.
Использует миниатюру записи или стандартную миниатюру от видеопровайдера.
Если на одной странице используется несколько oEmbed, использование миниатюры записи вызывает дублирование "миниатюр".
Запись должна быть обновлена перед тем, как изменения станут видны.
В планах: размеры <iframe> и <img>, другие oEmbed.

Источники вдохновения

oEmbed

oEmbed, миниатюры и 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: Заменяет встраиваемый iframe на миниатюру записи 
 * и если её нет, заменяет на миниатюру видео
 * Version: 1.0
 * Author: brasofilo
 * Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
 */

//избегаем прямых вызовов этого файла
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 ) 
{
    // Создаем уникальный ID, если на странице используется несколько oEmbed
    // https://stackoverflow.com/questions/3656713/
    $uuid = gettimeofday();
    $uuid = mt_rand() . $uuid['usec'];

    // Используем миниатюру записи, если она существует
    // Визуально работает только если на запись используется один oEmbed
    $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
)

Как заменить видео YouTube на миниатюру "Нажмите для воспроизведения"?

Примечания

Источники вдохновения

oEmbed

Замена изображения на встраиваемый контент

Плагин

Содержимое $data, возвращаемое видеопровайдерами

Содержимое `$data`, возвращаемое видеопровайдерами