JSFiddle - React, Tailwind, and code Playground

by val2048

HTML

<link rel="stylesheet" href="//vjs.zencdn.net/4.4/video-js.css">
<script src="//vjs.zencdn.net/4.4/video.js"></script>
<script src="https://rawgithub.com/xbgmsharp/videojs-rotatezoom/master/src/videojs.zoomrotate.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
<input type=button id="rl" value="l" />
<input type=button id="rr" value="r" />

JavaScript

var vid = videojs("example_video_1");
var cur_rotate = rotate = 0;
$("#rl").click(function () {
    rotate += 90;
    apply();
});
$("#rr").click(function () {
    rotate -= 90;
    apply();
});

function apply() {
    var currentZoom = (Math.abs(cur_rotate) % 180 == 0) ? 1 : 264/640;
    var targetZoom = (Math.abs(rotate) % 180 == 0) ? 1 : 264/640;
    var start = cur_rotate;
    var diff = Math.abs(rotate - cur_rotate);
    $({
        foo: cur_rotate
    }).animate({
        foo: rotate
    }, {
        step: function (val) {
            // val takes values from 0 to 100 here
            cur_rotate = val;
            var z = lerp(currentZoom, targetZoom, Math.abs(cur_rotate - start) / diff);
            console.log(z);
            vid.zoomrotate({
                rotate: cur_rotate,
                zoom: z

            });
        }
    });

}

function lerp(a, b, t) {
   return (a + t * (b - a));
    
}