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 全部内容 能简单实现限制视频播放时长 暂停提示购买功能