antissoft / antissoft.dati.admin

  <template>
    <div class="container">

      <video id="id_test_video" style="width:100%; height:100vh;"></video>

    </div>
  </template>
  <script>

    export default {
      data() {
        return {
          streaName: ''
        };
      },
      created() {
        let streaName = this.$route.query.id;
        this.streaName = streaName;
      },
      mounted() {
        this.$nextTick(function () {

          let url = `http://watch.t1j2.com/live/${this.streaName}.m3u8`;
          let player = TCPlayer("id_test_video", {

            m3u8: `http://watch.t1j2.com/live/${this.streaName}.m3u8`,
            flv: `http://watch.t1j2.com/live/${this.streaName}.flv`, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
            autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            poster: "",
            width: "1200", //视频的显示宽度，请尽量使用视频分辨率宽度
            height: "800", //视频的显示高度，请尽量使用视频分辨率高度
          });

          player.src(url)

        });
  
      },
      methods: {},
    };

  </script>
  <style lang="scss" scoped>

    .container {

      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100vh - 50px);
      background-color: #000;

    }
  
    #id_test_video {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  </style>
  <style scoped>

    >>>.vcp-player {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
    }

    video{
      width: 100vw!important;
      height: 100vh!important;
    }

  </style>