2021-01-25

使用flv播放直播流

1.在vue中使用

（1）下载flv.js

链接：https://pan.baidu.com/s/1_CFR43b5PsQ6lLm7GcPaKA

提取码：r72u

（2）在index.html中引入

    <script src="js/flv.min.js"></script>

（3）在需要使用的组件使用

html:

 <video

        id="videoElement"

        class="centeredVideo"

        controls

        autoplay

        width="100%"

        height="100%"

      >

        您的浏览器不支持 video 标签。

      </video>

 <div class="controls">

      <button onclick="flv_load()">加载</button>

      <button onclick="flv_start()">开始</button>

      <button onclick="flv_pause()">暂停</button>

      <button onclick="flv_destroy()">停止</button>

      <input style="width: 100px" type="text" name="seekpoint" />

      <button onclick="flv_seekto()">跳转</button>

    </div>

js:

play(){

 var player = document.getElementById("videoElement");

      if (flvjs.isSupported()) {

        var flvPlayer = flvjs.createPlayer({

          type: "flv",

          url:

            "https://flvopen.ys7.com:9188/openlive/ae466a6982d1480fb887f8c472c6a4d6.flv",

        });

        flvPlayer.attachMediaElement(videoElement);

        flvPlayer.load(); //加载

      }

}

 function flv_start() {

          player.play();

      }

      function flv_pause() {

          player.pause();

      }

      function flv_destroy() {

          player.pause();

          player.unload();

          player.detachMediaElement();

          player.destroy();

          player = null;

      }

      function flv_seekto() {

          player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);

      }

注意：

如果在弹窗中使用，关闭窗口时，flvPlayer要重置， 例：this.flvPlayer = null;

不然不会替换，一直会是第一个直播流