Подтвердить что ты не робот

Встроенное видео на YouTube: установите различные значки

Я хочу встроить видео с YouTube, которое не является моим (поэтому я не могу его изменить на YouTube), и у него есть миниатюра, которая не является репрезентативной для видео (я имею в виду начальную запись, которая отображается, когда вы вставляете видео, которое отображается перед воспроизведением пользователем). Есть ли способ установить время по-прежнему, например (попытался передать? S = XXX, но это не работает)? Или другой способ, который исходит от YouTube?

4b9b3361

ОТВЕТЫ

Ответ 1

Нет. В большинстве видеороликов YouTube есть только один предварительно созданный миниатюра плаката (480x360). У них обычно есть несколько других уменьшенных изображений (120x90). Таким образом, даже если бы был параметр внедрения, чтобы использовать альтернативное изображение плаката (которого нет), результат не будет приемлемым.

Теоретически вы можете использовать API-интерфейс проигрывателя для поиска видео в любом месте, которое вы хотите, но это будет серьезным взломом для незначительного результата.

Ответ 2

Там хорошо обходное решение для этого в сайтах сайта:

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
   <img src="my_thumbnail.png" style="cursor:pointer" />
</div>
<div style="display:none">
    <!-- Embed code here -->
</div>

Примечание. Чтобы не нажимать дважды, чтобы воспроизвести видео, используйте autoplay=1 в коде для встраивания видео. Он начнет воспроизведение, когда отобразится второй div.

Ответ 3

Ответы не помогли мне. Возможно, они устарели.

В любом случае, нашел этот сайт, который выполняет всю работу за вас, и даже не позволяет вам читать нечеткую, как обычно, документацию Google: http://www.classynemesis.com/projects/ytembed/

Ответ 4

Просто скопируйте и вставьте код в файл HTML. и наслаждайтесь счастливым кодированием. Использование Youtube api для управления миниатюрами встроенного видео youtube.

<!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', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                }
            });
        }

        function onPlayerReady(event) {
            $('#play_vid').click(function() {
                event.target.playVideo();
            });
        }

        $(document).ready(function() {
            $('#player').hide();
            $('#play_vid').click(function() {
                $('#player').show();
                $('#play_vid').hide();
            });
        });
    </script>

    <div id="player"></div>
    <img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>

Ответ 5

Лучше всего использовать учебник по http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289. Это обеспечит отсутствие двойного щелчка и видео YouTube не будет автоматически воспроизводиться за вашим изображением до щелчка.

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

, например).

Исходный код 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>`

Код, используемый в учебнике с тем же 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 на свой собственный, и voilà!

Ответ 6

У меня возникли проблемы с автовоспроизведением из решения waldir... с помощью автовоспроизведения видео воспроизводилось при загрузке страницы, а не при отображении div.

Это решение работало для меня, кроме того, что я заменил

<a class="introVid" href="#video">Watch the video</a></p>

с

<a class="introVid" href="#video"><img src="images/NEWTHUMB.jpg" style="cursor:pointer" /></a>

чтобы вместо текстовой ссылки использовать уменьшенное изображение.

Ответ 7

Используя концепцию из waldyrious answer, я создал следующее решение, которое также решает проблему воспроизведения видео позади изображения при восстановлении табуляции или с помощью кнопки назад браузера, чтобы вернуться на страницу с видео.

HTML

<div class="js-video-lead">
  <img class="hide" src="link/to/lead/image.jpg" />
  <iframe frameborder="0" height="240" src="https://www.youtube.com/embed/<code here>" width="426"></iframe>
</div>

Класс "hide" находится из Bootstrap и просто применяет display: none;, чтобы изображение не было видно при загрузке страницы, если JavaScript отключен.

JavaScript

function video_lead_play_state(element, active)
{
    var $active = $(element).closest(".js-video-lead").find(".btn-play-active");
    var $default = $(element).closest(".js-video-lead").find(".btn-play-default");

    if (active) {
        $active.show();
        $default.hide();
    } else {
        $active.hide();
        $default.show();
    }
}


$(document).ready(function () {
    // hide the videos and show the images
    var $videos = $(".js-video-lead iframe");
    $videos.hide();
    $(".js-video-lead > img").not(".btn-play").show();

    // position the video holders
    $(".js-video-lead").css("position", "relative");

    // prevent autoplay on load and add the play button
    $videos.each(function (index, video) {
        var $video = $(video);

        // prevent autoplay due to normal navigation
        var url = $video.attr("src");
        if (url.indexOf("&autoplay") > -1) {
            url = url.replace("&autoplay=1", "");
        } else {
            url = url.replace("?autoplay=1", "");
        }
        $video.attr("src", url).removeClass(
            "js-video-lead-autoplay"
        );

        // add and position the play button
        var top = parseInt(parseFloat($video.css("height")) / 2) - 15;
        var left = parseInt(parseFloat($video.css("width")) / 2) - 21;
        var $btn_default = $("<img />").attr("src", "play-default.png").css({
            "position": "absolute",
            "top": top + "px",
            "left": left + "px",
            "z-index": 100
        }).addClass("btn-play btn-play-default");
        var $btn_active = $("<img />").attr("src", "play-active.png").css({
            "display": "none",
            "position": "absolute",
            "top": top + "px",
            "left": left + "px",
            "z-index": 110
        }).addClass("btn-play btn-play-active");
        $(".js-video-lead").append($btn_default).append($btn_active);
    });


    $(".js-video-lead img").on("click", function (event) {
        var $holder = $(this).closest(".js-video-lead");
        var $video = $holder.find("iframe");
        var url = $video.attr("src");
        url += (url.indexOf("?") > -1) ? "&" : "?";
        url += "autoplay=1";
        $video.addClass("js-video-lead-autoplay").attr("src", url);
        $holder.find("img").remove();
        $video.show();
    });

    $(".js-video-lead > img").on("mouseenter", function (event) {
        video_lead_play_state(this, true);
    });

    $(".js-video-lead > img").not(".btn-play").on("mouseleave", function (event) {
        video_lead_play_state(this, false);
    });
});

jQuery требуется для этого решения, и он должен работать с несколькими встроенными видео (с разными изображениями) на той же странице.

В коде используются два изображения play-default.png и play-active.png, которые являются маленькими (42 x 30) изображениями кнопки воспроизведения YouTube. play-default.png черный с некоторой прозрачностью и отображается на начальном этапе. play-active.png красный, и отображается, когда пользователь перемещает мышь над изображением. Это подражает ожидаемому поведению, которое демонстрирует обычное встроенное видео YouTube.

Ответ 8

Этот инструмент дал мне следующие результаты, которые помогают мне выполнить задачу как следующий код.

<div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://example.com/image.jpg') no-repeat center;overflow:hidden;cursor:pointer;"></div>
<script type="text/javascript">
    function play(){
        document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xxxxxxxxx?autoplay=1" frameborder="0"></iframe>';
    }
</script>