elementUI中使用 B站的flv.js 播放直播视频

和黑猫之家聊聊?

  1. 1 详情信息

    flv.js git地址链接: https://github.com/bilibili/flv.js .

  2. 引入依赖

    yarn add flv.js
  3. 代码DEMO

<template>
    <div>
        <video autoplay controls width="100%" height="500" id="videoElement"></video>
    </div>
</template>

<script>
    import flvjs from 'flv.js'

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        mounted() {
            this.$nextTick(() => {
                this.createVideo()
            })
        },
        methods: {
            createVideo() {
                if (flvjs.isSupported()) {
                    var videoElement = document.getElementById('videoElement');
                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: 'url' //你的url地址
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
                    flvPlayer.play();
                }
            }
        }
    }
</script>


来黑猫之家看看呗

Copyright © 2021-2023 | 个人技术展示 |赣ICP备18005425号-1 | 赣公网安备36070202000869 |