视频试看5分钟
缺陷：用戶在控制臺能直接拿到視頻url地址
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><title>視頻試看</title> </head> <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> <body> <!-- https://y1pindao.com/app/img/mp4/afd83049775b55c1f9e93132d9ff1e3f.mp4 --><div class="videobox"><video src="https://y1pindao.com/app/img/mp4/afd83049775b55c1f9e93132d9ff1e3f.mp4" poster="loading.gif" controls preload="auto" id="player"></video><div class="zhezhao"><div class="shikanjieshu"><div class="chongxinkaishibox"><img src="chongxinkaishi.png" /><div>試看結束,點擊重新開始</div></div></div></div></div><script type="text/javascript">let num = 60*5;let pl=document.getElementById("player"); 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://y1pindao.com/app/img/mp4/afd83049775b55c1f9e93132d9ff1e3f.mp4')pl.currentTime=0;pl.play();})</script> </body> </html>總結
