player-src/player.vue

<template>
  <div>
    <div class="player-container">
      <div id="glplayer" class="glplayer"></div>
    </div>
    <div class="timeline__container">
      <span>TimeLine</span>
      <span id="ptsLabel" class="timeline" ref="timelineRef">00:00:00/00:00:00</span>
    </div>
    <div class="player__button" role="button" @click="resumeHandler">RESUME</div>
    <div class="player__button" role="button" @click="pauseHandler">PAUSE</div>
  </div>
</template>
<script>
import "./lib/h265/decoder/missile.js";
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import {
  createPlayerServer,
  executePlayerServer,
  destoryPlayerServer,
} from "./lib/util";

/**
 * By default we define a constant vairiable should without vue module
 */
const H265JS_DEFAULT_PLAYER_CONFIG = {
  player: "glplayer",
  width: 960,
  height: 540,
  token:
    "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1",
  extInfo: {
    moovStartFlag: true,
  },
};

export default defineComponent({
  props: {
    src: String,
  },
  setup(props) {
    const timelineRef = ref(null);
    let playerObject = null;
    const resolveConfig = (conf) => Object.assign(H265JS_DEFAULT_PLAYER_CONFIG, conf);

    onMounted(() => {
      playerObject = createPlayerServer(props.src, resolveConfig());
      executePlayerServer(playerObject, timelineRef.value);
    });

    onUnmounted(() => destoryPlayerServer(playerObject));

    const playAction = (action) => {
      if (action === "pause" && playerObject.isPlaying()) {
        console.log("[Action]: Pause");
        playerObject.pause();
        return;
      }
      if (action === "resume" && !playerObject.isPlaying()) {
        console.log("[Action]: Resume");
        playerObject.play();
        return;
      }
    };

    const resumeHandler = () => playAction("resume");

    const pauseHandler = () => playAction("pause");

    return { resumeHandler, pauseHandler, timelineRef };
  },
});
</script>
<style scoped>
.header-line {
  height: 30px;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
  padding: 5px 0;
}
ul li a {
  text-decoration: none;
}

.player-container {
  width: 960px;
  height: 540px;
}

.player__button {
  border: 1px solid black;
  width: 80px;
  border-radius: 5px;
  text-align: center;
  margin: 10px 0;
  cursor: pointer;
}

.timeline__container {
  margin: 5px 0;
}

.timeline__container span:nth-child(2) {
  margin-left: 10px;
}
</style>