SVGA / MP4 加载预览

// 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.bodybody.style.overflow = 'hidden'// // svga_marklet svga_mark = document.createElement('div')svga_mark.classList.add('svga_mark')body.append(svga_mark)svga_mark.addEventListener('click', function () {body.style.overflow = 'auto'svga_mark.remove()})// svga_contlet 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') {// videoMarklet 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')// videolet 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);}, 100);}// 图片if (file_type == 'img') {// svga_piclet picBox = document.createElement('div')picBox.classList = 'cbox pic'svga_cont.append(picBox)// imglet img = document.createElement('img')img.src = item.imgpicBox.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 = 8for (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();
}