Uniapp + VUE3.0 实现双向滑块视频裁剪效果

原创

已于 2024-02-22 19:01:01 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #音视频 #javascript #css

于 2024-02-22 16:21:31 首次发布

效果图

<template>
  <view v-if="info" class="all">
    <video
        :src="info.videoUrl"
        class="video" id="video" :controls="true" object-fit="fill" :show-fullscreen-btn="false"
        play-btn-position="center"
        :autoplay="true" @loadedmetadata="loadedMetadata"></video>
    <view class="slider">
      <view class="thumb-left" @touchmove="e=>handleTouchMove(e,0)" @touchend="e=>handleTouchEnd(e,0)"
            :style="` margin-left: ${thumbLeft}px;`">{
  
  { start }}
      </view>
      <view class="slider-bg"></view>
      <view class="thumb-right" @touchmove="e=>handleTouchMove(e,1)" @touchend="e=>handleTouchEn