npm install livephotoskit；
简单封装组件
<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>
-
效果图 ，web端点击左上角live按钮，播放实况
image.png
image.png
