JS实现视频试看提示付费功能手机端 H5网页

手机端网页 JS实现视频试看功能，到时间自动停止播放 H5

场景：视频播放对未付费的用户只播放两分钟付费的用户可正常播放

思路：监听视频播放时间，到达预定时间的时候，暂停视频播放，同时关闭大屏播放，清除视频播放地址，将提示层显示出来。

第一步：设置视频播放

 <video controls="controls" src="视频播放地址" id="Video_play" crossorign="anonymous"> </video>

第二步：提示层（图片加提示语）

<div style="display: none" align="center" id="video_show" ><img src="__STYLE1__/img/video.png" alt="" style="width: 80%;height: 85%;"><p></p><p style="font-size: 12px;margin-top: 10px;color: #858585">该视频需要付费才可观看，如需继续观看，请点击下方购买按钮。如需重复观看请点击<a href="javascript:location.reload();" style="color: red">&nbsp;&nbsp;再看一次</a></p>
</div>

第三步：JS处理

<script>var video = document.getElementById("Video_play");//获取支付状态var video_status = "<?php echo $data['pay_status']?>";//如果未支付 if (video_status !=1){if(video){//使用事件监听方式捕捉事件video.addEventListener("timeupdate",function(){//用秒数来显示当前播放进度var timeDisplay = Math.floor(video.currentTime);//以秒为单位  2*60  两分钟if(timeDisplay>2*60){//视频暂停操作video.pause()//手机端视频全屏展示关闭this.webkitExitFullScreen();//去除视频地址src内容video.setAttribute('src',''); //将视频隐藏掉video.style.display="none";//提示层显示$('#video_show').show();}},false)}}
</script>

OK 全部内容能简单实现限制视频播放时长暂停提示购买功能

JS实现视频试看提示付费功能手机端 H5网页相关推荐

pc网站和手机端h5网站开发接入微信支付
有关支付类开发,现在比以前要简单很多了,微信和支付宝两大支付巨头早已经给出了非常详细的接入文档,并且迭代了好多版本,但在实际开发中其实文档的可读性还是有些磕磕绊绊的,而且也有一些坑需要注意.以微信支付 ...
手机端访问网页自动跳转至广告页面解决办法
手机端访问网页自动跳转到垃圾界面的解决办法这几天用手机访问网页频频出现弹出垃圾界面和广告的情况,令人愤怒不已,由于界面过于恶心,这里就不展示了- 今天就是总结一下怎么屏蔽这些广告界面和错误界面 HT ...
手机端H5开发，屏幕不同尺寸适配方法（屏幕自适应）
最近在接触手机端H5开发,然后设计师将设计图发给我们进行开发,对于第一次接触详细设计图开发的我来说,觉得很新颖毕竟一直没有接触这么正规的设计图(字体样式,颜色,大小等等),之后再开发的时候,就遇到了一 ...
h5适配华为手机_手机端H5页面适配踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
js判断是不是手机端访问网页，兼容iphone版本的UC浏览器
网上有很多代码在苹果手机的UC浏览器上是识别不出是手机端的,我测试过很多代码,最终得到下面最可行的: <script type="text/javascript">// ...
从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...
手机端h5唤起苹果地图
最近做一个项目分为pc和手机两个端,手机端需要调用第三方地图,可以选择高德地图和苹果地图,唤起高德地图的方法官网就有,网上一搜也是一大堆.这个不用多说,但唤起苹果地图的方法寥寥无几,几乎搜索不到,找了 ...
html+css手机端自适应网页
一,最近在做项目,写移动端的网页,主要是自适应的问题.bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦人,这里给大家介绍下我的方法, 也是结合了很多人的思路. 1.在头部加入这样的 ...
chrome浏览器调试手机端h5页面
这个是常识性的问题了.奈何我之前确实是不知道.只知道用F12来调试PC端的页面,这次经过同事指点,终于知道为啥人家在浏览器调试手机端页面,显示的大小都是手机端的. 步骤: 1.打开F12 2.如果所示 ...

JS实现视频试看提示付费功能手机端 H5网页

JS实现视频试看提示付费功能手机端 H5网页相关推荐

最新文章

热门文章

JS实现视频试看提示付费功能 手机端 H5网页

JS实现视频试看提示付费功能 手机端 H5网页相关推荐

最新文章

热门文章

JS实现视频试看提示付费功能手机端 H5网页

JS实现视频试看提示付费功能手机端 H5网页相关推荐