奖励弹窗 svga 播放

html

<script src="./js/svga.min.js"></script>

js

// svga 展示
function fn_svgaPlay(item) {

    //  // mp4
    // item = {
    //     "gift_id": 11078,
    //     "img": "https://image.whoisamy.shop/attachment/2024/06/27/8755eae77474c3f52f0c95aec30bb77e6b5c1f9f.png",
    //     "prop_name": "LV4座驾-7月首充",
    //     "svga_path": "https://image.whoisamy.shop/action/commonPics/public/mp4/gift_id_11078.mp4",
    //     "svga_model": "full",
    //     "canvasClass": "center",
    //     "text": "Mounts",
    //     "days": 15,
    //     "worth": 205000,
    //     "mp4_url": "https://image.whoisamy.shop/action/commonPics/public/mp4/gift_id_11078.mp4",
    //     "file_suffix": "mp4"
    // }


    //  // svga
    // item = {
    //     "gift_id": 11077,
    //     "img": "https://image.whoisamy.shop/attachment/2024/06/27/349ba92deac2970cfaabb88fb199cbae32ec00ad.png",
    //     "prop_name": "LV3座驾-7月首充",
    //     "svga_path": "https://image.whoisamy.shop/attachment/2024/06/27/11be08e5ed62c648abaf1208b6135bb5a37a813a.svga",
    //     "svga_model": "full",
    //     "canvasClass": "center",
    //     "text": "Mounts",
    //     "days": 15,
    //     "worth": 105000,
    //     "svga_type": "default"
    // }

    // // img
    // item = {
    //     "img": "https://image.whoisamy.shop/action/commonPics/public/VIP5.png",
    //     "text": "VIP5",
    //     "days": 7,
    //     "worth": 140000
    // }



    if (!item.img) return
    // 
    let body = document.body
    body.style.overflow = 'hidden'
    // 
    svga_mark.addEventListener('click', function () {
        body.style.overflow = 'auto'
        svga_mark.remove()
    })

    // svga_mark
    let svga_mark = document.createElement('div')
    svga_mark.classList.add('svga_mark')
    body.append(svga_mark)

    // svga_cont
    let svga_cont = document.createElement('div')
    svga_cont.classList.add('cont')
    svga_mark.append(svga_cont)

    // 判断类型
    let file_type = ''
    if (item.svga_path || item.svga) {
        if (item.svga && !item.svga_path) { item.svga_path = item.svga }
        if (item.svga_path.includes('.mp4')) { file_type = 'mp4' }
        if (item.svga_path.includes('.svga')) { file_type = 'svga' }
    } else {
        file_type = 'img'
    }

    // 视频
    if (file_type == 'mp4') {
        // videoMark
        let videoMark = document.createElement('div')
        videoMark.classList.add('videoMark')
        svga_mark.append(videoMark)

        // 判断设备
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) videoMark.classList.add('ios')

        // video
        let video = document.createElement('video')
        video.classList.add('video')
        video.setAttribute('id', 'video')
        video.setAttribute('loop', 'loop')
        video.setAttribute('muted', 'muted')
        video.setAttribute('autoplay', 'autoplay')
        video.setAttribute('preload', 'auto')
        // video.setAttribute('controls','controls')
        video.setAttribute('controlslist', 'nodownload')
        video.setAttribute('playsinline', 'playsinline')
        video.setAttribute('mult', 'mult')
        video.setAttribute('x5-video-player-type', 'h5')
        video.setAttribute('x5-video-player-fullscreen', 'true')
        video.setAttribute('width', '100%')
        video.setAttribute('height', '100%')
        video.setAttribute('poster', 'https://image.whoisamy.shop/action/commonPics/public/bg_opacity_0.png')
        video.setAttribute('src', item.svga_path)
        videoMark.append(video)

        // 
        let close = document.createElement('div')
        close.classList.add('colse')
        videoMark.append(close)
        // 
    }

    // 动效
    if (file_type == 'svga') {
        svga_cont.classList.add(item.svga_model || '')

        let cbox = document.createElement('div')
        cbox.classList = 'cbox svga'
        svga_cont.append(cbox)

        let svga_box = document.createElement('div')
        svga_box.setAttribute('id', 'svga_box')
        svga_box.classList.add('svga_box')
        svga_box.classList.add(item.canvasClass || '')
        svga_box.style.textAlign = 'left'
        cbox.append(svga_box)

        setTimeout(() => {
            svga_load('svga_box', item.svga_path);
        }, 300);

    }

    // 图片
    if (file_type == 'img') {
        // svga_pic
        let picBox = document.createElement('div')
        picBox.classList = 'cbox pic'
        svga_cont.append(picBox)

        // img
        let img = document.createElement('img')
        img.src = item.img
        picBox.append(img)
    }
    // 
}

// svga_load
function svga_load(id, svga_url) {
    createLoad()
    var player = new SVGA.Player(`#${id}`);
    var parser = new SVGA.Parser(`#${id}`); // Must Provide same selector eg:#demoCanvas IF support IE6+
    parser.load(svga_url, function (svgaItem) {
        removeLoad()
        // player.loops = 1; //必须放最上面,执行次数,默认无限循环
        player.setVideoItem(svgaItem);
        player.startAnimation();
        player.onFinished(function () {
            console.log('加载完成！');
        });
    });
}

// createLoad
function createLoad() {

    let div = document.createElement('div');
    div.id = 'requestLoad';
    div.style.cssText=`width: 100%;height: 100%;position:fixed; top: 0;left: 0;z-index: 100;`

    let box = document.createElement('div');
    box.id = 'load_box';
    box.style.cssText=`width: 2rem;height: 2rem;border-radius: .2rem;position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 100;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, .3);`
    div.append(box);

    let reul = document.createElement('ul');
    reul.id = 'reul';
    reul.style.cssText = `width: .8rem;height: .8rem;position: absolute;animation: rotate 2s linear infinite;`

    let num = 8
    for (let i = 0; i < num; i++) {
        let li = document.createElement('li')
        li.style.cssText = `width: 100%; height: .1rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)  rotateZ(${1 / num * 360 * i}deg) ;`
        let span = document.createElement('span')
        span.style.cssText = `display: block; width: .24rem; height: .24rem; background: #fff; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(-50%,-50%) scale(${1 - i * .064});`
        li.append(span);
        reul.append(li);
    }

    box.append(reul);
    document.querySelector('body').appendChild(div)

}

// removeLoad
function removeLoad() {
    var removeLoad = document.getElementById('requestLoad');
    if (removeLoad) removeLoad.remove();
}