首页 > 其他分享 >直播系统源代码,uniapp实现禁止video拖拽快进

直播系统源代码,uniapp实现禁止video拖拽快进

时间:2023-08-04 14:13:37浏览次数:44  
标签:real uniapp 播放 currentTime video time var 源代码

直播系统源代码,uniapp实现禁止video拖拽快进

 

<!--1.video标签-->
<video id="myVideo" @timeupdate="videoFun" :src="videourl" initial-time="initial_time" >
<script>
export default {
data() {
    //2.data数据部分
return {
videourl: "https://vd3.bdstatic.com/mda-me38qw5ayq6m5x6k/sc/cae_h264/1620080580731464743/mda-me38qw5ayq6m5x6k.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1654941744-0-0-e46a5e5c83b069fcaf54124cd256af20&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1944747745&vid=1074518001243819841&abtest=102599_2-102777_6-102784_1-17451_1-3000225_3-3000232_1&klogid=1944747745",
video_real_time: 0, //实时播放进度
nitial_time: '', //视频跳转进度 秒
}
},
onLoad(option) {
//3.onload部分
this.initial_time = '0' //视频进度
},
methods: {
//4.方法部分
videoFun(e){
var isReady = 1; // 是否开启可以视频快进 1 禁止开启
//跳转到指定播放位置 initial-time 时间为秒
let that = this;
//播放的总时长
var duration = e.detail.duration
//实时播放进度 秒数
var currentTime = parseInt(e.detail.currentTime)
//当前视频进度
// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间,以秒为单位
if (that.video_real_time == 0) {
var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
} else {
var jump_time = parseInt(that.video_real_time)
}
if (isReady == 1) {
if (currentTime > jump_time && currentTime - jump_time > 3) {
let videoContext = wx.createVideoContext('myVideo')
videoContext.seek(that.video_real_time)
wx.showToast({
title: '未完整看完该视频,不能快进',
icon: 'none',
duration: 2000,
})
}
}
that.video_real_time = currentTime //实时播放进度
}
}
}
</script>

 

以上就是 直播系统源代码,uniapp实现禁止video拖拽快进,更多内容欢迎关注之后的文章

 

标签:real,uniapp,播放,currentTime,video,time,var,源代码
From: https://www.cnblogs.com/yunbaomengnan/p/17605763.html

相关文章

  • uniapp 使用camera组件IOS圆角不生效问题
    <viewclass="cameraViewgui-margin-top"><cameraclass="camera-box"device-position="front"flash="off"></camera></view>.cameraView{width:600rpx;height:600rpx;border-radius:50%;bord......
  • HTML5 VideoAPI,打造自己的Web视频播放器
    本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。一、基础知识1.用法<video src="./video/mv.mp4"></video>注意:audio和video元素必须同时包含开始和结束标签,不能使用<audio/>这样的空元素语法......
  • uniapp使用elementui表格等组件
    uniapp使用elementui表格安装element-uinpmielement-ui-S引入Element直接使用组件<el-table:data="list"style="width:100%"size="small"border> <el-table-columnprop="status"label="签约日期"width......
  • Capturing Video on iOS iOS拍摄视频的方法总结
    https://www.objc.io/issues/23-video/capturing-video/With processing powerandcamerahardwareimprovingwitheverynewrelease,usingiPhonestocapturevideoisgettingmoreandmoreinteresting.They’resmall,light,andinconspicuous,andthequalityg......
  • uniapp底部弹出层
    methods:{changeRelation(){uni.showActionSheet({itemList:['妻子','丈夫','妈妈','爸爸','爷爷','奶奶','儿子','女儿','兄弟姐妹','亲......
  • uniapp中使用微信支付
     超简单wx.requestPayment({ timeStamp:zhifu.timeStamp,//需要的参数,由后端返回 nonceStr:zhifu.nonceStr,//需要的参数,由后端返回 package:zhifu.prepayId,//需要的参数,由后端返回 signType:zhifu.signType,//需要的参数,由后端返回 paySign:zh......
  • 多语言API接口接入电商平台获得商品快递费用源代码演示示例
     商品快递费用API接口的作用是通过调用接口获取特定商品的快递费用信息。具体而言,该接口可以提供以下功能和作用:实时获取快递费用:通过API接口可以实时查询不同快递公司对于指定商品的运费费用。用户可以根据商品的重量、尺寸、寄送地址等信息,调用接口获取最准确的快递费用。便于物......
  • uniapp 之h5修改全局滚动条(浏览器下滑有小矩形滚动条)
    在index.html文件里<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,user-scalable=no,initial-......
  • LiveVideoStackCon 倒数计时:0
    我们悄无声息流走的智慧,有望在群体深度的信息和广泛的论辩中重新获得。                                             ——LinusTorvalds图片来源:《纽约时报》时间倒回两个月前,阿里......
  • ​来,一起搞AV,LiveVideoStack Meet再启动
    作者 |包研上周,大师兄的一篇《近期对流媒体技术的思考》道出了多媒体技术圈的现状,一句“如果你身边有一个从事音视频技术开发的朋友、同事,请珍惜和他的友谊,因为他对音视频技术确实是真爱,而且是深爱的那种”戳中了内心,一时语塞。从2017年发出第一篇公众号文章(3月10日),到第一个公开......