vue 引入flvjs实现视频播放

1. flv.js详情

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

2.引入依赖

npm install --save flv.js

3.代码实现

<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>

这里url是实现的http的播放视频。