uniapp 实现一个页面，滑动区域，视频滑动，多个视频，写代码

<template>
<view class="container">
<scroll-view class="scroll-view" scroll-y="true">
<view class="videos">
<video v-for="(video, index) in videos" :src="video.src" :key="index"
class="video" :style="{left: video.left + 'px'}" @loadedmetadata="onVideoLoaded(index)">
</video>
</view>
</scroll-view>
</view>
</template>

<script>
export default {
data() {
return {
videos: [
{ src: 'https://example.com/video1.mp4', left: 0 },
{ src: 'https://example.com/video2.mp4', left: 300 },
{ src: 'https://example.com/video3.mp4', left: 600 },
{ src: 'https://example.com/video4.mp4', left: 900 },
],
};
},
methods: {
onVideoLoaded(index) {
const videoElem = this.$refs[`video-${index}`][0];
videoElem.play();
},
},
};
</script>

<style>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.scroll-view {
width: 100%;
height: 100%;
}

.videos {
position: relative;
width: 1200px;
height: 100%;
}

.video {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
transform: translateY(-50%);
}
</style>