It is possible to update the video with the new options?

[lemonadia]

I am working on custom vimeo player, and I need the functionality to make subtitles visible on custom button click.

Here is my code with the player included and I want to enable subtitles on enableFullScreen method.

<template>
  <div class="person-video">
    <div
      class="person-video__wrapper"
      :class="{ 'person-video__wrapper--full': fullScreenView }"
    >
      <div class="person-video__controls">
        <img
          src="~/assets/svg/play.svg"
          alt=""
          @click="playTheVideo"
          v-if="!stop"
        />
        <span @click="stopTheVideo" v-if="stop">STOP </span>
        <img
          src="~/assets/svg/subtitles.svg"
          alt=""
          @click="enableFullScreen"
        />
        <img src="~/assets/svg/sound.svg" alt="" @click="unMuteVideo" />
      </div>
      <client-only>
        <vimeo-player
          ref="player"
          :video-id="videoId"
          :options="options"
          @ready="onReady"
          :autoplay="true"
        />
      </client-only>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonVideo",
  props: {
    data: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
  data() {
    return {
      stop: false,
      mute: false,
      height: 700,
      options: {
        controls: false,
        muted: true,
        texttrack: false,
      },
      playerReady: false,
      fullScreenView: false,
      language: "",
    };
  },
  computed: {
    videoId() {
      return this.data.vimeoLink.split("/")[3];
    },
  },
  methods: {
    onReady() {
      this.playerReady = true;
    },
    playTheVideo() {
      this.$refs.player.play();
      this.stop = true;
    },
    stopTheVideo() {
      this.$refs.player.pause();
      this.stop = false;
    },
    unMuteVideo() {
      this.$refs.player.unmute();
    },

    enableFullScreen(e) {
      if (process.client) {
        const videoWrapper = document.querySelector(".person-video__wrapper");
        this.fullScreenView = true;
        this.language =
          window.navigator.userLanguage || window.navigator.language;
        if (document.fullscreenElement) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
            this.fullScreenView = false;
          }
        } else {
          if (videoWrapper.requestFullscreen) {
            videoWrapper.requestFullscreen();
            this.$refs.player.update();
          }
        }
      }
    },
  },
};
</script>

[lemonadia]

Ok, I have manage to solve it!

[dobromir-hristov]

Please share your findings for future developers having your problems :)