https://www.qab.co.jp/videojs8/plugins/videojs.thumbnails.js

1/**
2 * @license
3 * Copyright (c) 2023 The Nuevodevel Team. All rights reserved.
4 * Thumbnails Plugin for Video.js v8
5 */
6!function(){var e={align:"vertical",timeTooltip:!0,width:160,height:90,basePath:"",src:"",responsive:!1,mediaqueries:{tiny:.5,small:.75,medium:1,large:1.25,xlarge:1.5}},t=function(){var e,r,s,i,o;for(s in r=(e=Array.prototype.slice.call(arguments)).shift()||{},e)for(o in i=e[s])i.hasOwnProperty(o)&&("object"==typeof i[o]?r[o]=t(r[o],i[o]):r[o]=i[o]);return r},r=function(t){var r,s,i;if(-1===(s=t.indexOf("#")))return{src:t,w:0,h:0,x:0,y:0};if(r=t.substring(0,s),"xywh="!==(i=t.substring(s+1)).substring(0,5))return{src:e.basePath+r,w:0,h:0,x:0,y:0};var o=i.substring(5).split(",");return{src:e.basePath+r,w:parseInt(o[2]),h:parseInt(o[3]),x:parseInt(o[0]),y:parseInt(o[1])}};videojs.registerPlugin("thumbnails",function(s){var o,n,a,d,l,h,u,c,v,m,p,f,g,y;function w(e){const t=function(e){const t=e.split("."),r=t[0].split(":");return{milliseconds:parseInt(t[1],10)||0,seconds:parseInt(r.pop(),10)||0,minutes:parseInt(r.pop(),10)||0,hours:parseInt(r.pop(),10)||0}}(e);return parseInt(3600*t.hours+60*t.minutes+t.seconds+t.milliseconds/1e3,10)}function x(e){fetch(e).then(e=>e.text()).then(e=>{if(e.length>0){var t=function(e){var t=[];return e.split(/[\r\n][\r\n]/i).forEach(function(e){if(e.match(/([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?( ?--> ?)([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?[\r\n]{1}.*/gi)){const r=e.split(/[\r\n]/i),s=r[0].split(/ ?--> ?/i),i=s[0],o=s[1],n=r[1];t.push({startTime:w(i),endTime:w(o),text:n})}}),t}(e);t.length>0&&(y=t,j())}})}function j(){(o=document.createElement("div")).className="vjs-thumbnail-holder",(a=document.createElement("canvas")).className="vtt_canvas",a.style.position="absolute",a.style.left="0",a.style.top="0",o.appendChild(a),tooltip=document.createElement("div"),tooltip.className="vjs-thumb-tooltip",(d=document.createElement("img")).className="vjs-thumb-image",d.style.visibility="hidden",d.style.left="-500px",d.style.top="-500px",document.body.appendChild(d),o.appendChild(tooltip);var e=r(y[0].text),t=new Image;e.src&&(t.src=e.src),c.el().appendChild(o),l.shadowSlide&&(l.el_.querySelector(".vjs-thumb-poster")||((u=document.createElement("div")).className="vjs-thumb-poster",h=document.createElement("canvas"),u.appendChild(h),l.el_.insertBefore(u,l.el_.querySelector(".vjs-poster")))),m=l.duration(),l.on("durationchange",function(e){m=l.duration()}),l.on("loadedmetadata",function(e){m=l.duration()});var s=c.el_.querySelector(".vjs-play-progress").querySelector(".vjs-time-tooltip");s&&videojs.dom.addClass(s,"vjs-abs-hidden"),mtp=c.el().querySelector(".vjs-mouse-display"),mtp&&(mtp.style.opacity=0);var i=!1,n=Object.defineProperty({},"passive",{get:function(){return i=!0,!0}});window.addEventListener("testPassive",null,n),window.removeEventListener("testPassive",null,n),v.addEventListener("mousemove",p),v.addEventListener("mouseleave",f),v.addEventListener("mousedown",L),v.addEventListener("touchstart",S,!!i&&{passive:!1})}function b(){progressIndex(!1),o.classList.remove("vjs-thumb-show"),l.shadowSlide&&(u.removeAttribute("style"),h.width=0,h.height=0)}function E(){videojs.holderdown=!1,document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",E),b()}function L(e){progressIndex(!0),videojs.holderdown=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",E),p(e)}function q(){v.removeEventListener("touchmove",p),v.removeEventListener("touchend",q),b()}function S(e){videojs.holderdown=!1,p(e),v.addEventListener("touchmove",p),v.addEventListener("touchend",q)}e.basePath="",n=t({},e,s),l=this,s&&(s.basePath&&(e.basePath=s.basePath),s.width&&s.height&&(e.width=s.width,e.height=s.height),s.src&&l.on("ready",function(){l.trigger("medialoaded",{xml:s.src})})),l.on("medialoaded",function(e,t){y=[],c=l.controlBar.progressControl,(v=l.el_.querySelector(".vjs-progress-holder")).removeEventListener("touchstart",S),v.removeEventListener("mousemove",p),v.removeEventListener("mouseleave",f),v.removeEventListener("mousedown",L),l.sprite=!1;var s=l.el_.querySelector(".vtt_canvas");s&&s.parentNode.removeChild(s);var i=l.el_.querySelector(".vjs-thumb-tooltip");i&&i.parentNode.removeChild(i);var n=l.el_.querySelector(".vjs-thumb-image");n&&n.parentNode.removeChild(n);var a=l.el_.querySelector(".vjs-thumbnail-holder");if(a&&a.parentNode.removeChild(a),t&&t.xml)x(t.xml);else{c=l.controlBar.progressControl,v=l.el_.querySelector(".vjs-progress-holder");var d=l.textTracks().length;if(0===d)return void(o&&videojs.dom.addClass("div","vjs-hidden"));var h=!1;for(m=0;m<d;){if("metadata"===l.textTracks()[m].kind){if(void 0===(g=l.textTracks()[m]).src)return;if(g.src)return void x(g.src);if(g.mode="hidden",h=!0,(g=l.textTracks()[m]).mode="showing",null==g.cues)return void(g.mode="hidden");var u=g&&g.cues.length;break}m++}if(1!=h)return void(o&&videojs.dom.addClass("div","vjs-hidden"));if((u=(g=l.textTracks()[m])&&g.cues.length)<1)return;var m=0;for(l.sprite=!0;m<u;){var w=g.cues[m];ctt=r(w.text),m++}y=g&&g.cues,j()}}),f=function(e){progressIndex(!1),!0!==videojs.holderdown&&o.classList.remove("vjs-thumb-show")},progressIndex=function(e){e?c.el().setAttribute("style","z-index:22"):c.el().removeAttribute("style")},a=null,p=function(e){progressIndex(!0),e.preventDefault(),m=l.duration();var t=c.el().querySelector(".vjs-progress-holder"),s=c.el().querySelector(".vjs-play-progress"),v=t.getBoundingClientRect(),p=null;e.pageX?p=e.pageX:e.changedTouches&&(p=e.changedTouches[0].pageX||e.touches[0].clientX);var f=p-v.left;if(0==f&&videojs.holderdown&&s.offsetWidth,f<0&&(f=0),f>t.offsetWidth&&(f=t.offsetWidth),n.timeTooltip){var g=f/t.offsetWidth*m,w=o.querySelector(".vjs-thumb-tooltip");w&&(w.innerHTML=function(e,t){e=e<0?0:e;let r=Math.floor(e%60),s=Math.floor(e/60%60),i=Math.floor(e/3600);const o=Math.floor(t/60%60),n=Math.floor(t/3600);return(isNaN(e)||e===1/0)&&(i=s=r="-"),(i=i>0||n>0?i+":":"")+(s=((i||o>=10)&&s<10?"0"+s:s)+":")+(r<10?"0"+r:r)}(g,m))}var x=y.length;i=0;for(var j=!1;i<x;){var b=y[i];if(b.startTime<=g&&b.endTime>=g){j=!0;var E=r(b.text);break}i++}if(E&&(E.iw=E.w,E.ih=E.h,E))if(1==j){o.classList.remove("vjs-thumb-hidden");var L=!1,q=E.src.replace(/\.\.\//g,"");d.src.indexOf(q)<0&&(d.src=E.src,L=!0),0===E.w&&(E.w=n.width,d.style.width=E.w+"px"),0===E.h&&(E.h=n.height,d.style.height=E.h+"px");var S=1;if(n.responsive&&n.mediaqueries){var I=l.el_.offsetWidth;I<=320&&(S=n.mediaqueries.tiny),I>320&&I<=540&&(S=n.mediaqueries.small),I>540&&I<=1080&&(S=n.mediaqueries.medium),I>1080&&I<=1600&&(S=n.mediaqueries.large),I>1600&&(S=n.mediaqueries.xlarge)}var _=E.w*S,C=E.h*S;o.style.width===_&&o.style.height===C||(o.style.width=_+"px",o.style.height=C+"px");var T=a.getContext("2d");L?d.onload=function(){a.width=_,a.height=C,E.x=0,E.y=0,T.drawImage(d,E.x,E.y,E.w,E.h,0,0,a.width,a.height)}:E.iw>0&&E.ih>0&&(a.width=_,a.height=C,T.fillRect(0,0,_,C),T.drawImage(d,E.x,E.y,E.w,E.h,0,0,a.width,a.height));var N=_/2,P=c.el().offsetWidth,k=l.el_.querySelector(".vjs-progress-holder").offsetLeft,W=N-k;if(f+N+k>P?f=P-_:f<W?f=0:f-=W,o.style.left=parseInt(f)+"px",o.classList.add("vjs-thumb-show"),videojs.holderdown&&l.shadowSlide){l.el_.querySelector(".vjs-thumb-poster")||((u=document.createElement("div")).className="vjs-thumb-poster",h=document.createElement("canvas"),u.appendChild(h),l.el_.insertBefore(u,l.el_.querySelector(".vjs-poster")));var M=h.getContext("2d");h.width=l.el_.offsetWidth,h.height=l.el_.offsetHeight,u.style.width=h.width+"px",u.style.height=h.height+"px",M.clearRect(0,0,h.width,h.height),M.drawImage(d,E.x,E.y,E.w,E.h,0,0,h.width,h.height)}}else o.classList.add("vjs-thumb-hidden")}})}();