生成视频缩略图

本次讲解的是如何生成网页播放器中的视频缩略图:
缩略图

可以看到视频进度条中有缩略图,那这样的缩略图是如何完成的呢?
我采用的是将视频(video)画面,使用canvas循环生成出来,直到执行完毕

主要核心代码

setInterval(function(){
    dpSuo.seek((num+1)*5);//视频快进
    ctx.save();//保存绘图状态
    ctx.restore();//还原绘图状态
    let L = ((num)%30);//设置位置(左)
    let T = ((num-(num%30))/30);//设置位置(上)
    ctx.drawImage(dpSuo.video,L*w,T*h,w,h);//绘图: (video画面,左距离,右距离,宽,高)
    num += 1;
},500)

整体全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩略图</title>
    <script src="/js/hls.js"></script>
    <link href="/css/DPlayer.min.css" rel="stylesheet">
    <script src="js/DPlayer.min.js"></script>
    <style>
        #play{
            width:800px; height:500px;
        }
        #con{
            width:160px; height:90px;
            margin-left:-300px; overflow: hidden;
        }
        #myCanvas{
            width:1000px; height:1400px; border:1px solid red;
        }
        .jin{
            position: absolute;
            left:0; top:0; z-index:2;
            width:100%; height:100%; background:rgba(0,0,0,1);
            display:none;
        }
        .jin .heng{
            position:absolute;
            left:5%; top:50%;
            width:90%; height:30px; border-radius:10px; background:url(img/jin.gif) #dae8dc;
        }
        .jin .hen{
            position:absolute;
            left:0; top:0;
            width:0; height:30px; background:#3bf467; border-radius:10px;
        }
        .jin span{
            position:absolute;
            left:50%; width:140px; margin-left:-70px; height:30px; line-height:30px; color:#fff; top:-30px;
        }
    </style>
</head>
<body>
    <div id="play">
        
    </div>
    <div id="btn">
        <input value="play/play.mp4">
        <button>开始</button>
    </div>
    <div id="con">
        <div id="myCanvas"></div>
    </div>
    <script>
        let div = document.querySelector("#play");
        let myDiv = document.getElementById('myCanvas');
        let aBtn = document.querySelectorAll("#btn button");
        let oText = document.querySelector("#btn input");
        let miao = 0;
        let timer1 = null;
        let num = 0;
        let timer = null;
        let he = true;
        let dpSuo = new DPlayer({
            container:div,
            video:{
                url:'play/play.mp4'
            }
        });
        console.log(div);
        aBtn[0].onclick = function(){
            play(oText.value);
        };
        function play(url){
            console.log("开始");
            dpSuo = new DPlayer({
                container:div,
                video:{
                    url:url
                }
            });
            time();
        }
        function suo(miao,w=160,h=90,ti=500){
            let jin = document.createElement("div");
            jin.className = "jin";
            jin.innerHTML = `<div class="heng"><div class="hen"></div><span>0%</span></div>`;
            div.appendChild(jin);
            jin.style.display = "block";
            let oHen = document.querySelector(".hen");
            let oSpan = document.querySelector(".heng span");
            let oCanvas = document.createElement("canvas");
            oCanvas.width = myDiv.offsetWidth;
            oCanvas.height = myDiv.offsetHeight;
            let ctx = oCanvas.getContext('2d');
            
            myDiv.appendChild(oCanvas);
            
            window.onbeforeunload = function (e) {
                var e = window.event || e;
                e.returnValue = ("确定离开当前页面吗~");
                document.body.focus();
            }

            timer = setInterval(function(){
                jin.style.display = "block";
                oHen.style.width = (num/miao)*100 + "%";
                oSpan.innerHTML = `${parseInt((num/miao)*100)}%  ->> ${miao}-${num}`;
                dpSuo.seek((num+1)*5);
                if(num>miao-1){
                    clearInterval(timer);
                    num = 0;
                    oSpan.innerHTML = "执行完毕~";
                    document.querySelector("#con").style.margin = 0;
                    document.querySelector("#con").style.overflow = "";
                    oCanvas.toDataURL('image/jpg');
                    jin.style.display = "none";
                    alert("结束了");
                    return false;
                }
                ctx.save();
                ctx.restore();
                let L = ((num)%30);
                let T = ((num-(num%30))/30);
                ctx.drawImage(dpSuo.video,L*w,T*h,w,h);
                num += 1;
            },ti)
        }

        function time(fn){
            timer1 = setInterval(function(){
                if(dpSuo.video.duration){
                    miao = Math.ceil((Math.ceil(dpSuo.video.duration) / 5));//图片个数
                    myDiv.style.width = 160*30 + "px";
                    myDiv.style.height = 90*(((miao-(miao%30))/30)+1) + "px";
                    clearInterval(timer1);
                    suo(miao);
                    return false;
                }
            },200);
        };
    </script>
</body>
</html>

视频播放需要基于 hls、dplayer,当然主要思路就是 canvas 绘图,定时保存于恢复绘图,放进一个盒子里面,执行完毕就保存即可。

体验链接

posted @ 2020-03-26 23:25  爱穿拖鞋的程序员  阅读(1170)  评论(0)    收藏  举报