uniapp实现无法快进的视频

简介: uniapp实现无法快进的视频

html:

<video :poster="url + cover" id="myVideo" :title="data.course_title" enable-progress-gesture="false"
      show-loading="true" show-center-play-btn="true" vslide-gesture="true" show-mute-btn="true"
      enable-play-gesture="true" auto-pause-if-navigate="true" vslide-gesture-in-fullscreen="true"
      auto-pause-if-open-native="true" :initial-time="videoContext" style="width: 100%;" :src="data.video_url"
      controls @timeupdate="videoTimeUpdateEvent">></video>

js:

export default {
    data() {
      return {
        data: [], //数据
        url: getApp().globalData.url, //域名
        currentTime: '', //现在的时长
        durationTime: '', //总时长
        jilu: [], //记录
        status: false,
        videoContext: 0,
        watch: 0, //用来判断是否快进
        box: null,
        cover: ''
      }
    },
    onHide() {
      this.box.pause()
    },
    onLoad() {
      this.cover = uni.getStorageSync('cover').url
    },
    onReady() {
      this.box = uni.createVideoContext('myVideo')
    },
    methods: {
      videoTimeUpdateEvent(e) {
        this.currentTime = Number(e.detail.currentTime);
        if (this.currentTime - this.watch > 10) {
          uni.showToast({
            title: '不能快进',
            icon: 'none'
          })
          this.box.seek(this.watch)
          this.videoContext = this.watch
        } else {
          this.watch = this.currentTime
        }
      },
    }
相关文章
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
138 2
|
5月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
195 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
70 5
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
107 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
112 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
107 3
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
89 3
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
81 2
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的实验室安全考试系统附带文章源码部署视频讲解等
94 2

热门文章

最新文章

相关实验场景

更多