Vue Hls m3u8 视频/直播

Hls m3u8 视频/直播

涉及知识：Vue hls m3u8 乐橙云 大华摄像头

Vue2 实时显示大华摄像头画面

1. 安装依赖

    "vue": "^2.6.11",
    "video.js": "^5.19.1 || ^6.2.0",
    "videojs-contrib-media-sources": "4.7.2",
    "videojs-contrib-hls": "5.14.1",
    "videojs-flash": "^2.2.1",
    "videojs-mux": "^3.1.4",
    "mux.js": "^5.8.0",
    "vue-video-player": "^4.0.2",

2. 引入依赖 /src/main.js

    import VideoPlayer from "vue-video-player";
    require("video.js/dist/video-js.css");
    import 'video.js'
    import 'videojs-flash'
    import hls from "videojs-contrib-hls";
    Vue.use(hls)
    Vue.use(VideoPlayer)

3. 在组件中使用

<template>
   <video-player
      ref="videoPlayer"
      :options="videoOptions"
      class="vjs-custom-skin videoPlayer"
      :playsinline="true"
   />
</template>

<script>
export default {
  data() {
    return {
      videoOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 自动播放
        muted: false, // 静音
        loop: false, // 循环播放
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        techOrder: ["html5", "flash"], // 兼容顺序
        sources: [
          {
            type: "application/x-mpegURL",
            src: "http://cmgw-vpc.lechange.com:8888/LCO/8H00B85PAJ00001/1/0/20221019T092948/b0d45c2a8d23e7d916587be8a6dae681.m3u8",
            // type: "rtmp/hls",
            // src: "rtmp://www.dsf.com/livetv",
          },
        ],
        hls: true,
      }
    }
  },
}
</script>

Vue3 实时显示摄像头画面

1. 安装依赖

npm i vue3-video-play

2. 引入组件 /src/main.js

import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);

import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css
app.use(vue3videoPlay);

app.mount("#app");

3. 使用

<template>
  <div>
    <vue3VideoPlay
      width="800px"
      title="冰河世纪"
      :src="options.src"
      :type="options.type"
      :autoPlay="false"
    />
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
  src: "http://ccc/324242.m3u8", //视频源
  type: "m3u8", //视频类型
});
</script>

参考文献

vue3-video-player