Question

我的HTML中有一些图片，我需要在点击每张图片时播放视频视频，这些视频应加载/播放jQuery UI dialog。基本上就像一个弹出视频播放器。

所以这就是我为每张图片播放/附加视频所做的工作。我有三张图片，我在我的自定义data-attribute中添加了唯一的视频ID。我从你的管中取出。

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>

注意：我使用you tube player API中的iframe embed方法嵌入视频。

对于JavaScript / jQuery部分，我在这里提出了两个选择。

1。因为我在ASP.NET MVC 3应用程序中工作，所以我可以在脚本中将唯一视频ID设置为@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分配新的视频ID 打开。

$('#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} }
    });        
});

我应该选择哪一个。我发现了一些参考文献，

我有什么方法可以让它在未来更加简化和可重复使用。请用你明智的意见来建议。

Answer 1

我没有迟到更新此帖子，但我设法通过extending jQuery's prototype object创建了一个或多个插件的方法。这是start learning的一个很好的链接。

// following is the method by extending the jQuery's prototype object
// to convert and embed an element into a video pop-up
(function ($) {

    $.fn.videoPlayer = function (options) {

        var defaults = $.extend({
            title: "",
            videoId: "",
            autoplay: 1
        }, 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);


$(function(){

  $('#VideoPlayerPopUp #Close').click(function () {
    $("#VideoCatcher").dialog("close");
  });

  $('#Entertainment .launch-video').click(function () {
    var element = $(this);

    $('#VideoCatcher').videoPlayer({
       title: element.attr('data-videoTitle'),
       videoId: element.attr('data-videoId')
    });
  });
});

我已将自定义HTML data-attributes用于视频标题和视频ID。这将保持HTML清洁和语义。您当然可以相应地设置/自定义弹出窗口。

访问this working demo以查看此操作。

在jQuery模式对话框中添加管播放器（iFrame）

HTML

1 个答案: