Vue 中使用 flv.js 播放视频

5,185 阅读1分钟

由于video标签仅支持Ogg、MPEG4、WebM 三种格式,现在需要支持flv格式,研究后发现可以使用flvjs,实现flv格式的视频播放,具体使用方法如下:

  1. flv.js git地址链接: github.com/bilibili/fl….

  2. 安装依赖

npm install --save flv.js

3.代码

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

<script>
    import flvjs from 'flv.js'

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

4.效果

image.png