企业官网建站 小程序开发 云逸学习园地
技术文章 许愿墙
技术文章 PHP学习 Javascript学习 DIV+CSS学习 uniapp学习 HTML学习 微信小程序、公众号知识点 VUE知识学习
您所在的位置>云逸小栈>VUE知识学习>正文

vue播放海康rtmp流

2024-11-21 17:38:44 浏览 1014

安装依赖库:

npm install video.js videojs-flash

html代码部分

<template>
  <div>
      <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
  </div>
</template>

js部分

import videojs from 'video.js';
import 'videojs-flash';
export default {
name: 'VideoPlayer',
    mounted() {
       this.player = videojs(this.$refs.videoPlayer, this.videoOptions, function onPlayerReady() {
       console.log('Player is ready');
    });
},
beforeDestroy() {
    if (this.player) {
    this.player.dispose();
    }
},
data() {
    return {
        player: null,
        videoOptions: {
            flash: {
            swf: 'path_to_video-js.swf' // 指定videojs-flash的swf文件路径
            },
            autoplay: true,
            controls: true,
            sources: [{
            src: 'rtmp://username:password@your_hik_ip/hik/ch1_1', // 海康RTMP流地址
            type: 'rtmp/flv'
            }]
        }
   };
 }
};


网站开发者电话

18066742510

个人微信号
个人公众号
个人小程序
个人抖音