Добавление туб-плеера (iFrame) в модальное диалоговое окно jQuery

0

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

Итак, вот что я сделал для воспроизведения/прикрепления видео с каждым изображением. У меня есть три изображения, и я добавил уникальный идентификатор видео в свой пользовательский data-attribute который я взял из трубки.

HTML

<div id="ImageBox">
 <img src="img1.png" class="playVideo" alt="" id="image1" data-videoId="v6jg8g"/>
 <img src="img2.png" class="playVideo" alt="" id="image2" data-videoId="re84hj"/>
 <img src="img3.png" class="playVideo" alt="" id="image3" data-videoId="dhj3fk"/>
</div>

<!-- HTML for jQuery modal dialog -->
<div id="MyVideoPlayer">
    <div>
        <strong id="videoTitle">title for video</strong>
        <img src="closeButton.png" id="Close" alt="Close" />
    </div>
    <iframe src="https://www.youtube.com/embed/MyVideoId?wmode=opaque&autoplay=1&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1" id="Player" width="100%" height="100%"></iframe>
</div>

Примечание. Я использую метод iframe embed из API-интерфейсов для проигрывателя.

В разделе JavaScript/jQuery у меня есть два варианта.

1. Поскольку я работаю в приложении ASP.NET MVC 3, я могу установить уникальный идентификатор видео в @ViewBag в скрипте и назначить iFrame вот так...

$('#ImagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');
    '@ViewBag.VideoId' = myId;
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });       
});

2. Назначьте обновленный iFrame src новым идентификатором видео каждый раз, когда открывается диалог.

$('#imagesBlock .playVideo').click(function(){
    var myId = $(this).attr('data-videoId');

    var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
        &showinfo=0&controls=2&rel=0&enablejsapi=1';

    $('#MyVideoPlayeriframe').attr('src', src);     
    $('#MyVideoPlayer').dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} }
    });        
});

С кем мне пойти. Я нашел некоторые ссылки, хотя,

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

Теги:
jquery-ui-dialog

1 ответ

1
Лучший ответ

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

Следующим является мой настраиваемый плагин jQuery для создания всплывающего видеопроигрывателя.

(function ($) {

$.fn.videoPlayer = function (options) {

    var defaults = $.extend({
        title: "",
        videoId: "",
        autoplay: 1
        //more default options can be set here!
    }, options);

    var videoBox = this.find('#VideoBox');
    var videoElement = document.createElement('iframe');
    var src = 'https://www.youtube.com/embed/' + defaults.videoId + '?wmode=opaque&autoplay=' + defaults.autoplay +
        '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';

    this.find('#VideoTitle').text(defaults.title);
    $(videoElement).attr({
        'src': src,
        'frameborder': 0,
        'width': '100%',
        'height': '90%'
    });

    videoBox.html(videoElement);

    this.dialog(
        { width: 'auto' },
        { height: 'auto' },
        { draggable: false },
        { resizable: false },
        { closeOnEscape: false },
        { modal: true },
        { show: { effect: "fade", duration: 200} },
        { hide: { effect: "fade", duration: 250} },
        { close: function (event, ui) {
            $(videoElement).remove();
            $(this).dialog('destroy');
        }
        });

    //making the method chainable!
    return this;
};

})(jQuery);

Я использовал пользовательские атрибуты данных HTML для названия видео и видео.

<div id="ImagesBlock">

  <img src="Img-1.png" alt="Image1" id="Image1" data-videoId="V8_wEZD160g" data-videoTitle="Video 1"/>

  <img src="Img-2.png" alt="Image2" id="Image2" data-videoId="M7lc1UVf-VE" data-videoTitle="Video 2"/>

  <img src="Img-3.png" alt="Image3" id="Image3" data-videoId="GNb8T5NBdQg" data-videoTitle="Video 3"/>

</div>

Это сделает HTML более чистым, а код - близким к родовому. Вам нужно стилизовать/настроить всплывающее окно в соответствии с вашими потребностями.

Применение:

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

$(function(){
  $('#ImagesBlock img').click(function () {
    var title = $(this).attr('data-videoTitle');
    var id = $(this).attr('data-videoId');

    $('#VideoCatcher').videoPlayer({
       title: title,
       videoId: id
    });
  });
});

Короче говоря, это полная РАБОЧАЯ ДЕМО со всем стилем и настройкой (перейдите к ссылке на редактирование в демо для более подробной информации).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню