Question

我已经修改了一些代码以允许弹出窗口中的视频，并且弹出窗口仅在我发出警报后正确地放置在左侧，右侧，顶部或底部。视频播放不是问题。我假设警报正在购买时间来获取坐标以确定弹出窗口应该在哪里。它可以完全正常地处理图像和文本而没有问题。

(function (diagram) { 
    $(document).ready(function () {

        var diagramData = window.svgpublish.diagramData;
        $.each(diagramData, function (shapeId, shapeData) {

            var props = shapeData.Props;
            if (!props)
                return;
            var $shape = $("#" + shapeId);


            // decorate the shape with "hand" cursor
            $shape.css("cursor", "pointer");

            // hide the popover hiding when clicked outside
            $('body').on('click', function (e) {
                $shape.popover('hide');
            });

            $shape.on('click', function (evt) { 
                evt.stopPropagation();
                //***** For Clicking the icon to show the popup ********//
                //$shape.popover('toggle');

            });

            $shape.on('mouseover', function () {
                $(this).attr('filter', 'url(#hover)');
                //***** For Mousing Over the icon to show the popup ********//
                $shape.popover('show');
                //$shape.popover('toggle');
            });

            $shape.on('mouseout', function () {
                $(this).removeAttr('filter');
                //***** For Mousing Out of the icon to hide the popup ********//
                //$shape.popover('toggle');
                $shape.popover('hide');
            });

            $shape.tooltip({
                container: "body",
                //title: props.title + ' - click to open/close'
            });

            var ImageOption = {
                placement: function (context, source) {
                    var position = $(source).position();
                    if (position.right > 500)
                        return "left";
                    if (position.left < 500)
                        return "right";
                    if (position.top < 300)
                        return "bottom";
                    return "top";
                },
                trigger: "manual",
                container: "html",
                html: true,
                content: '<img src="'+props.image_path+'"></img>'
            };

            var VideoOption = {
                placement: function (context, source) {
                    var position = $(source).position();
                    alert(position.left);
                    if (position.right > 500)
                        return "left";
                    if (position.left < 500)
                        return "right";
                    if (position.top < 300)
                        return "bottom";
                    return "top";
                },
                trigger: "manual",
                container: "html",
                html: true,
                content: '<video autoplay>' +
                '<source src="'+props.video_path+'" type="video/mp4"></source>' +
                '</video>'
            };

            if (props.eB_Image == "yes"){
                //alert("we have an image");
                $shape.popover(ImageOption);
            };

            if (props.eB_Video == "yes"){
                //alert("we have a video");
                $shape.popover(VideoOption);
            };
        });
    });
})(window.svgpublish);

你知道为什么会这样吗？是因为加载视频需要一段时间，我应该加载它吗？

我已经搞乱了近10个小时，我不知道为什么会这样。

有没有人有任何建议？我已经研究过这个问题，似乎没有任何解决方案可以在这里工作。

谢谢。

功能仅在我添加警报时有效

0 个答案: