視頻幀數縮略圖

　　七牛雲-開源的播放器 sdk

　　一。項目中安裝

https://sdk-release.qnsdk.com/qiniu-web-player-1.2.3.js

<script charset="utf-8" type="text/javascript"  src="https://sdk-release.qnsdk.com/qiniu-web-player-1.2.3.js"></script>
引到項目中即可

　二。展示demo

　　html 部分

<div id="player" style="width: 640px; height: 480px;">
</div>

 　　javescript 部分

    window.onload = function () {
        loadPlay()
    }

    function loadPlay() {
　　　　　const url = "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4"
        player = new QPlayer({
            url: url,
            container: document.getElementById("player"),
        })
        player.on("ready", handleReady);
    }

   此時可以展示出基礎畫面

　　三。增加進度條上的視頻幀縮略圖

　　先以固定圖片作為代替。

　　　javascript

 const imgbase64 = "data:image/jpg;base64,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"
   
 function getVideoImage(e, time) {
　　　　　　// time 是當前鼠標懸浮的時間點。秒
        const jindutiao = document.getElementsByClassName('qplayer-timetooltip')[0]
        const imgBase = imgbase64
        var thubImg = document.getElementById("thubImg");
        if(thubImg) {
            thubImg.remove();
        }
        var img = new Image()
        img.src = imgBase
        img.id = "thubImg"
        img.className = "thubImg"
        img.style.top = "-80px"
        jindutiao.appendChild(img)
    }

　　css

<style>
    [data-balloon]:hover > .thubImg{
        opacity: 1 !important;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
    .thubImg {
        content: attr(data-balloon);
        bottom: 100%;
        left: 50%;
        margin-bottom: 11px;
        -webkit-transform: translate(-50%, 10px);
        transform: translate(-50%, 10px);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        pointer-events: none;
        transition: all 0.1s ease-out 0.1s;
        position: absolute;
        z-index: 1;
        width: 134px;
        height: 76px;
    }
</style>

　　　　將七牛雲sdk，下載到本地。進行修改源碼

　　　　搜索 handleHoverTooltips 。增加一下代碼

  // *** 當鼠標移動到進度條時
   getVideoImage(e, $o(t))

 

 

 

此時效果已經有了縮略圖。

 

 

 四。根據時間獲取視頻幀的縮略圖

C# 通用，利用插件ffmpeg.exe

        #region 生成視頻縮略圖
        [HttpGet("GenThupImage")]
        public QueryResultModel GenThupImage(int index)
        {
            QueryResultModel returnValue = new QueryResultModel();
            try
            {
                // 基本文件路徑
                string url = @"E:\300.research\Web_Vue_Components\demo_Video_qiniu\tool\";
                string videoName = "test";
                string base64 = "";
                string DirectoryPath = videoName + @"thubDir\";
                // 判斷是否有幀數圖片文件夾
                if (!Directory.Exists(url + DirectoryPath))
                {
                    Directory.CreateDirectory(url + DirectoryPath);
                }
                //判斷是否有當前秒數的圖片
                string ImagePath = url + DirectoryPath + index+"_test" + ".jpg";//為生成的縮略圖所在的路徑
                if (System.IO.File.Exists(ImagePath)) // 該幀圖片存在時
                {
                    base64 = getImgBase64(ImagePath);
                }
                else
                {  // 該幀圖片不存在時
                    string ffmpegPath = url + "ffmpeg.exe";//為ffmpeg的全路徑
                    string oriVideoPath = url + videoName+".mp4";//為視頻的全路徑
                    int frameIndex = index;//為幀處在的秒數
                    int thubWidth = 96;//為縮略圖的寬度
                    int thubHeight = 54; //為縮略圖的高度
                    string command = string.Format("\"{0}\" -i \"{1}\" -ss {2} -vframes 1 -r 1 -ac 1 -ab 2 -s {3}*{4} -f image2 \"{5}\"", ffmpegPath, oriVideoPath, frameIndex, thubWidth, thubHeight, ImagePath);
                    base64 = Execute(command, ImagePath);
                }
                returnValue.Data = base64;
                return returnValue;
            }
            catch (Exception ex)
            {
                returnValue.Code = QueryActionResult.ServerError;
                returnValue.Message = ex.Message;
                return returnValue;
            }

        }
        /// <summary>
        /// 調用cmd命令
        /// </summary>
        /// <param name="str"></param>
        private string Execute(string str, string ImagePath)
        {

            System.Diagnostics.Process p = new System.Diagnostics.Process();
            p.StartInfo.FileName = "cmd.exe";
            p.StartInfo.UseShellExecute = false;    //是否使用操作系統shell啟動
            p.StartInfo.RedirectStandardInput = true;//接受來自調用程序的輸入信息
            p.StartInfo.RedirectStandardOutput = true;//由調用程序獲取輸出信息
            p.StartInfo.RedirectStandardError = true;//重定向標准錯誤輸出
            p.StartInfo.CreateNoWindow = true;//不顯示程序窗口
            p.Start();//啟動程序

            //向cmd窗口發送輸入信息
            p.StandardInput.WriteLine(str + "&exit");
            p.StandardInput.AutoFlush = true;
            //獲取cmd窗口的輸出信息
            string output = p.StandardOutput.ReadToEnd();
            p.WaitForExit();//等待程序執行完退出進程
            p.Close();
            return getImgBase64(ImagePath);

        }
        public string getImgBase64(string imgPath)
        {
            Bitmap bmp = new Bitmap(imgPath);
            MemoryStream ms = new MemoryStream();
            bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
            byte[] arr = new byte[ms.Length];
            ms.Position = 0;
            ms.Read(arr, 0, (int)ms.Length);
            ms.Close();
            return Convert.ToBase64String(arr);
        }
        #endregion

　testthubDir 是幀圖片保存文件夾

　ffmpeg.exe 是取幀縮略圖的插件

　test.mp4 是源視頻

 　　文件夾中的內容。

 

此時可以根據接口，傳遞當前時間，返回當前的縮略圖。

此時只是第一步。剛寫到這里。

接下來打算按照b站的思路。

把一個視頻分成5段。

然后截出500張圖。

然后拼成5個雪碧圖。

最多5個請求即可返回所有的縮略圖，然后進行展示，就可以達到你想要到效果，此段代碼根據使用場景自行修改，便不發了。

getVideoImage方法中，的參數 time 是指當前鼠標懸浮的秒數。