Vue 播放rtmp直播流

最新推荐文章于 2024-09-27 17:17:29 发布

勤劳@小蚂蚁

最新推荐文章于 2024-09-27 17:17:29 发布

阅读量1.3k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zcylyzhi4/article/details/108070801

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue 播放rtmp直播流

前言

该组件是在vue-video-player基础上封装，支持播放mp4/rtmp等格式

一、vueVideo.vue封装

<template>
    <div style="width:100%;height:100%" ref="videoContainer">
        <video-player ref="myPlayer" :options="playerOptions" v-show="contianerW"></video-player>
    </div>
</template>

<script>
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'videojs-flash'

require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

export default {
    components: {},
    data() {
        contianerW: 0
    },
    props: {
        videoOptions: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    computed: {
        playerOptions() {
            return {
                width: this.contianerW,
                sources: [{
                    type: "rtmp/mp4",
                    src: this.videoOptions.sourceSrc || ``
                }],
                techOrder: ['flash'],
                autoplay: true,
                controls: false,
                loop: false,
                notSupportedMessage: `当前无可播放视频源`
            }
        }
    },
    mounted() {
        this.contianerW = this.$refs.videoContainer.offsetWidth;

    },
};
</script>

二、调用方式

 ...
 ....
 <VueVideo :videoOptions="videoOptions"></VueVideo>

...
...
import VueVideo from "$pc/components/vueVideo";


 components: {
  VueVideo
 },
....
....


data() {
    return {
          videoOptions: {
             sourceType: 'video/mp4',
             sourceSrc : '视频流地址'
         },
     };
 },