prueba thumbnail

parent d550d8b5
/*!
* @name videojs-thumbnails
* @version 1.0.3
* @author Mariusz Rajczakowski <mrajczakowski@gmail.com>
* @license MIT
*/.vjs-thumbnail-holder{position:absolute;left:-1000px;bottom:11px;height:86px}.vjs-thumbnail-img{max-width:none;position:absolute;left:0;bottom:16px;opacity:0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;height:86px;padding:5px 0 23px;background:hsla(0,0%,100%,.7)}.vjs-progress-control.fake-active .vjs-thumbnail-img,.vjs-progress-control.fake-active .vjs-thumbnail-time,.vjs-progress-control:active .vjs-thumbnail-img,.vjs-progress-control:active .vjs-thumbnail-time,.vjs-progress-control:hover .vjs-thumbnail-img,.vjs-progress-control:hover .vjs-thumbnail-time{opacity:1}.vjs-progress-control:active .vjs-thumbnail-holder:active,.vjs-progress-control:active .vjs-thumbnail-holder:active .vjs-thumbnail-time,.vjs-progress-control:hover .vjs-thumbnail-holder:hover,.vjs-progress-control:hover .vjs-thumbnail-holder:hover .vjs-thumbnail-time{opacity:0}.vjs-thumbnail-time{bottom:23px;opacity:0;color:#333;font-size:1.1em;width:40px;margin-left:-20px;position:absolute;z-index:1}.vjs-thumbnail-arrow{bottom:12px;position:absolute;opacity:.7;width:10px;margin-left:-5px;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff}
/*# sourceMappingURL=videojs-thumbnails.min.css.map */
\ No newline at end of file
/*!
* @name videojs-thumbnails
* @version 1.0.3
* @author Mariusz Rajczakowski <mrajczakowski@gmail.com>
* @license MIT
*/
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.videojsThumbnails=e()}}(function(){return function e(t,n,o){function i(r,a){if(!n[r]){if(!t[r]){var l="function"==typeof require&&require;if(!a&&l)return l(r,!0);if(u)return u(r,!0);var f=new Error("Cannot find module '"+r+"'");throw f.code="MODULE_NOT_FOUND",f}var c=n[r]={exports:{}};t[r][0].call(c.exports,function(e){var n=t[r][1][e];return i(n?n:e)},c,c.exports,e,t,n,o)}return n[r].exports}for(var u="function"==typeof require&&require,r=0;r<o.length;r++)i(o[r]);return i}({1:[function(e,t,n){(function(e){"undefined"!=typeof window?t.exports=window:"undefined"!=typeof e?t.exports=e:"undefined"!=typeof self?t.exports=self:t.exports={}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e){return e&&"object"===("undefined"==typeof e?"undefined":r(e))&&"default"in e?e.default:e}var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i("undefined"!=typeof window?window.videojs:"undefined"!=typeof l?l.videojs:null),l=e(1),f=function(){function e(){o(this,e)}return u(e,null,[{key:"hidePlayerOnHoverTime",value:function(e){var t=e.el_.getElementsByClassName("vjs-mouse-display")[0];t.style.display="none"}},{key:"createThumbnails",value:function(){for(var t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];var i=n.shift()||{};return Object.keys(n).map(function(t){var o=n[t];return Object.keys(o).map(function(t){return o.hasOwnProperty(t)&&("object"===r(o[t])?i[t]=e.createThumbnails(i[t],o[t]):i[t]=o[t]),i}),i}),i}},{key:"getComputedStyle",value:function(e,t){return function(n){return l.window.getComputedStyle?l.window.getComputedStyle(e,t)[n]:e.currentStyle[n]}}},{key:"getVisibleWidth",value:function(t,n){if(n)return parseFloat(n);var o=e.getComputedStyle(t)("clip");return"auto"!==o&&"inherit"!==o&&(o=o.split(/(?:\(|\))/)[1].split(/(?:,| )/),4===o.length)?parseFloat(o[1])-parseFloat(o[3]):0}},{key:"getScrollOffset",value:function(){return l.window.pageXOffset?{x:l.window.pageXOffset,y:l.window.pageYOffset}:{x:l.document.documentElement.scrollLeft,y:l.document.documentElement.scrollTop}}},{key:"suportAndroidEvents",value:function(e){var t=e.controlBar.progressControl,n=function(){t.addClass("fake-active")},o=function(){t.removeClass("fake-active")};t.on("touchstart",n),t.on("touchend",o),t.on("touchcancel",o)}},{key:"createThumbnaislHolder",value:function(){var e=l.document.createElement("div");return e.className="vjs-thumbnail-holder",e}},{key:"createThumbnailImg",value:function(e){var t=l.document.createElement("img");return t.src=e[0].src,t.className="vjs-thumbnail-img",t}},{key:"createThumbnailTime",value:function(){var e=l.document.createElement("div");return e.className="vjs-thumbnail-time",e.id="vjs-time",e}},{key:"createThumbnailArrowDown",value:function(){var e=l.document.createElement("div");return e.className="vjs-thumbnail-arrow",e.id="vjs-arrow",e}},{key:"mergeThumbnailElements",value:function(e,t,n,o){return e.appendChild(t),e.appendChild(n),e.appendChild(o),e}},{key:"centerThumbnailOverCursor",value:function(e){e.style.left||e.style.right||(e.onload=function(){var t={width:-(e.naturalWidth/2)};e.style.left=t+"px"})}},{key:"getVideoDuration",value:function(e){var t=e.duration();return e.on("durationchange",function(){t=e.duration()}),t}},{key:"addThumbnailToPlayer",value:function(e,t){e.el().appendChild(t)}},{key:"findMouseLeftOffset",value:function(e,t,n,o){var i=e||o.clientX+l.document.body.scrollLeft+l.document.documentElement.scrollLeft;return i-=t.el().getBoundingClientRect().left+n}},{key:"getMouseVideoTime",value:function(e,t,n){return Math.floor((e-t.el().offsetLeft)/t.width()*n)}},{key:"updateThumbnailTime",value:function(e,t){e.innerHTML=t.seekBar.mouseTimeDisplay.el_.attributes["data-current-time"].value}},{key:"getPageMousePositionX",value:function(e){var t=e.pageX;return e.changedTouches&&(t=e.changedTouches[0].pageX),t}},{key:"keepThumbnailInsidePlayer",value:function(t,n,o,i,u){var r=e.getVisibleWidth(t,n.width||o[0].width),a=r/2;return i+a>u?i-=i+a-u:i<a&&(i=a),i}},{key:"updateThumbnailLeftStyle",value:function(e,t){var n={mouseLeftOffset:e};t.style.left=n.mouseLeftOffset+"px"}},{key:"getActiveThumbnail",value:function(e,t){var n=0;for(var o in e)t>o&&(n=Math.max(n,o));return e[n]}},{key:"updateThumbnailSrc",value:function(e,t){e.src&&t.src!==e.src&&(t.src=e.src)}},{key:"updateThumbnailStyle",value:function(t,n){t.style&&n.style!==t.style&&e.createThumbnails(n.style,t.style)}},{key:"moveListener",value:function(t,n,o,i,u,r,a){var l=e.getVideoDuration(a),f=e.getScrollOffset().x,c=n.el().getBoundingClientRect(),s=(c.width||c.right)+f,d=e.getPageMousePositionX(t),m=e.findMouseLeftOffset(d,n,f,t),p=e.getMouseVideoTime(m,n,l),y=e.getActiveThumbnail(i,p);e.updateThumbnailTime(u,n),e.updateThumbnailSrc(y,r),e.updateThumbnailStyle(y,r),m=e.keepThumbnailInsidePlayer(r,y,i,m,s),e.updateThumbnailLeftStyle(m,o)}},{key:"upadateOnHover",value:function(t,n,o,i,u,r){t.on("mousemove",function(a){e.moveListener(a,t,n,o,i,u,r)}),t.on("touchmove",function(r){e.moveListener(r,t,n,o,i,u)})}},{key:"hideThumbnail",value:function(e){e.style.left="-1000px"}},{key:"upadateOnHoverOut",value:function(t,n,o){t.on("mouseout",function(t){e.hideThumbnail(n)}),t.on("touchcancel",function(t){e.hideThumbnail(n)}),t.on("touchend",function(t){e.hideThumbnail(n)}),o.on("userinactive",function(t){e.hideThumbnail(n)})}}]),e}(),c={},s=a.registerPlugin||a.plugin,d=function(e,t){for(var n=0,o=0,i=0,u=t.stepTime,r=t.width,a=t.spriteUrl,l={0:{src:a,style:{left:r/2*-1+"px",width:(Math.floor(e/u)+1)*r+"px",clip:"rect(0,"+t.width+"px,"+t.width+"px, 0)"}}};n<=e;)n+=u,i=++o*r,l[n]={style:{left:(r/2+i)*-1+"px",clip:"rect(0, "+(r+i)+"px,"+t.width+"px, "+i+"px)"}};return l},m=function(e,t){var n=f.createThumbnails({},c,e),o=t.controlBar.progressControl,i=f.createThumbnailImg(n),u=f.createThumbnailTime(),r=f.createThumbnailArrowDown(),a=f.createThumbnaislHolder();a=f.mergeThumbnailElements(a,i,u,r),f.hidePlayerOnHoverTime(o),l.window.navigator.userAgent.toLowerCase().indexOf("android")!==-1&&f.suportAndroidEvents(),f.createThumbnails(i.style,n[0].style),f.centerThumbnailOverCursor(i),f.addThumbnailToPlayer(o,a),f.upadateOnHover(o,a,n,u,i,t),f.upadateOnHoverOut(o,a,t)},p=function(e,t){e.on("loadedmetadata",function(){var n=d(e.duration(),t);m(n,e)})},y=function(e){var t=this;this.ready(function(){p(t,a.mergeOptions(c,e))})};s("thumbnails",y),y.VERSION="1.0.3",t.exports=y},{1:1}]},{},[2])(2)});
//# sourceMappingURL=videojs-thumbnails.min.js.map
\ No newline at end of file
......@@ -4,8 +4,9 @@
<meta charset=utf-8/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
{#Librerias necesarias para utilizar video.js#}
<link href="{{asset('videojs-plugins/thumbnails/videojs-thumbnails.min.css')}}" rel="stylesheet">
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
</head>
<body>
......@@ -13,6 +14,7 @@
{#estructura de generacion necesaria para utilizar el reproductor de la libreria...#}
<video
width="800" height="800"
class="video-js vjs-default-skin"
id="dg-vid-01"
class="video-js"
controls
......@@ -29,13 +31,14 @@
</p>
</video>
</video>
<script src="{{asset('videojs-plugins/thumbnails/videojs-thumbnails.min.js')}}"></script>
<script>
//uri codificada
var dmUri = "{{url}}";
//Para generar el reproductor de forma responsive...
var options = {"fluid": true};
// Seteo del reproductor y carga de url...
// Seteo del reproductor y carga de url...
var player = videojs('dg-vid-01', options, function onPlayerReady() {
videojs.log('Reproductor Cargado...');
//carga url y content type hls
......@@ -44,6 +47,15 @@
src: atob(dmUri)
});
this.thumbnails(
{
width: 100,
spriteUrl: 'http://placehold.it/350x150',
stepTime: 2,
}
);
///reproduccion de video
this.play();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment