<template>
  <div>
    <video ref="videoPlayer" class="video-js"  ></video>
  </div>
</template>

<script>
import vm from '@/boot-app'
import videojs from "video.js";
import "videojs-markers";



export default {
  name: "VideoPlayer",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      player: null,
     
    };
  },
 

  
  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      this.options,
      function onPlayerReady() {
        console.log("onPlayerReady");
      }
    );
    //在初始化的時候引入時間戳記
    this.player.markers({
      markerStyle: {
        width: "8px",
        height: "8px",
        top: "-1px",
        "border-radius": "50%",
        "background-color": "orange",
      },
      breakOverlay: {
        display: true,
        displayTime: 4,
        style: {
          "z-index": "6",
          width: "100%",
          height: "10%",
          "background-color": "rgba(200,250,10,0.6)",
          color: "white",
          "font-size": "16px",
        },
        text: function(marker) {
          return "請看 " + marker.text;
        },
      },
      markerTip: {
        display: true,
        text: function(marker) {
          return marker.text;
        },
      },
      markers: [
        { time: 9.5, text: "PDF第4頁", page: 4 },
        { time: 16, text: "PDF第7頁", page: 7 },
        { time: 27, text: "PDF第10頁", page: 10 },
        { time: 41, text: "PDF第12頁", page: 12 },
      ],

      //點擊時間戳所進行的行為
      onMarkerClick: function(marker) {
      
        console.log(marker.page);
        //直接指向main js 中的vuex方法
        vm.vm.$store.commit("ChangeCurrentPdfPage", marker.page)
      },
      //播放抵達時間戳所進行的行為
      onMarkerReached: function(marker) {
         
        console.log(marker.page);
          //直接指向main js 中的vuex方法
        vm.vm.$store.commit("ChangeCurrentPdfPage", marker.page)
      },
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style scoped >
@import "~@/assets/student-web/default_styles/video-js.css";

@import "~@/assets/student-web/default_styles/videojs.markers.css";
.video-js .vjs-tech {
  outline: none;
  padding: 1px;
}
.video-js button {
  outline: none;
}
</style>
