kuangshan-project/src/views/jinjiaqu/videos.vue

<template>
  <div>
    <div class="box">
      <ul class="box_ul">
        <li
          v-for="(item, index) in videos"
          :key="index"
          @click="changeSource(item.src, index)"
          :id="active == index ? 'addclass' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
      <video id="videoPlayer" class="video-js" crossorigin="anonymous" EXT-X-TARGETDURATION="10">
        <!-- <source
        id="source"
        type="application/x-mpegURL"
    > -->
      </video>
    </div>
  </div>
</template>

<script>
var getTime = function () {
  var date = new Date();
  var year = date.getFullYear();
  var month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  return year + month + day;
};
import Videojs from "video.js";
export default {
  data() {
    return {
      nowPlayVideoUrl: `http://video.nxjiewei.com:8011/jinjiaqu/中部北门值班室俯视北/${getTime()}/out.m3u8`,
      options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
        playbackRates: [0.5, 1, 1.25, 1.5, 2, 3], // 加上这个属性，可实现倍速播放
      },
      player: null,
      active: 0,
      systemTime: "",
      videos: [
        {
          name: "中部北门值班室俯视北",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/中部北门值班室俯视北/${getTime()}/out.m3u8`,
        },
        {
          name: "中部北大门值班室俯视南",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/中部北大门值班室俯视南/${getTime()}/out.m3u8`,
        },
        {
          name: "炸药路线-副立井东侧",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/炸药路线-副立井东侧/${getTime()}/out.m3u8`,
        },
        {
          name: "炸药路线-副立井东侧门",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/炸药路线-副立井东侧门/${getTime()}/out.m3u8`,
        },
         {
          name: "炸药路线-副立井东门外",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/炸药路线-副立井东门外/${getTime()}/out.m3u8`,
        },
        {
          name: "副井入口-副立井东侧",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/"副井入口-副立井东侧/${getTime()}/out.m3u8`,
        },
        {
          name: "马路北头立杆-朝西",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/马路北头立杆-朝西/${getTime()}/out.m3u8`,
        },
        {
          name: "马路北头立杆-朝南",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/马路北头立杆-朝南/${getTime()}/out.m3u8`,
        },
        {
          name: "马路北头立杆-朝东",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/马路北头立杆-朝东/${getTime()}/out.m3u8`,
        },
        {
          name: "马路北头立杆-朝北",
          src: `http://video.nxjiewei.com:8011/jinjiaqu/马路北头立杆-朝北/${getTime()}/out.m3u8`,
        },
        
      ],
      vs: [{ name: "111", src: `http://1231231.com/${getTime()}` }],
    };
  },
  mounted() {
    this.getVideo(this.nowPlayVideoUrl);
    this.addDate();
    console.log(this.vs);
  },
  methods: {
    getVideo(nowPlayVideoUrl) {
      this.player = Videojs("videoPlayer", this.options);
      //关键代码， 动态设置src，才可实现换台操作
      this.player.src([
        {
          src: nowPlayVideoUrl,
          type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
        },
      ]);
    },

    changeSource(src, index) {
      this.nowPlayVideoUrl = src;
      this.active = index;
    },

    addDate() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month:
          nowDate.getMonth() + 1 < 10
            ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1,
        date:
          nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate(),
      };
      this.systemTime = date.year + "-" + date.month + "-" + date.date;
    },
  },
  watch: {
    nowPlayVideoUrl(newVal, old) {
      this.getVideo(newVal);
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose(); // Removing Players,该方法会重置videojs的内部状态并移除dom
    }
  },
};

</script>

<style scoped>
#videoPlayer {
  width: 800px;
  height: 600px;
  margin: 50px auto;
}
.box {
  display: flex;
  justify-content: left;
}
.box_ul {
  width: 300px;
  height: 100vh;
  background: #39f;
  overflow: auto;
}
.box_ul > li {
  width: 80%;
  height: 40px;
  text-align: center;
  border: 1px solid;
  margin: 17px auto;
  line-height: 40px;
  border-radius: 20px;
  background: #fff;
}
#addclass {
  background: lightcoral;
}
</style>