vue.js - 带 Mux 的 Video.js 无法播放视频

Question

我的网站上有一个视频库页面，我需要在此页面上显示上传到 MUX 服务器的视频。我在通过该库播放视频时遇到问题。文件:https://docs.mux.com/guides/video/playback-videojs-with-mux 。 代码示例:

<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

如果您尝试播放一些 mp4 视频而不是 MUX 视频文件(例如 https://www.w3schools.com/html/mov_bbb.mp4 )，那么它可以正常工作，但不会显示 MUX 视频文件。

Answer 1

我自己尝试过，您基本上需要安装 @mux/videojs-kit 并按照文档中的建议提供您的 env 变量。

这是它的样子

<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>

到目前为止运行良好