vue 嵌入 video.js 看直播（名正言顺的看电视）

Z时代
2024-01-10
分类：综合

vue

安装内容

npm i video.js -S //视频播放器

npm i videojs-contrib-hls -S // 这是播放hls流需要的插件

npm i mux.js -S // 在vue项目中，若不安装它可能报错（很大概率会报错，不信的可以自己试试看）

傻瓜式代码，复制粘贴即可用

<template>
  <div>
    <div style="margin-top: 30px; margin-bottom: 30px; color: Red">
      <span>视频加载比较慢，请耐心等候。</span>
      <br />
    </div>
    <div class="width">
      <!-- <section> -->
        <!-- <videoPlayer
          ref="videoPlayer"
          :options="videoOptions"
          class="vjs-custom-skin videoPlayer"
          :playsinline="true"
        /> -->
        <video id="videoPlayer" class="video-js" muted></video>
      <!-- </section> -->
      <!-- <video :src="address" style="border:1px solid red;"></video> -->
      <!-- <div id="dplayer" class="play-root" ></div>
      <div @click="onPlay">点我播放</div> -->
    </div>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import Videojs from "video.js";
import "videojs-contrib-hls";
export default {
  data () {
    return {
      nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
      // 视频播放
      videoOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: true, // 视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        flash: {
          hls: { withCredentials: false },
        },
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            type: "application/x-mpegURL",
            src: "http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8",
          },
        ],
        poster: "", //你的封面地址
        width: "100%",
        height: "100%",
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
    }
  },
  mounted() {
    this.initVideo(this.nowPlayVideoUrl);
  },
  destroyed() {
    this.videoPlayer.dispose();
  },
  methods: {
    initVideo(nowPlayVideoUrl) {
      // 这些options属性也可直接设置在video标签上，见 muted
      let options = {
        autoplay: true, // 设置自动播放
        controls: true, // 显示播放的控件
        sources: [
          // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
          {
            src: nowPlayVideoUrl,
            type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
          },
        ],
      };
      // videojs的第一个参数表示的是，文档中video的id
      const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
        // console.log(myPlyer === this); // 这里返回的是true
      });
    },
  }
}
</script>

代码抄完了，接下来有兴趣的可以了解一下背后的坑。没兴趣的可以退出了。

坑点一：视频不能自动播放或者报错 DOME.xception:play()failed

报错信息：`DOMException: play() failedbecause the user didn’t interact with the document first.(用户还没有交互,不能调用play)`

解决方案：设置 muted ，例如： <video id="videoPlayer" class="video-js" muted></video>

知识点普及：

　　关于muted属性：

　　　　muted 属性,设置或返回音频是否应该被静音（关闭声音）;属性的值是true和false;
　　　　muted="false" 表示视频不用静音（视频播放便有声音），但设置 muted="fasle" 的情况下，视频无法实现自动播放。
　　　　video 标签中 muted 的作用：允许视频自动播放；（Chrome66版本开始，禁止视频和音频的自动播放）

坑点二：找不到mux.js模块