uniapp-vue3-ts实现 微信小程序-视频上下滑动

标签：uniapp videoContext img sectionId 微信 ts let video id

公司需求，后端被迫学习...临时记录一下后续完善
暂时不会组件式开发，只能采用选项式了
<template>
    <view style="color: white;">
        <view class="swiper">
            <view v-show="left_top_active" @click="navBack"
                :style="{'display':'flex','flex-direction': 'column','justify-content': 'center','font-weight': 'bold','position': 'fixed', 'z-index': 99, 'height': navHeight + 'px','top': navTop + 'px', 'left': '20px'}">
                图标 第5集
            </view>
            <!-- 第一页并且是第一个视频，禁止衔接滑动 -->
            <swiper class="swiper" current="0" @change="swiperChange" :circular="page != 0 || current != 0" vertical>
                <swiper-item v-for="(item,index) in dataList" :key="item.id">
                    <view class="swiper-item">
                        <!-- 只渲染当前页及上下页视频 防止渲染过多导致各种问题 Math.abs((current - index)) <= 1 -->
                        <video v-if="Math.abs((current - index)) <= 1" class="video" :id="'myVideo' + index"
                            :src="item.video_url" @click="hideElement" :controls="false" :autoplay="false" :loop="false"
                            @timeupdate="videoTimeUpdate(index,$event)" :show-center-play-btn="false">
                        </video>

                        <!-- 播放按钮 -->
                        <view v-show="left_bottom_active && current === index" style="position: absolute; bottom: 230rpx;">
                            <view style="width: 100vw; display: flex; flex-direction: row; justify-content: center;">
                                <!-- <text>{{play ? '暂停按钮' : '播放按钮'}}</text> -->
                                <image @click="videoSwitch(index)" :src="videoPlayButton"
                                    style="width: 100rpx; height: 100rpx; border-radius: 50%;"></image>
                            </view>
                        </view>
                        <!-- 短剧简述 -->
                        <view v-show="left_bottom_active && current === index" style="position: absolute; bottom: 100rpx; left: 3%;">
                            <view style=" display: flex; flex-direction: column;">
                                <text style="font-size: 18px; font-weight: bold; margin-bottom: 15rpx;">
                                    {{item.sectionName}}
                                </text>
                                <text style="font-size: 14px;">
                                    第{{item.sectionId}}集
                                </text>
                            </view>
                        </view>
                        <!-- 视频滑动条 -->
                        <view v-show="left_bottom_active && current === index" style="position: absolute; bottom: 30rpx;">
                            <view
                                style="display: flex; flex-direction: row; width: 100vw; justify-content: space-around;">
                                <view style="text-align: center; ">{{currTime}}</view>
                                <view>
                                    <slider style="margin: auto; width: 500rpx;" @change="sliderChange"
                                        @changing="sliderChanging" step="1" :value="sliderValue"
                                        backgroundColor="rgba(0, 0, 0, 0.3)" activeColor="#ffffff" block-color="#ffffff"
                                        block-size="px" />
                                </view>
                                <view style="text-align: center; ">{{duratioTime}}</view>
                            </view>
                        </view>
                        <!-- 右侧模块 -->
                        <view v-show="left_bottom_active && current === index" style="position: absolute;  bottom: 100rpx; right: 5%;">
                            <view style="display: flex; flex-direction: column; justify-content: space-around;">
                                <view @click="muluPopupOpen"
                                    style="display: flex; flex-direction: column; align-items: center;">
                                    <image src="../../static/logo.png" style="width: 60rpx;" mode="widthFix">
                                    </image>
                                    <text>目录</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
            <!-- 目录底部弹窗 待完善 -->
            <uni-popup ref="muluPopup" type="bottom" :animation="false" :maskClick="true" @change="changeMulu">
                <view class="popup-view-container">
                    <view style="width: 100%;">
                        <text>豪门弃少</text>
                        <text>101集全</text>
                    </view>
                    <view style="width: 100%;">
                        <text style="margin-left: 30rpx;">1-30</text>
                        <text style="margin-left: 30rpx;">31-60</text>
                        <text style="margin-left: 30rpx;">61-90</text>
                        <text style="margin-left: 30rpx;">90-120</text>
                    </view>
                    <view class="list-flex-item-container">
                        <view class="list-flex-item" v-for="(obj,index) in 28" :key="index">
                            <text>第{{index}}集</text>
                            <image v-if="false" src="../../static/logo.png"></image>
                        </view>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script lang="ts">
import {
        defineComponent
    } from 'vue'
    
    class OriginalObj {
        video_url: string;
        id: number;
        sectionId: number;
        sectionName: string;
        constructor(video_url: string,id: number,sectionId: number,sectionName: string) { 
                this.video_url = video_url 
                this.id = id ;
                this.sectionId = sectionId ;
                this.sectionName = sectionName ;
        } 
    }
    const videoContextType: any = {};
    const dataListType: Array<OriginalObj> = [];
    //后期数据从后端获取
    const originalListType: Array<OriginalObj> = [{
            "video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',
            "id": 1,
            "sectionId": 1,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',
            "id": 2,
            "sectionId": 2,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/241f77626eb44c2284b031e22449bf75.mp4',
            "id": 3,
            "sectionId": 3,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',
            "id": 4,
            "sectionId": 4,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',
            "id": 5,
            "sectionId": 5,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/241f77626eb44c2284b031e22449bf75.mp4',
            "id": 6,
            "sectionId": 6,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',
            "id": 7,
            "sectionId": 7,
            "sectionName": '首富继承人'
        },
        {
            "video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',
            "id": 8,
            "sectionId": 8,
            "sectionName": '首富继承人'
        }
    ];
    export default defineComponent({
        data() {
            return {
                //原数组
                originalList: originalListType,
                //用于swiper滑动的数组    // page * pageRecode ~ page * pageRecode + 2
                dataList: dataListType,  
                //swiper数组个数；一次展示多少个
                pageRecode: 3, 
                //当前页 0:1-9; 1:10-19
                page: 0, 
                navHeight: 25,
                navTop: 25,
                videoContext: videoContextType,
                //悬浮层元素的显示和隐藏
                left_bottom_active: true,
                left_top_active: true,
                //播放状态
                play: false,
                current: 0,
                videoPlayButton: "/static/img/pause.jpg",

                fullScreenFlag: false,
                currTime: '00:00', //当前播放时间 字符串 计算后
                duratioTime: '00:00', //总时间 字符串 计算后
                sliderValue: 0, //控制进度条slider的值，
                isDrag: false, //拖动状态：防止视频播放过程中导致的拖拽失效
                videoTotalTime: 0 //当前视频总时长
            }
        },
        onl oad(options: any) {
            this.initData(options.id);
        },
        onReady() {
            const statusBarHeightw = uni.getSystemInfoSync().statusBarHeight || 15;
            const custom = uni.getMenuButtonBoundingClientRect();
            console.info(statusBarHeightw + "; " + JSON.stringify(custom));
            this.navHeight = (custom.top - statusBarHeightw) * 2 + custom.height;
            this.navTop = statusBarHeightw;

            setTimeout(() => {
                this.autoPlay();
            }, 500);
        },
        methods: {
            //初始化数据
            initData(typlayId: number) {
                this.typlayId = typlayId;
                for (let i = 0; i < this.pageRecode; i++) {
                    this.dataList.push(this.originalList[i]);
                }
                // 根据短剧ID 查询短剧集数信息
                console.info("短剧ID：" + this.typlayId);
            },
            //返回上一层
            navBack() {
                uni.navigateBack({
                    delta: 2
                })
            },
            //悬浮层的显示和隐藏
            hideElement() {
                this.left_bottom_active = !this.left_bottom_active;
                this.left_top_active = !this.left_top_active;
            },
            //首页自动播放
            autoPlay() {
                let videoContext = uni.createVideoContext('myVideo' + this.current, this);
                this.videoContext = videoContext;
                videoContext.play();
                this.videoPlayButton = "/static/img/play.jpg";
                this.play = true;
            },

            /*===============================滑块切换   视频上下滑动时===========================================*/
            swiperChange(event: any) {
                let newCurrent = event.detail.current;
                //判断是否需要切换数据
                if (newCurrent === 0 && this.current === 2) { //数组 + 1
                    this.page += 1;
                    let limit = this.page * this.pageRecode;
                    let temp = [];
                    temp.push(this.originalList[limit]);
                    temp.push(this.originalList[limit+1]);
                    temp.push(this.originalList[limit+2]);
                    this.dataList = temp;
                } else if (newCurrent === 2 && this.current === 0) { //数组 -1
                    this.page -= 1;
                    let limit = this.page * this.pageRecode;
                    let temp = [];
                    temp.push(this.originalList[limit]);
                    temp.push(this.originalList[limit+1]);
                    temp.push(this.originalList[limit+2]);
                    this.dataList = temp;
                }
                console.info("page: " + this.page);
                console.info("dataList: " + this.dataList);
                
                //上一个视频暂停
                let videoContext = uni.createVideoContext('myVideo' + this.current, this);
                videoContext.pause();
                videoContext.seek(0);
                //当前视频播放
                videoContext = uni.createVideoContext('myVideo' + newCurrent, this);
                this.videoContext = videoContext;
                this.videoPlayButton = "/static/img/play.jpg";
                setTimeout(() => {
                    videoContext.play();
                }, 500);
                this.play = true;
                this.current = newCurrent;
            },

            /*===============================自定义视频拖动条 及播放暂停按钮start===========================================*/
            //视频播放暂停按钮
            videoSwitch(index_: number) {
                if (this.play) {
                    this.videoContext.pause();
                    this.videoPlayButton = "/static/img/pause.jpg";
                    this.play = false;
                } else {
                    this.videoContext.play();
                    this.videoPlayButton = "/static/img/play.jpg";
                    this.play = true;
                }
            },
            
            // 拖动slider过程中触发事件
            sliderChanging() {
                //拖拽过程中，不允许更新进度条
                this.isDrag = true;
            },
            // 拖动slider完成后触发
            sliderChange(event: any) {
                var second = event.detail.value / 100 * this.videoTotalTime;
                this.videoContext.seek(second);
                this.sliderValue = event.detail.value,
                    this.currTime = this.formatSeconds(second);
                this.isDrag = false;
            },
            /* 视频播放进度发生变化 触发
            event.detail = {currentTime, duration} 。触发频率 250ms 一次
            字节跳动小程序与飞书小程序不支持 */
            videoTimeUpdate(index: number, event: any) {
                let currentTime = event.detail.currentTime;
                let duration = event.detail.duration;
                let sliderValue = currentTime / duration * 100;
                this.currTime = this.formatSeconds(currentTime);
                // videoTotalTime 和 duration  后期直接从后端获取
                if (this.videoTotalTime === 0) {
                    this.videoTotalTime = duration;
                    this.duratioTime = this.formatSeconds(duration);
                }
                //拖动过程中不自动改变进度条
                if (!this.isDrag) {
                    this.sliderValue = sliderValue;
                }
            },

            // 根据秒获取时间 00:00
            formatSeconds(totalSecond: number) {
                let mm: string | number = parseInt((totalSecond / 60) + "");
                let ss: string | number = parseInt((totalSecond - 60 * mm) + "");
                if (mm < 10) {
                    mm = "0" + mm;
                }
                if (ss < 10) {
                    ss = "0" + ss;
                }
                let length = mm + ":" + ss;
                if (totalSecond > 0) {
                    return length;
                } else {
                    return "00:00";
                }
            },
            /*===============================自定义视频拖动条 及播放暂停按钮end===========================================*/
            
            /*===============================底部弹窗start===========================================*/
            //目录底部弹窗打开
            muluPopupOpen() {
                this.$refs['muluPopup'].open();
            },
            // 目录底部弹窗关闭
            changeMulu(e: any) {
                
                //待完善
                uni.showToast({
                    title: '目录底部弹窗: ' + e.type + ' ,状态:' + e.show
                });
            },
            //充值底部弹窗打开
            payPopupOpen() {
                this.$refs['payPopup'].open();
            },
            //充值底部弹窗关闭
            change(e: any) {
                //待完善
                
                uni.showToast({
                    title: '充值底部弹窗: ' + e.type + ' ,状态:' + e.show
                })
            }
            /*===============================底部弹窗end===========================================*/

        }
    })
</script>

<style lang="scss">
    .swiper {
        width: 100vw;
        height: 100vh;
        background-color: #000000;

        .swiper-item {
            width: 100vw;
            position: relative;
            height: 100vh;
            background-color: #000000;
        }
    }

    .video {
        position: relative;
        width: 100vw;
        height: 100vh;
    }

    .popup-view-container {
        background-color: #ffffff;
        padding: 20rpx;
        height: 700rpx;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .line-h {
        height: 1rpx;
        margin: auto 0px;
        width: 280rpx;
        background-color: #000000;
    }

    .list-flex-item-container {
        display: flex;
        color: black;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        flex-wrap: wrap;
    }

    .list-flex-item {
        width: 90rpx;
        height: 30rpx;
        padding: 15rpx 60rpx;
        background-color: #e7e7e7;
        border-radius: 15rpx;
    }
</style>

 

<template><view style="color: white;"><view class="swiper"><view v-show="left_top_active" @click="navBack":style="{'display':'flex','flex-direction': 'column','justify-content': 'center','font-weight': 'bold','position': 'fixed', 'z-index': 99, 'height': navHeight + 'px','top': navTop + 'px', 'left': '20px'}">图标 第5集</view><!-- 第一页并且是第一个视频，禁止衔接滑动 --><swiper class="swiper" current="0" @change="swiperChange" :circular="page != 0 || current != 0" vertical><swiper-item v-for="(item,index) in dataList" :key="item.id"><view class="swiper-item"><!-- 只渲染当前页及上下页视频 防止渲染过多导致问题 Math.abs((current - index)) <= 1--><video v-if="Math.abs((current - index)) <= 1" class="video" :id="'myVideo' + index":src="item.video_url" @click="hideElement" :controls="false" :autoplay="false" :loop="false"@timeupdate="videoTimeUpdate(index,$event)" :show-center-play-btn="false"></video>
<!-- 播放按钮 --><view v-show="left_bottom_active && current === index" style="position: absolute; bottom: 230rpx;"><view style="width: 100vw; display: flex; flex-direction: row; justify-content: center;"><!-- <text>{{play ? '暂停按钮' : '播放按钮'}}</text> --><image @click="videoSwitch(index)" :src="videoPlayButton"style="width: 100rpx; height: 100rpx; border-radius: 50%;"></image></view></view><!-- 短剧简述 --><view v-show="left_bottom_active && current === index" style="position: absolute; bottom: 100rpx; left: 3%;"><view style=" display: flex; flex-direction: column;"><text style="font-size: 18px; font-weight: bold; margin-bottom: 15rpx;">{{item.sectionName}}</text><text style="font-size: 14px;">第{{item.sectionId}}集</text></view></view><!-- 视频滑动条 --><view v-show="left_bottom_active && current === index" style="position: absolute; bottom: 30rpx;"><viewstyle="display: flex; flex-direction: row; width: 100vw; justify-content: space-around;"><view style="text-align: center; ">{{currTime}}</view><view><slider style="margin: auto; width: 500rpx;" @change="sliderChange"@changing="sliderChanging" step="1" :value="sliderValue"backgroundColor="rgba(0, 0, 0, 0.3)" activeColor="#ffffff" block-color="#ffffff"block-size="px" /></view><view style="text-align: center; ">{{duratioTime}}</view></view></view><!-- 右侧模块 --><view v-show="left_bottom_active && current === index" style="position: absolute;  bottom: 100rpx; right: 5%;"><view style="display: flex; flex-direction: column; justify-content: space-around;"><view @click="muluPopupOpen"style="display: flex; flex-direction: column; align-items: center;"><image src="../../static/logo.png" style="width: 60rpx;" mode="widthFix"></image><text>目录</text></view></view></view></view></swiper-item></swiper><!-- 目录底部弹窗 --><uni-popup ref="muluPopup" type="bottom" :animation="false" :maskClick="true" @change="changeMulu"><view class="popup-view-container"><view style="width: 100%;"><text>豪门弃少</text><text>101集全</text></view><view style="width: 100%;"><text style="margin-left: 30rpx;">1-30</text><text style="margin-left: 30rpx;">31-60</text><text style="margin-left: 30rpx;">61-90</text><text style="margin-left: 30rpx;">90-120</text></view><view class="list-flex-item-container"><view class="list-flex-item" v-for="(obj,index) in 28" :key="index"><text>第{{index}}集</text><image v-if="false" src="../../static/logo.png"></image></view></view></view></uni-popup>
<!-- 充值底部弹窗内容 --><!-- <uni-popup ref="payPopup" type="bottom" :animation="false" :maskClick="true" @change="change"><view class="popup-view-container"><view style="display: flex;flex-direction: row;justify-content: space-between;"><text style="letter-spacing: 5rpx;">K币充值</text><text style="letter-spacing: 1rpx;">账户余额: {{0}}K币</text></view><viewstyle=" margin-top: 10rpx;width: 100%;display: flex; flex-direction: row; justify-content: space-between;"><view class="line-h"></view><view><image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;border-radius: 100%"></image></view><view class="line-h"></view></view><view v-for="(obj,index) in 3" :key="index" style="display: flex; flex-direction: row; justify-content: space-around;margin-bottom: 30rpx;"><view style="display: flex; flex-direction: column; justify-content: center;padding: 10rpx;background-color: #ffaa00;border-radius: 15rpx;"><text style="margin: auto;">￥9.9</text><text style="margin: auto;">得1000+200金币</text></view><view style="display: flex; flex-direction: column; padding: 10rpx; background-color: #ffaa00;border-radius: 15rpx;"><text style="margin: auto;">￥198</text><text style="margin: auto;">半年会员免费看</text></view></view></view></uni-popup> --></view></view></template>
<script lang="ts">import { type } from 'os';import {defineComponent} from 'vue'class OriginalObj {video_url: string;id: number;sectionId: number;sectionName: string;constructor(video_url: string,id: number,sectionId: number,sectionName: string) {         this.video_url = video_url         this.id = id ;        this.sectionId = sectionId ;        this.sectionName = sectionName ;} }const videoContextType: any = {};    const dataListType: Array<OriginalObj> = [];//数据从后端获取const originalListType: Array<OriginalObj> = [{"video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',"id": 1,"sectionId": 1,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',"id": 2,"sectionId": 2,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/241f77626eb44c2284b031e22449bf75.mp4',"id": 3,"sectionId": 3,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',"id": 4,"sectionId": 4,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',"id": 5,"sectionId": 5,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/241f77626eb44c2284b031e22449bf75.mp4',"id": 6,"sectionId": 6,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',"id": 7,"sectionId": 7,"sectionName": '首富继承人'},{"video_url": 'https://creative.bxsnews.com/img/853020f2bf344675ade04bb9d4a6514e.mp4',"id": 8,"sectionId": 8,"sectionName": '首富继承人'}];export default defineComponent({data() {return {//原数组originalList: originalListType,//用于swiper滑动的数组    // page * pageRecode ~ page * pageRecode + 2dataList: dataListType,  //swiper数组个数；一次展示多少个pageRecode: 3, //当前页 0:1-9; 1:10-19page: 0, navHeight: 25,navTop: 25,videoContext: videoContextType,//悬浮层元素的显示和隐藏left_bottom_active: true,left_top_active: true,//播放状态play: false,current: 0,videoPlayButton: "/static/img/pause.jpg",
fullScreenFlag: false,currTime: '00:00', //当前播放时间 字符串 计算后duratioTime: '00:00', //总时间 字符串 计算后sliderValue: 0, //控制进度条slider的值，isDrag: false, //拖动状态：防止视频播放过程中导致的拖拽失效videoTotalTime: 0 //当前视频总时长}},onLoad(options: any) {this.initData(options.id);},onReady() {const statusBarHeightw = uni.getSystemInfoSync().statusBarHeight || 15;const custom = uni.getMenuButtonBoundingClientRect();console.info(statusBarHeightw + "; " + JSON.stringify(custom));this.navHeight = (custom.top - statusBarHeightw) * 2 + custom.height;this.navTop = statusBarHeightw;
setTimeout(() => {this.autoPlay();}, 500);},methods: {//初始化数据initData(typlayId: number) {this.typlayId = typlayId;for (let i = 0; i < this.pageRecode; i++) {this.dataList.push(this.originalList[i]);}// 根据短剧ID 查询短剧集数信息console.info("短剧ID：" + this.typlayId);},//返回上一层navBack() {uni.navigateBack({delta: 2})},//悬浮层的显示和隐藏hideElement() {this.left_bottom_active = !this.left_bottom_active;this.left_top_active = !this.left_top_active;},//首页自动播放autoPlay() {let videoContext = uni.createVideoContext('myVideo' + this.current, this);this.videoContext = videoContext;videoContext.play();this.videoPlayButton = "/static/img/play.jpg";this.play = true;},
/*===============================滑块切换   视频上下滑动时===========================================*/swiperChange(event: any) {let newCurrent = event.detail.current;//判断是否需要切换数据if (newCurrent === 0 && this.current === 2) { //数组 + 1this.page += 1;let limit = this.page * this.pageRecode;let temp = [];temp.push(this.originalList[limit]);temp.push(this.originalList[limit+1]);temp.push(this.originalList[limit+2]);this.dataList = temp;} else if (newCurrent === 2 && this.current === 0) { //数组 -1this.page -= 1;let limit = this.page * this.pageRecode;let temp = [];temp.push(this.originalList[limit]);temp.push(this.originalList[limit+1]);temp.push(this.originalList[limit+2]);this.dataList = temp;}console.info("page: " + this.page);console.info("dataList: " + this.dataList);//上一个视频暂停let videoContext = uni.createVideoContext('myVideo' + this.current, this);videoContext.pause();videoContext.seek(0);//当前视频播放videoContext = uni.createVideoContext('myVideo' + newCurrent, this);this.videoContext = videoContext;this.videoPlayButton = "/static/img/play.jpg";setTimeout(() => {videoContext.play();}, 500);this.play = true;this.current = newCurrent;},
/*===============================自定义视频拖动条 及播放暂停按钮start===========================================*///视频播放暂停按钮videoSwitch(index_: number) {if (this.play) {this.videoContext.pause();this.videoPlayButton = "/static/img/pause.jpg";this.play = false;} else {this.videoContext.play();this.videoPlayButton = "/static/img/play.jpg";this.play = true;}},// 拖动slider过程中触发事件sliderChanging() {//拖拽过程中，不允许更新进度条this.isDrag = true;},// 拖动slider完成后触发sliderChange(event: any) {var second = event.detail.value / 100 * this.videoTotalTime;this.videoContext.seek(second);this.sliderValue = event.detail.value,this.currTime = this.formatSeconds(second);this.isDrag = false;},/* 视频播放进度发生变化 触发event.detail = {currentTime, duration} 。触发频率 250ms 一次字节跳动小程序与飞书小程序不支持 */videoTimeUpdate(index: number, event: any) {let currentTime = event.detail.currentTime;let duration = event.detail.duration;let sliderValue = currentTime / duration * 100;this.currTime = this.formatSeconds(currentTime);// videoTotalTime 和 duration  后期直接从后端获取if (this.videoTotalTime === 0) {this.videoTotalTime = duration;this.duratioTime = this.formatSeconds(duration);}//拖动过程中不自动改变进度条if (!this.isDrag) {this.sliderValue = sliderValue;}},
// 根据秒获取时间 00:00formatSeconds(totalSecond: number) {let mm: string | number = parseInt((totalSecond / 60) + "");let ss: string | number = parseInt((totalSecond - 60 * mm) + "");if (mm < 10) {mm = "0" + mm;}if (ss < 10) {ss = "0" + ss;}let length = mm + ":" + ss;if (totalSecond > 0) {return length;} else {return "00:00";}},/*===============================自定义视频拖动条 及播放暂停按钮end===========================================*//*===============================底部弹窗start===========================================*///目录底部弹窗打开muluPopupOpen() {this.$refs['muluPopup'].open();},// 目录底部弹窗关闭changeMulu(e: any) {//待完善uni.showToast({title: '目录底部弹窗: ' + e.type + ' ,状态:' + e.show});},//充值底部弹窗打开payPopupOpen() {this.$refs['payPopup'].open();},//充值底部弹窗关闭change(e: any) {//待完善uni.showToast({title: '充值底部弹窗: ' + e.type + ' ,状态:' + e.show})}/*===============================底部弹窗end===========================================*/
}})</script>
<style lang="scss">.swiper {width: 100vw;height: 100vh;background-color: #000000;
.swiper-item {width: 100vw;position: relative;height: 100vh;background-color: #000000;}}
.video {position: relative;width: 100vw;height: 100vh;}
.popup-view-container {background-color: #ffffff;padding: 20rpx;height: 700rpx;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.line-h {height: 1rpx;margin: auto 0px;width: 280rpx;background-color: #000000;}
.list-flex-item-container {display: flex;color: black;justify-content: space-between;align-items: center;margin-bottom: 30rpx;flex-wrap: wrap;}
.list-flex-item {width: 90rpx;height: 30rpx;padding: 15rpx 60rpx;background-color: #e7e7e7;border-radius: 15rpx;}</style>  

标签：uniapp,videoContext,img,sectionId,微信,ts,let,video,id
From： https://www.cnblogs.com/zsw-wkx/p/16791358.html