// 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
let 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_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);
}, 100);
}
// 图片
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();
}
标签:SVGA,预览,setAttribute,item,MP4,video,let,svga,document
From: https://www.cnblogs.com/janty/p/18534977