diff --git a/example_vue/public/index.html b/example_vue/public/index.html index be9432aa..c0c580cc 100644 --- a/example_vue/public/index.html +++ b/example_vue/public/index.html @@ -16,6 +16,7 @@ > +
diff --git a/example_vue/src/App.vue b/example_vue/src/App.vue index c39e2cef..6cefbbdf 100644 --- a/example_vue/src/App.vue +++ b/example_vue/src/App.vue @@ -46,61 +46,62 @@ * vue/next is same as vue2, so we should init project * in mounted lifecycle. */ -import { defineComponent, onMounted, onUnmounted, ref } from "vue"; -import { createPlayerServer, executePlayerServer } from "./services/player"; +import { defineComponent, onMounted, onUnmounted, ref } from 'vue' +import { + createPlayerServer, + executePlayerServer, + destoryPlayerServer, +} from './services/player' /** * By default we define a constant vairiable should without vue module */ -const URL = "hevc_test_moov_set_head_16s.mp4"; +const URL = 'hevc_test_moov_set_head_16s.mp4' const H265JS_DEFAULT_PLAYER_CONFIG = { - player: "glplayer", + player: 'glplayer', width: 960, height: 540, token: - "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1", + 'base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1', extInfo: { moovStartFlag: true, }, -}; +} export default defineComponent({ setup() { - const timelineRef = ref(null); - let playerObject = null; + const timelineRef = ref(null) + let playerObject = null const resolveConfig = (conf) => - Object.assign(H265JS_DEFAULT_PLAYER_CONFIG, conf); + Object.assign(H265JS_DEFAULT_PLAYER_CONFIG, conf) onMounted(() => { - playerObject = createPlayerServer(URL, resolveConfig()); - executePlayerServer(playerObject, timelineRef.value); - }); + playerObject = createPlayerServer(URL, resolveConfig()) + executePlayerServer(playerObject, timelineRef.value) + }) - onUnmounted(() => { - playerObject = null; - }); + onUnmounted(() => destoryPlayerServer(playerObject)) const playAction = (action) => { - // console.log(playerObject); - if (action === "pause" && playerObject.isPlaying()) { - console.log("[Action]: Pause"); - playerObject.pause(); - return; + if (action === 'pause' && playerObject.isPlaying()) { + console.log('[Action]: Pause') + playerObject.pause() + return } - if (action === "resume" && !playerObject.isPlaying()) { - console.log("[Action]: Resume"); - playerObject.play(); - return; + if (action === 'resume' && !playerObject.isPlaying()) { + console.log('[Action]: Resume') + playerObject.play() + return } - }; + } - const resumeHandler = () => playAction("resume"); + const resumeHandler = () => playAction('resume') - const pauseHandler = () => playAction("pause"); + const pauseHandler = () => playAction('pause') - return { resumeHandler, pauseHandler, timelineRef }; + return { resumeHandler, pauseHandler, timelineRef } }, -}); +})