video 试看功能 可自定义时间 两种方法

<link href="http://vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet">
<script src="http://zln.laowushangcheng.com/static/zln/js/jquery.min.js"></script>
    <div class="theme-popover">
        <div class="theme-poptit">
            <a href="javascript:;" title="关闭" class="close">×</a>
        </div>
        <div class="mv">
            <!-- video属性(自动播放)：autoplay="autoplay" -->
            <video id="my-video" autoplay="autoplay"  src="https://sc.laowushangcheng.com/attachment/videos/20200811/8bda98e2113c94467f6ab51608780668.mp4" controls preload="auto" width="1296" height="728"
                   poster="video/cover.png" data-setup="{}">
            </video>


            <div class="zhezhao">
                <div class="shikanjieshu">
                    <div class="chongxinkaishibox">
                        <img src="chongxinkaishi.png" />
                        <div>试看结束,点击重新开始</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="theme-popover-mask"></div>　
    <a href="javascript:void(0)" id="play">试看<i></i></a>
    <script type="text/javascript">

        $(document).ready(function () {


            $('#play').on("click" , function(e){
                $('.theme-popover-mask').show();

                $('.theme-popover').show();
                /*autoplay video*/
                var my_video=videojs('my-video');
                videojs('my-video').ready(function(){

                    var myvideo= this;
                    myvideo.play();
                });
            });


            /*close button*/
            $('.close').on("click" , function (){
                $('.theme-popover-mask').fadeOut(100);
                $('.theme-popover').slideUp();
                $('#viedo').remove();
                /*close video*/
                var my_video=videojs('my-video');
                videojs('my-video').ready(function(){

                    var myvideo= this;

                    /* myvideo.ended();*/
                    myvideo.currentTime(0);
                    myvideo.pause();

                    /* myvideo.paused();*/
                });

            });


            let num = 4;//试看时间
            let pl=document.getElementById("my-video");
            pl.addEventListener("timeupdate",function(){
                if(parseInt(pl.currentTime)>=num){
                    pl.pause()//暂停
                    
                    document.getElementsByClassName('zhezhao')[0].style.display = 'block';
                    console.log(pl)
                    pl.setAttribute('src','')
                }
            })

            document.getElementsByClassName("zhezhao")[0].addEventListener('click',function(){
                console.log('重新开始')
                document.getElementsByClassName('zhezhao')[0].style.display = 'none';
                pl.setAttribute('src','https://sc.laowushangcheng.com/attachment/videos/20200811/8bda98e2113c94467f6ab51608780668.mp4')
                pl.currentTime=0;
                pl.play();
            })




        })
    </script>
    <style type="text/css">
        /*** 重新开始 样式**/
        *{
            margin: 0;
            padding: 0;
        }
        .videobox{
            position: relative;
            width: 100%;
        }
        .videobox video{ width: 100%;  }
        .zhezhao{
            position: absolute;
            background: #000;
            width: 100%;
            top: 0;
            bottom: 0;
            display: none;
            z-index: 9;
            cursor: pointer;
        }
        .shikanjieshu{
            color: #fff;
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .chongxinkaishibox{
            text-align: center;
            font-size: 12px;
        }
        .chongxinkaishibox img{
            width: 30px;
        }
    </style>

    <style type="text/css">
        /** 视频弹窗 样式*/
        /*video*/
        .theme-popover{
            z-index:9999;
            position:fixed;
            top:0%;
            left:50%;
            width:1296px;
            height: 728px;
            margin:20px 0 0 -648px;
            border:solid 2px #666;
            display:none;
            box-shadow: 0 0 10px #666;
        }
        .theme-poptit a{
            position: absolute;
            right: -8px;
            top: -10px;
            color: rgb(0, 0, 0);
            font-size: 20px;
            background: rgb(255, 255, 255);
            border-radius: 15px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            text-decoration:none;
            z-index: 1000;
        }

        .theme-popover-mask{
            z-index: 9998;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:#000;
            opacity:0.4;
            filter:alpha(opacity=40);
            display:none;
        }
    </style>

缺陷：用户在控制台能直接拿到视频url地址

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>23</title>

	</head>
	<body>
		<video id="video" src="./video.mp4" controls="controls">
			您的浏览器不支持 video 标签。
		</video>
		<script>
			var video = document.getElementById('video')
			var timer;
			var timeDisplay
			//点击开始事件
			video.addEventListener('play', function(e) {
				//获取当前播放的时间指针
				timeDisplay = Math.floor(video.currentTime);
				//当时间大于10秒时
				if(timeDisplay>2){
					//停止
					video.pause(); 
					alert(timeDisplay+"试看结束");
				}else{
					//定时器
					timer = setInterval("CountDownTime()",1000);
				}
			})
			//进度条移动事件
			video.addEventListener('seeking', function(e) {
				//移动到大于10秒自动返回
				if(video.currentTime>2){
					video.currentTime=2;
				}
			})
			function CountDownTime() {
				timeDisplay = Math.floor(video.currentTime);
				if(timeDisplay>=2){
					video.pause(); 
					//关闭定时器
					clearInterval(timer);
				}
			}
		</script>
	</body>
</html>