Change Javascript code to resized video tag

Asked

Viewed 125 times

2

At this link i have a test page where the video on the screen is resized as the select.

I need that when loading the page come loaded the function of select Transform selection, but as I do not need select, only from Transform function, I tried to modify and I could not get the result I wanted.

Code

var $player = $('#player');
var player = $player.get(0);
var $parent = $player.parent();
var $win = $(window);
var resizeTimeout = null;
var shouldResize = false;
var shouldPosition = false;
var videoRatio = 16 / 9;

player.volume = 0; // mute

var resize = function() {
  if (!shouldResize) { return; }

  var height = $parent.height();
  var width = $parent.width();
  var viewportRatio = width / height;
  var scale = 1;

  if (videoRatio < viewportRatio) {
    // viewport more widescreen than video aspect ratio
    scale = viewportRatio / videoRatio;
  } else if (viewportRatio < videoRatio) {
    // viewport more square than video aspect ratio
    scale = videoRatio / viewportRatio;
  }

  var offset = positionVideo(scale, width, height);
  setVideoTransform(scale, offset);
};

var setVideoTransform = function(scale, offset) {
  offset = $.extend({ x: 0, y: 0 }, offset);
  var transform = 'translate(' + Math.round(offset.x) + 'px,' + Math.round(offset.y) + 'px) scale(' + scale  + ')';
  $player.css({
    '-webkit-transform': transform,
    'transform': transform
  });
};

// accounts for transform origins on scaled video
var positionVideo = function(scale, width, height) {
  if (!shouldPosition) { return false; }

  var x = parseInt($player.data('origin-x'), 10);
  var y = parseInt($player.data('origin-y'), 10);
  setVideoOrigin(x, y);

  var viewportRatio = width / height;
  var scaledHeight = scale * height;
  var scaledWidth = scale * width;
  var percentFromX = (x - 50) / 100;
  var percentFromY = (y - 50) / 100;
  var offset = {};

  if (videoRatio < viewportRatio) {
    offset.x = (scaledWidth - width) * percentFromX;
  } else if (viewportRatio < videoRatio) {
    offset.y = (scaledHeight - height) * percentFromY;
  }

  return offset;
};

var setVideoOrigin = function(x, y) {
  var origin = x + '% ' + y + '%';
  $player.css({
    '-webkit-transform-origin': origin,
    'transform-origin': origin
  });
};

$win.on('resize', function() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(resize, 100);
});

$('#select').on('change', function(e) {
  var selected = $(this).children(':selected');
  var value = selected.val();
  player.setAttribute('style', '');
  switch (value) {
    case 'transform':
      shouldResize = true;
      shouldPosition = false;
      resize();
      break;

    case 'transform-origin':
      shouldResize = true;
      shouldPosition = true;
      resize();
      break;

    default:
      shouldResize = false;
      shouldPosition = false;
  }
  player.setAttribute('class', value);
});
  • I’m seeing your question a little late, but in the past link there is no select any. You managed to solve your problem?

  • Did you find a solution? Poste as an answer to help other people.

  • 4

    This question seems to be discounted because the link presented does not show the problem, nor is there explanation of what the problem with the published code.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.