首页 > 其他分享 >SVGA / MP4 加载预览

SVGA / MP4 加载预览

时间:2024-11-08 14:21:33浏览次数:5  
标签:SVGA 预览 setAttribute item MP4 video let svga document

// 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

相关文章

  • jeecg使用vue-pdf 和print-js实现pdf预览和打印
    前言近期我正在开发一个前后端分离项目,使用了SpringBoot和Vue2,借助了国内优秀的框架jeecg,前端UI库则选择了ant-design-vue。在项目中,需要实现文件上传功能,同时还要能够在线预览和下载图片和PDF文件,甚至需要在页面上直接打印PDF文件。尽管框架自带了vue-print-nb-jeecg组件......
  • Bootstrap Blazor自定义图片预览组件
            BootstrapBlazor的官方虽然有提供图片预览组件ImagePreviewer,但是,它是置于窗口顶层的,而且是全屏显示,如果业务中有在预览组件中添加其它功能的需求,它是不支持扩展的。    为此,我参考官方的源码,自己写了一个自定义图片预览组件,文件的源码在下面,可自行......
  • Java上传文件到远程服务器和浏览器预览图片
    导入maven依赖<dependency> <groupId>com.jcraft</groupId> <artifactId>jsch</artifactId> <version>0.1.54</version></dependency>创建一个工具类UploadImageimportcom.jcraft.jsch.Channel;importcom.jcraft.......
  • blender导入的图片渲染看不见,图片预览正常,但渲染不出
    在使用Blender时,我们经常会遇到导入图片后在预览渲染中显示,但在实际渲染时图片消失的问题。本文将提供详细的解决方法,帮助大家解决“Blender导入的图片渲染图像不显示”的问题。问题原因导入的图片在Blender中只是一张图,并非网格,因此需要将其设置成网格才能进行渲染。解决方案......
  • stm32读取麦克风inmp441数据并实时播放
    概述最近在做一个功能类似于对讲机通话的功能,本来在网上感觉很容易找到同样的案例复刻,结果发现大多数都是用esp32,或者说电脑作为上位机传输wav音频解码播放的效果,也有很相仿的,但是都测试结果不尽人意,经过不断摸索下面是我给出的方案。但是本篇文章只限于单片机mcu芯片通......
  • 批量提取mp4文件中的音频
    !/bin/bash检查是否传入输入目录参数if[-z"$1"];thenecho"Usage:$0<input_dir>[output_dir]"exit1fi获取输入和输出目录INPUT_DIR="$1"OUTPUT_DIR="${2:-./mp3_files}"#如果未指定output_dir,则默认为当前目录下的mp3_files检查输入目录是否存在if[......
  • 浏览器中在线预览pdf文件,pdf.mjs插件实现web预览pdf
    背景:本来只是淘宝上卖卖袜子,想着扩展一下业务,准备做同名“来家居”海外袜子馆外贸项目,碰到pdf在线预览的需求,就找了pdf.js插件进行实践后把此方法记录下来,可以通过多种方法来实现,每种方法都有其优缺点和适用场景。简单一点的可以使用<iframe>或<embed>标签,这两种方法都是通过浏览......
  • MarkDown All in One插件预览与常用快捷键
    MarkDownAllinOne插件预览与常用快捷键预览实时预览:Ctrl+Shift+P调出主命令框,输入Markdown,应该会匹配到几项Markdown相关命令,选择Markdown:OpenPreviewtotheSide,就能调出实时预览框了。新窗口预览:Ctrl+Shift+V打开新窗口,加载md文件预览。常用快捷键......
  • el-image图片预览显示bug
    原本代码<el-table-columnlabel="附件"width="120"><template#default="scope"><el-imagev-if="scope.row.attachmentUrl":src="scope.row.at......
  • python+flask框架的基于微信小程序的电影推荐系统前台mp48(开题+程序+论文) 计算机毕
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容选题背景随着互联网技术的飞速发展,在线电影观看已成为人们休闲娱乐的重要方式之一。微信作为中国最大的社交平台之一,其小程序平台凭借其轻量级、即......