uniapp 完成视频试用功能
最编程
2024-03-11 09:25:43
...
可以使用uniapp Video组件提供的@timeupdate方法去拿到当前播放到的时间
1. html代码
<template>
<video src="/static/mda-pasuqi06z2ig11x2.mp4" danmu-btn :danmu-list="danmuList" @play="playVideo" id="myVideo"
@timeupdate="videoTimeUpdateEvent">
</video>
</template>
2. js代码
data() {
return {
videoContext: {}, // 用于绑定视频标签
isPaused: false, // 用于记录是否已经暂停
danmuList: [{
text: '第 1s 出现的弹幕', // 弹幕内容
color: '#ff0000', // 弹幕字体颜色
time: 1, // 弹幕在视频的那个时间段显示
},
{
text: '第 2s 出现的弹幕',
color: '#ff0000',
time: 2
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
]
}
},
created() {
// 创建视频实例指向视频控件
this.videoContext = uni.createVideoContext('myVideo');
},
methods: {
videoTimeUpdateEvent(e) { // 播放进度改变
let currentTime = Number(e.detail.currentTime);
if (currentTime >= 6) { // 6 视频播放到6s的时候停止
this.videoContext.pause();
this.isPaused = true;
} else { // 视频回退6s以后接着播放
this.videoContext.play();
this.isPaused = false;
}
},
playVideo() { // 用户点击播放按钮时触发的方法
if (this.isPaused) {
this.videoContext.pause();
alert('请先开通会员')
return false
} else {
this.videoContext.play();
}
},
}
上一篇: uniapp 视频试用功能
下一篇: css3 三级菜单导航栏
推荐阅读
-
uniapp+nvue 开发仿微信语音+视频通话功能:实现一对一语音视频在线通话
-
uniapp+nvue 实现仿微软 app 聊天应用 -- 成功实现好友聊天 + 语音视频通话功能
-
uniapp+nvue 实现仿微软 app 聊天应用 -- 成功实现好友聊天 + 语音视频通话功能
-
[uniapp]视频分层,阻止其他弹出窗口或顶部导航 使用 nvue 叠加功能
-
uniapp、vue2.6、H5,利用腾讯 TRTC,快速跑通 1V1 视频功能
-
uniapp 视频播放功能
-
旷视天元开源图像比对工具 MegSpot,助力图像算法研发 - 1.多样化图像比对:可提供叠加比对、拖拽比对等多种比对方式,支持缩放、移动等同步操作,并可生成 GIF 保存比对结果。2. 2.专业呈现:支持像素级图像查看、图像直方图、RGB 查看;支持预览亮度、对比度、饱和度、灰度等指标。3. 视频对比:Cognizant Megapixel 可提供多种图像对比方法,如拖放对比等。 3.视频对比:除了支持视屏的所有图像对比功能外,CCTV MegSpot 还支持同步回放、回放暂停和快进、回放速度设置等功能。 4.跨平台支持:CCTV MegSpot 提供对 Mac、Linux 和 Windows 系统的跨平台支持,借助 Electron 框架,可以低成本完成跨平台应用的开发,并保证各平台体验的一致性。 此外,央视网MegSpot支持跨平台自动更新和数据持久化,确保用户体验的连续性,并支持中、英、日三种语言:MegSpot为大尺寸图像文件的对比提供了本地解决方案。 MegSpot 是一种用于比较大型图像文件的本地解决方案。
-
带试用功能的 Thinkphp5 三级分发视频播放系统源代码
-
JS 实现视频试用提示付款功能的手机 H5 网页
-
uniapp 完成视频试用功能