【视频直播篇四】vue-cli3集成flv.js

前言

这个视频直播出了一个系列，以下文章是几个播放器的使用教程

• 【视频直播篇一】入门篇
• 【视频直播篇二】vue-cli3集成LivePlayer
• 【视频直播篇三】vue-cli3集成vue-video-player
• 【视频直播篇五】vue-cli3集成vue-aliplayer-v2
• 【视频直播篇六】videojs的使用
• 【视频直播篇七】Aliplayer的使用

正文

在public目录下的index.html文件加入flv.js

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>

创建vue页面

<template>
    <div class="content">
        <video id="my-video" style="width:100%;height:100%;position:relative;" autoplay muted></video>
    </div>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {
            startPlay() {
                if (flvjs.isSupported()) {
                    const videoElement = document.getElementById("my-video");
                    const flvPlayer = flvjs.createPlayer(
                        {
                            type: "flv",
                            isLive: true,
                            hasAudio: false,
                            //必须与node搭建的流媒体服务器中的http的端口和推流的参数吻合
                            url: 'http://r.ossrs.net/live/bbb.flv'
                        },
                        {
                            enableStashBuffer: true,
                            stashInitialSize: 128
                        }
                    );
                    flvPlayer.attachMediaElement(videoElement)
                    flvPlayer.load()
                    flvPlayer.play()
                } else {
                    console.log("flvjs不支持")
                }
            }
        },
        mounted() {
            this.startPlay()
        }
    }
</script>