Video.js with Mux does not play video

Question

I have a video library page on my site and on this page I need to show videos uploaded to the MUX server. I have a problem with video playback through this library. Doc: https://docs.mux.com/guides/video/playback-videojs-with-mux. Code example:

<template>
  <div>
    <div class="video_conteiner_iframe" v-if="video.status === 'ready' && open">
      <iframe
        v-if="video.api_type === '1'"
        :ref="`video_${video.id}`"
        :src="`https://cdn.jwplayer.com/players/${video.key}-hSb3JUAg.html`"
        class="video"
        frameborder="0"
        scrolling="auto"
        :title="video.name"
        allowfullscreen
      />
      <video
        v-else
        :id="video.id"
        class="video-js"
        controls
        preload="auto"
        width="100%"
      >
        <source :src="video.key" type="video/mux" />
      </video>
    </div>
    <div
      v-if="video.status === 'ready' && !open"
      class="img_body"
      @click="openVideo(video.id, video.key)"
    >
      <div class="play_video">
        <div class="play_block" />
      </div>
      <img
        v-if="video.api_type === '1'"
        class="video"
        :src="`https://cdn.jwplayer.com/thumbs/${video.key}-640.jpg`"
        :alt="`${video.key}`"
      >
      <img
        v-else
        class="video"
        :src="`https://image.mux.com/${video.key}/thumbnail.png`"
        :alt="`${video.key}`"
      >
    </div>
  </div>
</template>

<script>
import videojs from '@mux/videojs-kit';
import '@mux/videojs-kit/dist/index.css';

export default {
  name: 'vm-video-play',
  props: {
    video: { type: Object, required: true }
  },
  data() {
    return {
      open: false
    };
  },
  methods: {
    openVideo(id, key) {
      if (window.innerWidth < 1000 && this.$route.name === 'seller-catalogue-id') {
        console.log('modal');
      } else {
        this.open = true;
      }
    }
  }
};
</script>

video.key === PLAYBACK_ID

If instead of a MUX video file you try to play some mp4 video (for example, this is https://www.w3schools.com/html/mov_bbb.mp4) then it works fine, but the MUX video file will not be displayed.

Answer 1

I've tried it myself and you essentially need to install @mux/videojs-kit and to provide your env variable as suggested in the docs.

Here is how it looks like

<template>
  <div>
    <video id="my-player" 
      class="video-js vjs-16-9" 
      controls 
      preload="auto" 
      width="100%">
    </video>
  </div>
</template>

<script>
import videojs from '@mux/videojs-kit'
import '@mux/videojs-kit/dist/index.css'

export default {
  mounted() {
    const player = videojs('my-player', {
      timelineHoverPreviews: true,
      plugins: {
        mux: {
          debug: false,
          data: {
            env_key: 'gjXXXXXX', // pass your own personal key in an `.env` file
            video_title: 'Example Title',
          },
        },
      },
    })

    player.src({
      // this is the public playback ID without the 'https://stream.mux.com/' prefix
      src: 'yF8oeOw01qAqbrlQ00TdmHOR02U801P015pawn4uQRbvWHgo.m3u8',
      type: 'video/mux',
    })
  },
}
</script>

Working well so far