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 = ''; // 清空之前的內(nèi)容
const livePhoto = LivePhotosKit.Player(livePhotoElement);
// 設(shè)置 Live Photo 的視頻和圖片 URL
livePhoto.photoSrc = this.photoUrl; // 靜態(tài)圖片的 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端點(diǎn)擊左上角live按鈕，播放實(shí)況
image.png
image.png
