vue实现无flash播放hlv流直播

vue实现无flash播放hlv流直播

依旧是直接放代码，可直接复制粘贴使用，注意方法。
所需配置
使用B站开源flv.js实现无flash播放流

"dependencies": {
    "e-vue-contextmenu": "^0.1.3",
    "flv.js": "^1.5.0",
  },

<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="onPlayerPlay(nowIndex)" name="carLatLng">
                        <Icon type="ios-locate-outline" />开始播放
                    </DropdownItem>
                    <DropdownItem @click.native="onPlayerPause(nowIndex)" name="carLatLng">
                        <Icon type="ios-locate-outline" />暂停播放
                    </DropdownItem>
                    <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="padding-left:20px">
                <Col :span="Aspan" v-for="(item,index) in urlList" :key="index">
                    <video
                        :style="style"
                        :id="item.id"
                        @contextmenu.prevent="rightClick($event,index)"
                        controls="controls"
                        autoplay="autoplay"
                    ></video>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import flvjs from "flv.js/dist/flv.min.js";
const isProduction = process.env.NODE_ENV === "production";
export default {
    name: "liveView",
    data() {
        return {
            urlList: [],
            style: "",
            screenWidth: "",
            screenHeight: "",

            player: [],
            playing: false,

            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() {
        if (this.$store.state.monitorVideoIsDisplay == true) {
            // this.viewVideoFour();
            this.viewVideoNine();
            this.style = "width:100%;height:260px;";
        }
    },
    mounted() {
        if (flvjs.isSupported()) {
            for (let i = 0; i < this.urlList.length; i++) {
                let video = document.getElementById("video" + i);
                console.log(video);
                if (video) {
                    this.$store.state.player[i] = flvjs.createPlayer({
                        type: "flv",
                        isLive: true,
                        url: this.urlList[i].url
                    });
                    this.$store.state.player[i].attachMediaElement(video);
                    this.$store.state.player[i].load();
                    this.$store.state.player[i].play();
                }
            }
        }
    },
    computed: {},
    methods: {
        //播放
        onPlayerPlay(index) {
            console.log(index, "开始");
            let video = document.getElementById("video" + index);
            if (video) {
                this.$store.state.player[index] = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    url: this.urlList[index].url
                });
                this.$store.state.player[index].attachMediaElement(video);
                this.$store.state.player[index].load();
                this.$store.state.player[index].play();
            }
        },
        //暂停
        onPlayerPause(index) {
            console.log(index, "暂停");
            this.$store.state.player[index].pause(); // 暂停
        },
        //停止
        stopPlay(index) {
            console.log(index, "停止");
            this.$store.state.player[index].pause();
            this.$store.state.player[index].unload();
            this.$store.state.player[index].detachMediaElement();
            this.$store.state.player[index].destroy();
            this.$store.state.player[index] = null;
        },
        //切换码流
        changeVideo(idx) {
            console.log(idx, this.videoList[idx]);
            // this.videoList[idx].url = "123";
        },

        //注销vue-video-player组件
        remove() {
            this.$destroy("videoPlayer");
        },
        //右键行为
        rightClick(e, index) {
            console.log(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.urlList = [
                {
                    id: "video0",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                }
            ];
            this.Aspan = "24";
        },
        //四个视频播放
        viewVideoFour() {
            this.urlList = [
                {
                    id: "video0",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video1",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video2",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video3",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                }
            ];

            this.Aspan = "11";
        },
        //九个视频播放
        viewVideoNine() {
            this.urlList = [
                {
                    id: "video0",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video1",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video2",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video3",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },

                {
                    id: "video4",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video5",
                    url: "http://demo.easynvr.com:10800/flv/hls/stream_1.flv"
                },
                {
                    id: "video6",
                    url: "http://123.13.201.131:3380/live?port=1935&app=http_flv&stream=sim123456"
                },

                {
                    id: "video7",
                    url: "http://123.13.201.131:3380/live?port=1935&app=http_flv&stream=sim123456"
                },
                {
                    id: "video8",
                    url: "http://123.13.201.131:3380/live?port=1935&app=http_flv&stream=sim123456"
                }
            ];
            this.Aspan = "8";
        }
    }

    // }
};
</script>