video视频怎么实现截屏功能呢

没人回复

请问解决了吗

解决了吗？

VLC多媒体播放器、支持rtsp、rtmp、mms、ftp、udp/rtp等等大多数格式、截图、录制、速率、快进、倒退、音量、窗口缩放、视频纵横比、音轨等等：https://ext.dcloud.net.cn/plugin?id=8762

用rendjs 截屏可以实现

vue 页面

<video :prop="videoUrl" :change:prop="rdVideo.getAllPoster" v-show="false" id="myVideo" :src="videoUrl"  
      :autoplay="true" :muted="true"></video>  
<script>  
export default {  
 methods: {  
      async updateVideos(newVal) {     
console.log(newVal)  
        // 封面图回调  
      }  
}  
}  
</script>  
<script module="rdVideo" lang="renderjs">  
  import mixinVideo from './video-poster.js'  
  // 监听videos, 有更改调用rdVideo.getAllPoster方法获取视频封面  
  export default {  
    mixins: [mixinVideo]  
  }  
</script>

video-poster.js 页面

const mixinVideo = {  
  methods: {  
    getVideoPoster(url) {  
      return new Promise((resolve, reject) => {  
        let videoUrl  
        const $video = document.createElement('video')  
        $video.src = url  
        $video.autoplay = true  
        $video.setAttribute('crossOrigin', 'anonymous')  
        $video.play()  
        $video.muted = true  
        $video.addEventListener('timeupdate', () => {  
          if ($video.currentTime > 0.5) {  
            $video.pause()  
          }  
        })  
        $video.addEventListener('loadeddata', () => {  
          var canvas = document.createElement('canvas')  
          canvas.width = $video.videoWidth * 0.8  
          canvas.height = $video.videoHeight * 0.8  
          canvas  
            .getContext('2d')  
            .drawImage($video, 0, 0, canvas.width, canvas.height)  
          const img = canvas.toDataURL('image/png', 0.5)  
          resolve(img)  
        })  

        $video.addEventListener('error', err => {  
          console.log('视频加载失败', err)  
          reject(err)  
        })  
      })  
    },  
    async getAllPoster(newVal, oldVal, owner, instance) {  
      console.log(newVal)  
      console.log(oldVal)  
      if (!newVal) return  
      // renderjs中，监听的属性videos是一个数组，存放的是选取的视频信息       
      // 删除，或updateVideos更新后（长度一样）  
      // 有默认值或添加时  
      let videoUrl = ''  
      // 已获取视频封面的不再重复获取      
      let url = newVal  
      // 拍摄视频：_doc/uniapp_temp_1650594368317/camera/1650594390147.mp4  
      // 网络视频：https://  
      // 本地视频：file://  
      if (!newVal.includes('file://') && !newVal.includes('https://')) {  
        // 将本地URL路径转换成平台绝对路径  
        // 如输入url为“_doc/a.png”：  
        // Android平台转换后的路径为“/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/ａ.png”；  
        // #ifdef APP-VUE  
        url = 'file://' + plus.io.convertLocalFileSystemURL(newVal)  
        // #endif     
      }  
      const dataUrl = await this.getVideoPoster(url)  
      console.log(dataUrl)  
      videoUrl = dataUrl  
      console.log(this.$ownerInstance.callMethod)  
      this.$ownerInstance.callMethod('updateVideos', videoUrl)  
    }  
  }  
}  

export default mixinVideo