流媒体服务器ZLMediakit实现浏览器网页播放视频+edge浏览器播放不了问题+嵌入到vue

ZLMediakit官网：播放url规则 · ZLMediaKit/ZLMediaKit Wiki (github.com)

一. 浏览器网页播放

使用ZLMediakit推流后，需要在浏览器上进行预览，可以使用flv.js来实现

新建一个 .html文件，写入下面代码，保存后双击html文件即可看视频了

二 . 关于edge播放不了，但Google浏览器能播放的问题

1.在vide id 标签后 加上 muted就可以了，如：<video id="videoElement" muted></video>

2. 实现自动播放，在video id 标签后加上 controls autoplay 就能自动播放了

如：<video id="videoElement" controls autoplay></video>。也可以不加，届时手动点击播放即可。

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<video id="videoElement" controls autoplay muted></video>
<button class="btn">播放</button>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://服务器地址（IP）/这里写app（目录）的名称/这里写stream的名称.live.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        document.querySelector('.btn').addEventListener('click', () => {
            // document.querySelector('.btn').click();
            flvPlayer.play();
        })
    }
</script>

 如果http默认端口不是80的话，需要加上http端口号，例如我的端口为1888

 url: 'http://192.168.1.100:1888/live/test.live.flv'

url: 'http://服务器地址（IP）:1888/这里写app（目录）的名称/这里写stream的名称.live.flv'

二.将flv.js 嵌入到vue中

<script>
import flvjs from "flv.js";
export default {
  props: {
    rtsp: String,
    id: String,
  },
  /**
   * @returns {{player: flvjs.Player}}
   */
  data() {
    return {
      player: null,
    };
  },
  mounted() { 
    const url = new URL(window.location.href);
    const hostWithoutPort = url.hostname;
    if (flvjs.isSupported()) {
      let video = this.$refs.player;
      if (video) {
        this.player = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          url: `http://192.168.1.111/live/test.live.flv`,
         // url:`http://${hostWithoutPort}/live/test.live.flv`,
        });
        this.player.attachMediaElement(video);
        try {
          this.player.load();
          this.timer = setTimeout(() => {
          this.player && this.player.play();
        }, 500);
        } catch (error) {
          console.log(error);
        }
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.player.destory();
  },

  methods: {
    toggleFullScreen() {
      const video = this.$refs.player;
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen) { /* Firefox */
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        video.webkitRequestFullscreen();
      } else if (video.msRequestFullscreen) { /* IE/Edge */
        video.msRequestFullscreen();
      }
    }
  }
};
</script>