Cum să înlocuiești videoclipurile YouTube cu o miniatură "Click pentru redare"?

Question

Cum să înlocuiești videoclipurile YouTube cu o miniatură "Click pentru redare"?

26 nov. 2012, 22:24:20

Vizualizări: 28.2K

Voturi: 5

Folosesc multe videoclipuri încorporate (prin oembed) pe blogul meu, și acest lucru poate încetini încărcarea paginilor.

Există vreo modalitate de a înlocui automat videoclipurile YouTube (și alte videoclipuri) cu o miniatură (preferabil imaginea reprezentativă a articolului)? Și apoi să înlocuiesc miniatura cu iframe-ul video când este făcut click pe ea?

Richard

167

miniaturi youtube oembed

Comentarii

ar fi ok să apară videoclipul într-o fereastră popup la click? ar fi ok să folosim thumbnail-ul videoclipului?

Gaia

26 nov. 2012 23:05:28

@Richard Te rog să te întorci și să lucrezi (comentează, acceptă dacă are o soluție) la întrebările tale vechi.

kaiser

26 nov. 2012 23:58:00

Toate răspunsurile la întrebare

Comentarii

Omule, mulțumesc mult pentru asta! Nu ai idee cât de mult m-ai ajutat. Ar trebui să pui acest plugin pe site-ul wordpress.org.

Richard

27 nov. 2012 19:29:18

FYI: Am găsit un truc absurd de simplu pe Stackoverflow pentru suprapunerea imaginilor CSS <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" /> --> http://stackoverflow.com/questions/403478/css-how-to-overlay-images

Richard

27 nov. 2012 19:32:48

Da, m-am gândit la acea pictogramă de "play" suprapusă dar nu am căutat. Adiție frumoasă!

brasofilo

27 nov. 2012 19:36:08

nu reușesc să fac asta să funcționeze în versiunea 3.5, mai are cineva aceeași problemă?

chrismccoy

24 feb. 2013 23:33:08

Here is enhanced verison of brasofilo plugin:

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! You can use this SQL command to do that:

DELETE FROM wp_postmeta WHERE meta_key LIKE '_oembed%'

More info at https://siteorigin.com/clearing-oembed-cache/

pravdomil

121

4 mar. 2015 21:03:05

Aceasta este o metodă bună... dar una mai simplă (pentru cei mai puțin experimentați) ar fi să folosiți acest tutorial.

Nu introduceți codul de embed de la YouTube (YT) așa cum vi-l oferă (puteți încerca, dar va fi necorespunzător)... în schimb, înlocuiți doar sursa din codul de embed al videoclipului vostru PÂNĂ LA &autoplay=1 (lăsați acest parametru la final așa cum este).

exemplu:

codul original oferit de YT:

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

Cod folosit în tutorial cu aceeași sursă YT:

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

În afară de asta, înlocuiți doar sursa și calea imaginii cu ale voastre, și voilà!

user41133

1

30 oct. 2013 19:08:16

Încearcă acest cod. Doar copiază și lipește într-un fișier 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" este id-ul containerului player YouTube unde va apărea videoclipul folosind YouTube iframe API.
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady, // la evenimentul onReady va fi apelată funcția callback "onPlayerReady".
                }
            });
        }

        function onPlayerReady(event) { // când playerul YouTube este gata
            $('#play_vid').click(function() {  // așteaptă click pe overlay/imagine
                event.target.playVideo();  // când se face click pe imaginea overlay, videoclipul pornește.
            });
        }

        $(document).ready(function() {
            $('#player').hide(); // la încărcarea documentului, playerul YouTube va fi ascuns.
            $('#play_vid').click(function() {  // când utilizatorul face click pe imaginea overlay.
                $('#player').show();    // playerul va deveni vizibil utilizatorului 
                $('#play_vid').hide(); // iar imaginea overlay va fi ascunsă.
            });
        });
    </script>

    <div id="player"></div> <!-- Container pentru playerul YouTube -->
    <img id="play_vid" src="YOUR_IMAGE_PATH" /> <!-- imagine overlay care apare în fața videoclipului YouTube. Când utilizatorul face click pe ea, imaginea va fi ascunsă și videoclipul va porni folosind YouTube API. -->
</body>
</html>

Muhammad Azeem

101

19 mai 2015 14:54:20

Comentarii

Ce face exact acest cod, cum ar rezolva această problemă. Depune o [editare] și explică corect ce face codul tău și cum funcționează

Pieter Goosen

19 mai 2015 14:57:23

Codul a fost actualizat cu comentarii. La încărcarea paginii, videoclipul YouTube va fi ascuns și utilizatorului i se va afișa imaginea de suprapunere. Când utilizatorul face clic pe imagine, aceasta va fi ascunsă și videoclipul YouTube va fi redat și afișat utilizatorului.

Muhammad Azeem

27 mai 2015 18:31:05

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

Note

Soluție pentru YouTube și Vimeo.
Utilizează Imaginea Reprezentativă sau thumbnail-ul implicit de la furnizorul de video.
Dacă există mai multe oEmbed pe aceeași pagină, utilizarea Imaginii Reprezentative poate provoca duplicate ale "thumbnail-urilor".
Postarea trebuie actualizată înainte ca modificările să fie vizibile.
De făcut: dimensiunile <iframe> și <img>, alte tipuri de oEmbed.

Surse de Inspirație

oEmbed

oEmbed, thumbnail-uri și WordPress

Înlocuirea Imaginii cu Embed

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

Plugin

<?php
/**
 * Plugin Name: oEmbed Replace Iframe with AutoPlay-Image
 * Plugin URI: https://wordpress.stackexchange.com/q/73996/12615
 * Description: Înlocuiește embed-ul iFrame cu Imaginea Reprezentativă 
 * iar dacă aceasta nu există, o înlocuiește cu Thumbnail-ul Video
 * Version: 1.0
 * Author: brasofilo
 * Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
 */

//evită apeluri directe la acest fișier
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 ) 
{
    // Creează un ID Unic, în cazul în care sunt folosite mai multe oEmbed pe pagină 
    // https://stackoverflow.com/questions/3656713/
    $uuid = gettimeofday();
    $uuid = mt_rand() . $uuid['usec'];

    // Folosește Imaginea Reprezentativă, dacă există
    // Acest lucru funcționează vizual doar dacă este folosit un singur oEmbed pe postare
    $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;
}

Conținutul `$data` returnat de furnizorii de video

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
)

Cum să înlocuiești videoclipurile YouTube cu o miniatură "Click pentru redare"?

Note

Surse de Inspirație

oEmbed

Înlocuirea Imaginii cu Embed

Plugin

Conținutul $data returnat de furnizorii de video

Conținutul `$data` returnat de furnizorii de video