HTML5 Video rotate

azzeretti

Does anyone know if there is a HTML5 video control to rotate? I am building a library of video sources, muxing them and indexing them to be searching on a local webpage. However, some of the video is rotated 90 degrees (people not turning their mobile phones!).
I am extracting the metadata from each video but some do not contain the rotation info. Because of this the video displays sideways (I can use css to auto rotate the ones that have the metadata). So, does anyone have a solution that adds user-selectable rotate controls?

Talisman

You could build your own quite easily. Use the Font Awesome Video Player icons to style your controls.

HTML player:

<div id="player-container"
  <div id="video-player">
    <!-- video goes here -->
  </div>
  <div id="video-controls">
    <button class="play"><i class="fa fa-play"></i></button>
    <button class="rotate-left"><i class="fa fa-rotate-left"></i></button>
    <button class="rotate-right"><i class="fa fa-rotate-right"></i></button>
    <button class="reset">reset</button>
  </div>
</div>

Use some JavaScript to listen for events on the controls.

(function() {
  var rotate = 0; // initial rotation
  var video = document.getElementById('video-player');
  var controls = document.getElementById('video-controls');
  if (controls) {
    controls.addEventListener('click', function(e){
      target = e.target;
      if (target.nodeName.toLowerCase() === 'button') {
        switch (target.className) {
          case 'play':
            if (video.paused) {
              video.play();
              target.innerHTML = '<i class="fa fa-pause"></i>';
            } else {
              video.pause();
              target.innerHTML = '<i class="fa fa-play"></i>';
            }
            break;
          case 'rotate-left' :
            rotate = rotate + 90;
            video.style['rotate']='rotate('+rotate+'deg)';
            // todo : resize video-player div
            break;
          case 'rotate-right' :
            rotate = rotate - 90;
            video.style['rotate'] = 'rotate('+rotate+'deg)';
            // todo : resize video-player div
            break;
          case 'reset' :
            rotate = 0;
            video.style['rotate'] = 'rotate('+rotate+'deg)';
            // todo : resize video-player div
            break;
        }
        e.preventDefault();
      }
    }, false);
  }
})();

Disclaimer: This code is untested but it should get you in the right area! You may need to add vendor specific style attributes for the rotation.

You could tweak the code so that the rotation buttons only appear when you don't know the rotation of the video.