1. npm install livephotoskit；

2. 简单封装组件

<template>
    <div>
        <div id="live-photo-container" data-live-photo style="width: 320px; height: 320px">
        </div>
    </div>
</template>

<script>
    import * as LivePhotosKit from 'livephotoskit';

    export default {
        props: {
            photoUrl: {
                type: String,
                default: 'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg',
            },
            videoUrl: {
                type: String,
                default: '../../static/test.mp4',
            }
        },
        data() {
            return {

            };
        },
        onReady() {
            const livePhotoElement = document.getElementById('live-photo-container');
            livePhotoElement.innerHTML = ''; // 清空之前的内容
            const livePhoto = LivePhotosKit.Player(livePhotoElement);

            // 设置 Live Photo 的视频和图片 URL
            livePhoto.photoSrc = this.photoUrl; // 静态图片的 URL
            livePhoto.videoSrc = this.videoUrl; // 视频的 URL
            livePhoto.muted = false; // 是否静音

            livePhoto.addEventListener('canplay', evt => this.$emit('onCanPlay',evt));
            livePhoto.addEventListener('error', evt => this.$emit('onError',evt));
            livePhoto.addEventListener('ended', evt => this.$emit('onEnded',evt));
        },
        methods: {

        }
    };
</script>

3. 效果图 ，web端点击左上角live按钮，播放实况

   
   
   image.png

image.png