javascript-PhotoSwipe视频

我想将视频添加到我的PhotoSwipe画廊.

我在这里阅读了文档：
http://photoswipe.com/documentation/custom-html-in-slides.html

不幸的是,我不明白这意味着什么：
“如果确实需要在PhotoSwipe中播放视频,则可以将其添加为模态
当用户点击当前幻灯片时显示的内容,您可以动态创建
DOM中的模式,并将其附加到.pswp__scroll-wrap元素之后.”

有没有人成功地使视频与PhotoSwipe一起可靠地工作？

编辑：我已经尝试过此操作(最后一张幻灯片是视频)：http://pixelkrams.de/2015/artspin在桌面上工作,但在移动设备上中断(视频无法启动并且其大小错误).
相关代码：http://pixelkrams.de/js/main.js

PhotoSwipe初始化的摘录：

    // Pass data to PhotoSwipe and initialize it
    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, dataLarge, options);
    gallery.init();
    gallery.listen('afterChange', function() {
        detectVideo(gallery);
    });

    gallery.listen('beforeChange', function() {
       removeVideo();
    });
   gallery.listen('resize', function() { 
       if ($('.videoHolder').length > 0) updateVideoPosition(gallery);
   });
   gallery.listen('close', function() {
       removeVideo();
   });

   detectVideo(gallery);

以及视频的相关功能：

function removeVideo() {
    if ($('.videoHolder').length > 0) { 
        if ($('#video').length > 0) {
            $('video')[0].pause();
            $('video')[0].src = "";
            $('.videoHolder').remove();
            $('.pswp__img').css('visibility','visible');
        } else {
            $('.videoHolder').remove();
        }
    }
}

function detectVideo(gallery) {
    var src = gallery.currItem.src;
    if (src.indexOf('video')>= 0) {
        addVideo(gallery.currItem);
        updateVideoPosition(gallery);
    }
}
function addVideo(item, vp) {
    var videofile = item.src.split(".");
    var v = $('<div />', {
                class:'videoHolder',
                css : ({'position': 'absolute','width':item.w, 'height':item.h})

    });
    v.one('click touchstart', (function() {
        var playerCode = '<video id="video" width="'+item.w+'" height="'+item.h+'" autoplay controls>' +
        '<source src="'+videofile[0]+'.mp4" type="video/mp4"></source>' +
        '<source src="'+videofile[0]+'.webm" type="video/webm"></source>' +
        '</video>';
         $(this).html(playerCode);
         $('.pswp__img').css('visibility','hidden');

    }));
    v.appendTo('.pswp__scroll-wrap');
}

function updateVideoPosition(o) {
    var item = o.currItem;
    var vp = o.viewportSize;
    var top = (vp.y - item.h)/2;
    var left = (vp.x - item.w)/2;
    $('.videoHolder').css({position:'absolute',top:top, left:left});

}

解决方法:

对于移动设备尺寸问题,我使用了一个附加函数,该函数根据gallery.viewportSize和视频长宽比来计算视频大小.

function setVideoSize(item, vp) {
    var w = item.w,
        h = item.h,
        vw = vp.x,
        r,
        vh;
    if (vw < w) {
        r = w/h;
        vh = vw/r;
        w = vw;
        h = vh;
    }
    return {
            w: w,
            h: h
    };
}

然后将detectVideo()中的addVideo调用更改为

addVideo(gallery.currItem, gallery.viewportSize);

在现有的addVideo(item,vp)函数中使用它

var vsize = setVideoSize(item, vp);
var v = $('<div />', {
            class:'.videoHolder',
            css : ({'position': 'absolute','width':vsize.w, 'height':vsize.h})

并且也在updateVideoPosition(o)中

var item = o.currItem;
var vp = o.viewportSize;
var vsize = setVideoSize(item, vp);
var top = (vp.y - vsize.h)/2;
var left = (vp.x - vsize.w)/2;
$('.videoHolder').css({position:'absolute',top:top, left:left});

标签：html5,html5-video,photoswipe,javascript,jquery
来源： https://codeday.me/bug/20191027/1947739.html