markersrolls.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /*!
  2. * MediaElement.js
  3. * http://www.mediaelementjs.com/
  4. *
  5. * Wrapper that mimics native HTML5 MediaElement (audio and video)
  6. * using a variety of technologies (pure JavaScript, Flash, iframe)
  7. *
  8. * Copyright 2010-2017, John Dyer (http://j.hn/)
  9. * License: MIT
  10. *
  11. */(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){
  12. 'use strict';
  13. Object.assign(mejs.MepDefaults, {
  14. markersRollsColor: '#E9BC3D',
  15. markersRollsWidth: 1,
  16. markersRolls: {}
  17. });
  18. Object.assign(MediaElementPlayer.prototype, {
  19. buildmarkersrolls: function buildmarkersrolls(player, controls, layers, media) {
  20. var currentPosition = -1,
  21. lastPlayedPosition = -1,
  22. lastMarkerRollCallback = -1,
  23. markersCount = Object.keys(player.options.markersRolls).length;
  24. if (!markersCount) {
  25. return;
  26. }
  27. for (var i = 0, total = markersCount; i < total; ++i) {
  28. var marker = document.createElement('span');
  29. marker.className = this.options.classPrefix + 'time-marker';
  30. controls.querySelector('.' + this.options.classPrefix + 'time-total').appendChild(marker);
  31. }
  32. var markersRollsLayer = document.createElement('iframe');
  33. markersRollsLayer.frameBorder = '0';
  34. markersRollsLayer.className = this.options.classPrefix + 'markersrolls-layer' + ' ' + (this.options.classPrefix + 'overlay') + ' ' + (this.options.classPrefix + 'layer');
  35. markersRollsLayer.style.display = 'none';
  36. markersRollsLayer.style.backgroundColor = '#FFF';
  37. markersRollsLayer.style.border = '0 none';
  38. markersRollsLayer.style.boxShadow = '#B0B0B0 0px 0px 20px -10px inset';
  39. layers.appendChild(markersRollsLayer);
  40. media.addEventListener('durationchange', function () {
  41. player.setmarkersrolls(controls);
  42. });
  43. media.addEventListener('timeupdate', function () {
  44. currentPosition = Math.floor(media.currentTime);
  45. if (lastPlayedPosition > currentPosition) {
  46. if (lastMarkerRollCallback > currentPosition) {
  47. lastMarkerRollCallback = -1;
  48. }
  49. } else {
  50. lastPlayedPosition = currentPosition;
  51. }
  52. if (0 === markersCount || !player.options.markersRolls[currentPosition] || currentPosition === lastMarkerRollCallback) {
  53. return;
  54. }
  55. lastMarkerRollCallback = currentPosition;
  56. media.pause();
  57. markersRollsLayer.src = player.options.markersRolls[currentPosition];
  58. markersRollsLayer.style.display = 'block';
  59. }, false);
  60. media.addEventListener('play', function () {
  61. markersRollsLayer.style.display = 'none';
  62. markersRollsLayer.src = '';
  63. }, false);
  64. },
  65. setmarkersrolls: function setmarkersrolls(controls) {
  66. var markersRolls = controls.querySelectorAll('.' + this.options.classPrefix + 'time-marker');
  67. var i = 0;
  68. for (var position in this.options.markersRolls) {
  69. if (!this.options.markersRolls.hasOwnProperty(position)) {
  70. continue;
  71. }
  72. position = parseInt(position);
  73. if (position >= this.media.duration || position < 0) {
  74. continue;
  75. }
  76. var left = 100 * position / this.media.duration,
  77. marker = markersRolls[i];
  78. marker.style.width = this.options.markersRollsWidth + 'px';
  79. marker.style.left = left + '%';
  80. marker.style.background = this.options.markersRollsColor;
  81. i++;
  82. }
  83. }
  84. });
  85. },{}]},{},[1]);