How can i add some funcs like let the video zoom in and out, turn left and turn right instead of using mouse or fingers

[EtherLoda]

How can i add some funcs like let the video zoom in and out, turn left and turn right instead of using mouse or fingers? Thanks

[singerxt]

I started creating a plugin for that. However, it is not finishing and pinching isn't implemented yet. This is how I'm doing that.

import Hammer from 'hammerjs';
import videojs, { VideoJsPlayer } from 'video.js';

interface VrZoomOptions {
  minFov?: number;
  maxFov?: number;
  defaultFov?: number;
}

/**
 * Plugin for [player](https://videojs.com).
 * Adds support for zooming videos in the player. Zoom is triggered by scrolling or pinch (on mobile).
 */
class VrZoom extends Plugin {
  readonly options: VrZoomOptions;

  constructor(player: VideoJsPlayer, options: VrZoomOptions = {}) {
    super(player, options);
    this.player = player;
    this.options = Object.assign({
      minFov: 30,
      maxFov: 115,
      defaultFov: 70
    }, options);
    this.setup();
  }

  /**
   * If video is playing and you use mouse wheel video will zoom.
   * @param event
   */
  private zoomHandlerWeb (event: WheelEvent) {
    if (this.player.paused()) {
      return;
    }

    event.preventDefault();
    const vr = this.player.vr();
    const isWheelUp = event.deltaY < 0;
    let fov = vr.camera.fov - (isWheelUp ? -1 : 1);

    if (fov < this.options.minFov) {
      fov = this.options.minFov;
    }

    if (fov > this.options.maxFov) {
      fov = this.options.maxFov;
    }

    vr.camera.fov = fov;
    vr.camera.updateProjectionMatrix();
  }

  private zoomHandlerTouch(event) {
    console.log(event);
  }

  private setup() {
    const $video = this.player.el();
    if (!videojs.browser.TOUCH_ENABLED) {
      $video.addEventListener('wheel', this.zoomHandlerWeb.bind(this));
    } else {
      const hammer = new Hammer($video as HTMLElement);
      hammer.set({ enable: true });
      const pinch = new Hammer.Pinch();
      hammer.add(pinch);
      hammer.on('pinch', this.zoomHandlerTouch.bind(this));
    }
  }
}

videojs.registerPlugin('vrZoom', VrZoom);

// initialize player code
player.vrZoom();