在NUXT中播放视屏

目录

1.背景

2.代码

3.参考资料

---

1.背景

为了能在NUXT框架中播放视屏，一开始采用服务端渲染的方式，在本地运行是OK的，但打包部署到服务器上就始终报错，只好改成一般客户端渲染的方式实现。以后有时间再研究一下服务端渲染失败的原因吧。

2.代码

<section class="vueVideo">
  <div
    v-video-player:myVideoPlayer="myPlayerOptions"
    class="video-player-box"
    :playsinline="true"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @ready="playerReadied"
    @statechanged="playerStateChanged($event)"
  ></div>
</section>

...

import testApi from "@/api/test.js";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";

export default {
  data() {
    return {
      data: {},
      myPlayerOptions: {},
    };
  },

  created() {
    this.playDetail();
  },

  playDetail() {
      testApi.getInfo(this.$route.params.id).then((response) => {
        this.data = response.data.data.info;
        const videoPath = this.data.url;
        const videoCover = this.data.cover;
        let playerOptions = {
          // 播放器配置
          muted: false, // 是否静音
          language: "zh-CN",
          aspectRatio: "16:9",
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          controls: true,
          preload: "auto", // 视频预加载
          fluid: true,
          sources: [
            {
              type: "video/mp4",
              src: videoPath,
            },
          ],
          poster: videoCover, // 封面图
          notSupportedMessage: "此视频暂无法播放，请稍后再试",
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true, //全屏按钮
          },
        };

        this.myPlayerOptions = playerOptions;
      });
    },
}

3.参考资料

HTML 视频（Video）播放 | 菜鸟教程

在Vue中使用Video-player，动态src以及页面只播放一个video - 简书

vue的nuxt框架中使用vue-video-player - sq-blog - 博客园