vue实现rtmp流播放

vue实现rtmp流播放

使用所需

  "dependencies": {
    "videojs-contrib-hls": "5.14.1",
    "videojs-contrib-hls.js": "3.2.0",
    "videojs-flash": "2.1.0",
    "e-vue-contextmenu": "^0.1.3",
  },

实现代码
我就直接把.vue文件放进来了,所使用的rtmp流来源于：点击查看
无需配置main.js，支持右键行为。

<template>
    <div class="liveView">
        <!-- 右键 -->
        <div style="height:0px;width:0px ;">
            <Dropdown>
                <DropdownMenu
                    v-show="downShow"
                    :style="{marginLeft:left+'px',textAlign:'center',marginTop:top+'px',position:'absolute',backgroundColor:'#EEEEEE',zIndex:100,borderRadius:'5px',fontWeight:'bold'}"
                    class="contextmenu"
                >
                    <DropdownItem @click.native="stopPlay(nowIndex)" name="carLatLng">
                        <Icon type="ios-locate-outline" />停止播放
                    </DropdownItem>
                    <DropdownItem @click.native="changeVideo(nowIndex)" name="carLatLng">
                        <Icon type="ios-locate-outline" />切换码流
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <!-- 顶部图标 -->
        <Row style="padding-top:0.4rem;">
            <Col span="3" offset="20">
                <img
                    @click="viewVideoOne"
                    width="20px"
                    height="20px"
                    src="../../../../assets/image/SurveillanceVideo/one.png"
                />
                <img
                    @click="viewVideoFour"
                    style="margin-left:0.75rem"
                    width="20px"
                    height="20px"
                    src="../../../../assets/image/SurveillanceVideo/four.png"
                />

                <img
                    @click="viewVideoNine"
                    style="margin-left:0.75rem"
                    width="20px"
                    height="20px"
                    src="../../../../assets/image/SurveillanceVideo/nine.png"
                />
            </Col>
        </Row>
        <!-- 视频控件 -->
        <div class="videoView">
            <Row style="height:800px;width:1400px;padding-left:20px">
                <Col :span="Aspan" v-for="(item,index) in videoList" :key="index">
                    <video-player
                        @contextmenu.prevent.native="rightClick($event,index)"
                        style="border:1px solid;"
                        :playsinline="true"
                        class="vjs-custom-skin"
                        ref="videoPlayer"
                        :options="playerOptions[index]"
                        @pause="onPlayerPause($event)"
                        @play="onPlayerPlay($event,index)"
                        @fullscreenchange="onFullscreenChange($event,index)"
                    ></video-player>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
// import flvjs from "flv.js/dist/flv.js";
const isProduction = process.env.NODE_ENV === "production";
export default {
    name: "liveView",
    data() {
        return {
            nowIndex: "",
            top: 0, //右键弹窗顶部距离
            left: 0, //右键弹窗左部距离
            downShow: false, //右键弹框
            Aspan: "", //设置播放器的默认列大小
            videoList: [], //存储trmp URL
            playerOptions: [] //渲染vue-video-player组件使用
        };
    },
    watch: {
        // 监听data中的downShow值得更改
        downShow(value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        }
    },
    created() {
        this.videoList = [
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            },
            {
                url:
                    "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
            }
        ];
        if (this.videoList.length == 1) {
            this.Aspan = "24";
        } else if (this.videoList.length == 4) {
            this.Aspan = "12";
        } else if (this.videoList.length == 9) {
            this.Aspan = "8";
        }
        for (let i = 0; i < this.videoList.length; i++) {
            let arrs = {
                autoplay: true,
                controls: true,
                techOrder: ["flash", "html5"],
                aspectRatio: "16:9",
                sourceOrder: true,
                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                fluid: true,
                flash: {
                    hls: { withCredentials: false },
                    swf: isProduction
                        ? "/vue-videojs-demo/static/media/video-js.swf"
                        : "/static/media/video-js.swf"
                },
                html5: { hls: { withCredentials: false } },
                sources: [
                    {
                        withCredentials: false,
                        type: "application/x-mpegURL",
                        src: this.videoList[i].url
                    }
                ],
                poster: isProduction
                    ? "/vue-videojs-demo/static/images/logo.png"
                    : "/static/images/logo.png",
                controlBar: {
                    timeDivider: false, // 时间分割线
                    durationDisplay: false, // 总时间
                    progressControl: false, // 进度条
                    customControlSpacer: false, // 未知
                    fullscreenToggle: true // 全屏
                }
            };
            this.playerOptions.push(arrs);
        }
    },

    computed: {
        player() {
            return this.$refs.videoPlayer.player;
        }
    },
    methods: {
        //停止
        stopPlay(idx) {
            console.log(idx);
            this.$refs.videoPlayer[idx].player.pause(); // 暂停
        },
        //切换码流
        changeVideo(idx) {
            console.log(idx, this.videoList[idx]);
        },
        //播放
        onPlayerPlay(player) {
            player.play();
        },
        //暂停
        onPlayerPause(player, index) {},
        //注销vue-video-player组件
        remove() {
            this.$destroy("videoPlayer");
        },
        //右键行为
        rightClick(e, index) {
            this.nowIndex = index;
            const menuMinWidth = 105;
            const offsetLeft = this.$el.getBoundingClientRect().left;
            const offsetWidth = this.$el.offsetWidth;
            const maxLeft = offsetWidth - menuMinWidth;
            const left = e.clientX - offsetLeft;
            if (left > maxLeft) {
                this.left = maxLeft;
            } else {
                this.left = left;
            }
            this.top = e.clientY - 60;
            this.downShow = true;
        },
        //关闭菜单
        closeMenu() {
            this.downShow = false;
        },
        //单个视频播放
        viewVideoOne() {
            this.videoList = [
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                }
            ];
            this.Aspan = "24";
        },
        //四个视频播放
        viewVideoFour() {
            this.videoList = [
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                }
            ];
            this.Aspan = "12";
        },
        //九个视频播放
        viewVideoNine() {
            this.videoList = [
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                },
                {
                    url:
                        "rtmp://demo.easynvr.com:17935/hls/stream_17?token=88150c90e5792fcd9242f0f7e3cdb6f3"
                }
            ];
            this.Aspan = "8";
        }
    }

    // }
};
</script>