uniapp 混合nvue开发上下切换视频（弃用）

原创

已于 2023-01-11 16:03:34 修改 · 834 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#web app

于 2023-01-07 10:37:14 首次发布

文章描述了一个使用swiper组件和自定义videoPlayer组件在Vue.js的nvue环境中实现在移动设备上流畅上下切换视频的方案。通过监听滑动事件改变视频状态，以及利用list组件和@appear指令优化性能，确保了即使处理大量视频也能保持流畅体验。后期优化包括动态加载视频数组和使用cover-view添加交互元素。

此文章存在挺多bug的，比如串音问题，黑屏问题，播放与暂停，占用内存过大，记录一下自己当前的开发思路

最初的构思开发：采用swiper上下切换

1.videoPlayer.nvue

<!-- videoPlayer.nvue -->
<template>
    <view class="videoPlayer">
        <video id="myVideo" class="video" :controls="false"
            :src="'https://xiaoshipin.com/sipin/'+src" ref="myVideo" :loop="true"
            :autoplay="false" @click="click" 
            object-fit="fill"
            :enable-progress-gesture="false"
            :show-fullscreen-btn="false"
            :show-play-btn="false"
            :show-center-play-btn="false"></video>
    </view>
</template>

<script>
    var timer = null 
    export default {
        props: ['src', 'state'],
        watch: {
            state: {
                immediate: true,
                handler() {
                    this.stateChange();
                }
            }
        },
        data() {
            return {
                play: false,
                dblClick: false,
            };
        },
        mounted() {

        },
        methods: {
            stateChange() {

                let videos = this.$refs['myVideo'];
                if (!!videos) {
                    let videoContext = videos;
                    switch (this.state) {
                        //视频播放
                        case 'play':
                            videoContext.play()
                            this.play = true
                            break;
                            //视频暂停
                        case 'pause':
                            videoContext.pause()
                            this.play = false
                            break;
                            //上下切换停止视频
                        case 'stop':
                            videoContext.pause(); //视频停止,从0开始
                            videoContext.seek(0);
                            this.play = false
                            break;
                        default:
                            break;