VideoJs controlBar demo

index.html

<div>
  <video id="censor-player" src='http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'></video>
</div>
<div style="background: #eee; width:100px; height:600px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>

script.js

var Player = (function(window, videojs) {
  var rotateBtn = videojs.extend(videojs.getComponent("Button"), {
    constructor: function(player) {
      videojs.getComponent("Button").apply(this, arguments);
      this.controlText("Rotate");
      this.rotate = 0;
      this.player = player;
    },
    handleClick: function() {
      this.removeClass("rotate-" + this.rotate);
      this.rotate += 90;
      zoom = this.rotate % 180 === 0 ? 1 : 0.5;
      this.rotate = this.rotate % 360 || 0;
      this.player.zoomrotate({ rotate: this.rotate, zoom: zoom });
      this.addClass("rotate-" + this.rotate);
    },
    buildCSSClass: function() {
      return "rotate-0 vjs-control vjs-button";
    }
  });
  var zoomrotatePlugin = function(settings) {
    var defaults, extend;
    defaults = {
      zoom: 1,
      rotate: 0
    };
    extend = function() {
      var args, target, i, object, property;
      args = Array.prototype.slice.call(arguments);
      target = args.shift() || {};
      for (i in args) {
        object = args[i];
        for (property in object) {
          if (object.hasOwnProperty(property)) {
            if (typeof object[property] === "object") {
              target[property] = extend(target[property], object[property]);
            } else {
              target[property] = object[property];
            }
          }
        }
      }
      return target;
    };

    var options, player, video, poster;
    options = extend(defaults, settings);

    player = this.el();
    video = this.el().getElementsByTagName("video")[0];
    poster = this.el().getElementsByTagName("div")[1];
    
    var properties = [
        "transform",
        "WebkitTransform",
        "MozTransform",
        "msTransform",
        "OTransform"
      ],
      prop = properties[0];

    var i, j;
    
    for (i = 0, j = properties.length; i < j; i++) {
      if (typeof player.style[properties[i]] !== "undefined") {
        prop = properties[i];
        break;
      }
    }

    player.style.overflow = "hidden";
    video.style[prop] =
      "scale(" + options.zoom + ") rotate(" + options.rotate + "deg)";
    poster.style[prop] =
      "scale(" + options.zoom + ") rotate(" + options.rotate + "deg)";
    if (options.debug) console.log("zoomrotate: Register end");
  };
  var createPlayer = function() {
    var vid = document.querySelector("#censor-player");
    vid.style.width = vid.style.width || 450;
    vid.style.height = vid.style.height || 300;
    vid.className = "video-js vjs-default-skin vjs-big-play-centered";
    var player = videojs(vid, {
      controls: true,
      playbackRates: [1, 1.2, 1.5, 1.8, 2],
      controlBar: {
        audioTrackButton: false,
        subsCapsButton: false
      }
    });
    player.src({
      src: vid.src,
      type: vid.type || "application/x-mpegURL"
    });
    player.getChild("controlBar").addChild("rotateButton", {});
    var seekBar = player.controlBar.progressControl.seekBar;
    window.addEventListener(
      "keydown",
      function(event) {
        switch (event.keyCode) {
          case 32: //Space
            if (player.paused()) {
              player.play();
            } else {
              player.pause();
            }
            break;
          case 39: //ArrowRight
            var cur = player.currentTime();
            player.currentTime(cur + 5);
            break;
          case 37: //ArrowLeft
            var cur = player.currentTime();
            player.currentTime(cur - 5);
            break;
        }
      },
      false
    );
    window.onkeydown = function(e) { 
      return !(e.keyCode == 32);
    };
  };
  var init = function() {
    videojs.registerComponent("RotateButton", rotateBtn);
    videojs.registerPlugin("zoomrotate", zoomrotatePlugin);
    createPlayer();
  };

  return {
    init: init
  };
})(window, videojs);

Player.init();

style.css

.rotate-0 :before{
  content: 'R';
}

.rotate-90 :before{
  content: '90°';
}

.rotate-180 :before{
  content: '180°';
}

.rotate-270 :before{
  content: '270°';
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet" />

videojs-controlbar-demo.markdown

VideoJs controlBar demo

A Pen by JiYang on CodePen.

License.

Videojs-Play.html

<div>
  <video width=450 height=300 class="video-js vjs-default-skin vjs-big-play-centered">
    <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL" />
  </video>
</div>
<hr />
<div>
  <video width=450 height=300 class="video-js vjs-default-skin vjs-big-play-centered">
    <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL" />
  </video>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>

Videojs demo