Vue Perfectlooper
made with Vuejs

vue-perfectlooper是一个基于Vue.js的循环图像序列播放器，支持移动平台。

特点 * 播放时CPU使用率极低 * 时间轴清理 * 帧前进和后退 * 通过鼠标和触摸屏用户的按钮 * 当具有焦点时，通过键盘的左右箭头 * 全屏能力 * 甚至还花了很多精力在iOS上进行这种工作，支持iOS Safari interactivity DangerZone™ avoidance * 反应灵敏；适应您放入的任何元素 * 这是一个文件模块，甚至包含自己的CSS * 可自定义的帧路径选项

安装

Npm

npm i vue-perfectlooper

Yarn

yarn add vue-perfectlooper

使用

组件中使用

<template>
    <vue-perfectlooper v-bind="loop"></vue-perfectlooper>
</template>
<script>
    import VuePerfectlooper from 'vue-perfectlooper';
    let amazonCDN = 'https://aws-website-videonuclearpixelcom-tgl8t.s3.amazonaws.com/content/';
    export default {
        components: {VuePerfectlooper},
        data: function(){
            return {
                loop: {
                    "id": "crusaderarts_red_room_tribute-24",
                    "poster": amazonCDN + "crusaderarts_red_room_tribute-24-preview.jpg",
                    "src": amazonCDN + "crusaderarts_red_room_tribute-24-1920x1080/",
                    "frames": 24
                }
            }
        }
    };
</script>

浏览器

<div id="myLoopHolder">
    <vue-perfectlooper v-bind="loop"></vue-perfectlooper>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-perfectlooper"></script>
<script>
    Vue.component('vue-perfectlooper', VuePerfectlooper);
    var amazonCDN = 'https://aws-website-videonuclearpixelcom-tgl8t.s3.amazonaws.com/content/';
    new Vue({
        el: '#myLoopHolder',
        data: {
            loop: {
                "id": "crusaderarts_red_room_tribute-24",
                "poster": amazonCDN + "crusaderarts_red_room_tribute-24-preview.jpg",
                "src": amazonCDN + "crusaderarts_red_room_tribute-24-1920x1080/",
                "frames": 24
            }
        }
    });
</script>

播放帧结构

使用默认的结构化文件名序列

{
    "id": "electric_flower",
    "poster": "https://cdn.example.com/loops/electric_flower-preview.jpg",
    "src": "https://cdn.example.com/loops/electric_flower/",
    "frames": 48
}

结果

http://cdn.example.com/loops/electric_flower-preview.jpg
http://cdn.example.com/loops/electric_flower/(0001.jpg ~ 0048.jpg)

使用自定义结构化文件名序列

{
    "id": "infernal_recursion",
    "poster": "https://cdn.example.com/loops/infernal_recursion.jpg",
    "src": "https://cdn.example.com/loops/",
    "frames": 24,
    "startIndex": 0,
    "sequenceTemplate": "00",
    "prefix": "infernal_recursion-",
    "suffix": ".png"
}

结果：

https://cdn.example.com/loops/infernal_recursion.jpg
https://cdn.example.com/loops/infernal_recursion-(00 ~ 23).png

使用非顺序的图像地址

{
    "id": "ghost_wins_at_candy_corn-24",
    "poster": "https://i.imgur.com/GraKGsu.jpg",
    "src": [
        "https://i.imgur.com/GraKGsu.jpg",
        "https://i.imgur.com/Y1g1hiK.jpg",
        "https://i.imgur.com/rHfKoSK.jpg",
        "https://i.imgur.com/siZcgeZ.jpg",
        "https://i.imgur.com/kTrrtwn.jpg",
        "https://i.imgur.com/6Y045sP.jpg",
        "https://i.imgur.com/9Vhetui.jpg",
        "https://i.imgur.com/4a4rNI2.jpg",
        "https://i.imgur.com/uyi5teq.jpg",
        "https://i.imgur.com/4aWoBVB.jpg",
        "https://i.imgur.com/M4ukBi5.jpg",
        "https://i.imgur.com/14N83Cz.jpg",
        "https://i.imgur.com/PseVZFY.jpg",
        "https://i.imgur.com/SKx2Uws.jpg",
        "https://i.imgur.com/x9qyGow.jpg",
        "https://i.imgur.com/xFouIvs.jpg",
        "https://i.imgur.com/SaguQJe.jpg",
        "https://i.imgur.com/5ohSkY1.jpg",
        "https://i.imgur.com/y60nEjV.jpg",
        "https://i.imgur.com/INUdQD1.jpg",
        "https://i.imgur.com/iof2JHQ.jpg",
        "https://i.imgur.com/vRFn9tT.jpg",
        "https://i.imgur.com/gqB3Vnz.jpg",
        "https://i.imgur.com/11Wvp6T.jpg"
    ]
}

使用Imgur  相册ID

{
    "id": "hyper_mograph_networking-48",
    "poster": "https://i.imgur.com/o4Jj2u3.jpg",
    "srcImgurAlbumId": "HMstF",
    "suffix": ".png"
}

示例