Замена изображения с видео на клике

Question

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

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

Есть ли способ сделать это с помощью jQuery?

Answer 1

Если вы не возражаете против включения загрузки видео, я бы вставил изображение и видео и скрыл видео при запуске.затем привязайте обработчик кликов к изображению, которое скроет изображение и покажет видео.

var $image = $('#myimage');
var $video = $('#myvideo'); // hide #myvideo with css

$(function(){
    $image.on('click', function(){
        $image.hide();
        $video.show();
    });
});

Answer 2

Есть несколько способов сделать это, но в разных браузерах часто возникают причуды, с которыми вам, возможно, придется работать.

Один из способов - вставить проигрыватель на страницу в представлении, котороескрытый со стилем (отображение: нет).Для этого проигрывателю может потребоваться установить свойство wmode во встроенной флэш-памяти в значение «прозрачный».Затем вы можете скрыть изображение и показать встраивание в том же месте с помощью методов jquery hide и show:

$('#img-el').click( function () {
    $(this).hide();
    $('#player-embed-div').show();
});

Другой способ сделать это - использовать SWFObject (http://code.google.com/p/swfobject/) для динамического встраивания видео при нажатииизображение:

$('#img-el').click( function () {
    var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
    so.write("img-el"); 
});

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

Answer 3

Вы можете заменить изображение на <div> при нажатии, а затем настроить видеоплеер следующим образом: http://jsfiddle.net/hxaZx/.

$("img").click(function() {
    var $div = $("<div>").text("this is the div to use for video");

    $(this).replaceWith($div);

    // jwplayer($div.get(0)).setup({ ... });
});

Answer 4

Некоторое время назад я искал способ превратить миниатюры видео в формате jpeg на YouTube в ссылку для увеличения и открытия плеера, подобно тому, как Facebook показывает видео в ленте новостей.

Решение, которое я использовал (что, безусловно, не совсем так, но сработало для меня), похоже на ответ Pimvdb.

У меня просто была другая страница, на которой был встроен код проигрывателя YouTube (динамически заполняемыйправильное видео, передав переменную в URL), а затем загрузив его с помощью jquery.load

$('#imageElement').live("click", function () {
    $('#currentlyHiddenVideoDiv').load('videoPage.asp?vidid=idOfVideoToPlay').show()
}

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

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