Запустите / воспроизведите встроенное (iframe) YouTube-видео по клику изображения - PullRequest
Новая
       19

Запустите / воспроизведите встроенное (iframe) YouTube-видео по клику изображения

47 голосов
/ 06 июня 2011

Я пытаюсь начать воспроизведение встроенного видео на YouTube, щелкнув изображение.Идея состоит в том, чтобы поместить изображение поверх видео, и когда оно щелкается, оно затухает и начинает воспроизводить видео.

Я использую jquery для исчезновения изображения, и надеялся найтиспособ воспроизведения или нажмите видео с помощью JQuery, а также.

Затухание работает нормально, но я не могу понять, как запустить видео для воспроизведения.Я заставил его работать в нескольких браузерах, настроив автозапуск видео и скрыв его, а затем добавив к нему видео при нажатии на изображение.В большинстве браузеров видео воспроизводилось автоматически при исчезновении, но в chrome оно начинало воспроизводиться автоматически, даже когда оно было скрыто.В iOS это тоже не сработало.

Поскольку я довольно новичок в этом, я даже не уверен, что пишу это на 100% правильно, но я пробовал что-то подобное безуспех: 

     $('#IMAGE').click(function() { $('#VIDEO').play(); });

Итак, как бы я хотел, чтобы видео проигрывалось при нажатии на изображение?Можно ли воспроизвести видео при нажатии на изображение, просто используя jquery?

Заранее спасибо.

Ответы [ 7 ]

48 голосов
/ 06 апреля 2012

Быстрый и грязный способ - просто заменить iframe на тот, у которого autoplay=1 установлено с помощью jQuery.

HTML

Заполнитель: 

<div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

Ссылка для автоигры: 

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

JQUERY

Улавливатель onClick, вызывающий функцию 

jQuery('a.introVid').click(function(){
  autoPlayVideo('VIDEO_ID_HERE','450','283');
});

Функция 

/*--------------------------------
  Swap video with autoplay video
---------------------------------*/

function autoPlayVideo(vcode, width, height){
  "use strict";
  $("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}
21 голосов
/ 24 мая 2013

Вы можете сделать это просто так 

$('#image_id').click(function() {
  $("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1'); 
});

, где image_id - это идентификатор вашего изображения, на который вы нажимаете, а some_id - это идентификатор div, в котором iframeтакже вы можете напрямую использовать iframe id.

11 голосов
/ 13 февраля 2015

Для начала видео 

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);

Для остановки видео 

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

Возможно, вы захотите заменить "& autoplay = 1" на "? Autoplay = 1", если нет дополнительных параметров

работает как для Vimeo, так и для YouTube в FF и Chrome

4 голосов
/ 21 июля 2011

Предполагается, что вы сможете указать домен, безопасный для сценариев. в документе API упоминается «В качестве дополнительной меры безопасности вы должны также включить параметр источника в URL» http://code.google.com/apis/youtube/iframe_api_reference.html SRC = "http://www.youtube.com/embed/J---aiyznGQ?enablejsapi=1&origin=mydomain.com" будет источником вашего iframe.

однако это не очень хорошо задокументировано. Я сейчас пытаюсь что-то подобное.

2 голосов
/ 12 июля 2016

Пример YouTube iframe 

<iframe id="video" src="https://www.youtube.com/embed/xNM7jEHgzg4" frameborder="0"></iframe>

Клик для воспроизведения элемента HTML 

<div class="videoplay">Play</div>

код jQuery для воспроизведения видео 

$('.videoplay').on('click', function() {
    $("#video")[0].src += "?autoplay=1";
});

Благодаря https://codepen.io/martinwolf/pen/dyLAC

1 голос
/ 12 апреля 2016

Код HTML: - 

<a href="#" id="playerID">Play</a>
<iframe src="https://www.youtube.com/embed/videoID" class="embed-responsive-item" data-play="0" id="VdoID" ></iframe>

Код Jquery: - 

$('#playerID').click(function(){
    var videoURL = $('#VdoID').attr('src'),
    dataplay = $('#VdoID').attr('data-play');

    //for check autoplay
    //if not set autoplay=1
    if(dataplay == 0 ){
        $('#VdoID').attr('src',videoURL+'?autoplay=1');
        $('#VdoID').attr('data-play',1);
     }
     else{
        var videoURL = $('#VdoID').attr('src');
        videoURL = videoURL.replace("?autoplay=1", "");
        $('#VdoID').prop('src','');
        $('#VdoID').prop('src',videoURL);

        $('#VdoID').attr('data-play',0);
     }

});

Вот и все!

0 голосов
/ 23 ноября 2013

Это должно работать идеально, просто скопируйте этот код div 

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer;" alt="" src="http://oi59.tinypic.com/33trpyo.jpg" />
</div>
<div id="thevideo" style="display: none;">
<embed width="631" height="466" type="application/x-shockwave-flash" src="https://www.youtube.com/v/26EpwxkU5js?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
</div>
...