vue3.0使用‘vue-video-player’接入直播m3u8视频避坑实录

问题（坑）？

1. ‘vue-video-player’播放器无渲染
2. vue3.0下的播放器播放地址‘url’赋值问题
3. ‘vue-video-player’引入问题

前期工作

首先我们需要安装相关插件

npm install vue-video-player -s
npm install videojs-flash -s
npm install videojs-contrib-hls -s

其实‘vue-video-player’本身是包含videojs-flash和videojs-contrib-hls的，但是在vue3.0下，引用不起作用，所以建议尽量单独安装。

在main.ts将插件引入

import { createApp } from 'vue'
import 'videojs-flash'
import  'videojs-contrib-hls'
import VideoPlayer from 'vue-video-player/src'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css') 

const createapp = createApp(App)
createapp.use(VideoPlayer)

vue组件内使用

<template>
  <div class="box-viods">
    <van-nav-bar
      title="监控播放"
      left-text="" left-arrow @click-left="$router.go(-1)" fixed
    />
    
  </div>
    <div class="tzc_demo">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      >
      </video-player>
    </div>
</template>

<script>
 
import { defineComponent, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  com_list,
  com_cam_list,
  com_cam_list_url,
  comcity_cam,
} from "@/api/index";
export default {
  name: "vidoList", 
  setup() {
    let $route = useRouter();
    let eqery = {
      guid: $route.currentRoute.value.params.id,
    };
    let video_s = ref();
    //播放器渲染对象
    let playerOptions = ref({
      playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
      autoplay: false, // 如果为true,浏览器准备好时开始回放。
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 是否视频一结束就重新开始。
      preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: "zh-CN",
      aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      html5: { hls: { withCredentials: false } },
      flash: { hls: { withCredentials: false } },
      sources: [
        {
          type: "application/x-mpegURL", // 类型
          src: '', // url地址
        },
      ],
      poster: "", // 封面地址
      notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true, // 当前时间和持续时间的分隔符
        durationDisplay: true, // 显示持续时间
        remainingTimeDisplay: false, // 是否显示剩余时间功能
        fullscreenToggle: true, // 是否显示全屏按钮
      },
    });
    //这里执行相对应的接口方法获取你的url地址，为播放器对象进行赋值
    const Video_u = () => {
      com_cam_list_url(eqery)
        .then((res) => {
          video_s.value = res.data.mydata;
          playerOptions.value.sources[0].src=res.data.mydata.recurl;//这里对url赋值
          console.log("video", playerOptions);
        })
        .catch((err) => {
          console.log(err);
        });
    };
    onMounted(() => {
      Video_u();
    });
    return {
      video_s,
      Video_u,
      playerOptions,
    };
  },
};
</script>

<style scoped lang="less">
.box-viods {
  margin-bottom: 3.4rem;
//   .tzc_demo_bt{
//       width: 100%;
//       height: 2rem;
//       text-align: center;
//       line-height: 2rem;
//   }
}
.tzc_box_vlist {
  margin-top: 3rem;
  margin-bottom: 4rem;
}
.viods-list {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
  padding-top: 0.5rem;
}
.list-title {
  width: 100%;
  height: 2.3rem;
  background: #007acc;
  color: white;
  line-height: 2.4rem;
  font-weight: bold;
  font-size: 1rem;
  box-sizing: border-box;
  padding: 0 0.8rem;
  border-radius: 6px;
}
.list-video {
  width: 100%;
  height: 10rem;
  overflow: hidden;
  background: rgb(233, 246, 255);
  position: relative;
  .tzc_icon_video {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: #007acc;
  }
  // img {
  //   width: 100%;
  //   height: auto;
  // }
}
/deep/ .van-nav-bar .van-icon {
  color: #333333;
}
/deep/ .van-nav-bar__title {
  font-weight: bold;
  font-size: 1rem;
}
</style>

最终效果

如果屏幕前的你觉得这篇文章对你有帮助，欢迎点赞、关注、转发、评论。 文章为原创，未接本人同意禁止转载，创造不易，谢谢合作。