diff --git a/example_vue/src/App.vue b/example_vue/src/App.vue
index 08bef2d1..c39e2cef 100644
--- a/example_vue/src/App.vue
+++ b/example_vue/src/App.vue
@@ -7,8 +7,16 @@
     <div class="player-container">
       <div id="glplayer" class="glplayer"></div>
     </div>
-    <div class="player__button">RESUME</div>
-    <div class="player__button" role="button">PAUSE</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>
     <!-- comapny tips -->
     <footer>
       <ul>
@@ -38,38 +46,61 @@
  * vue/next is same as vue2, so we should init  project
  * in mounted lifecycle.
  */
-import { defineComponent, onMounted } from 'vue'
-import { createPlayerServer } from './services/player'
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { createPlayerServer, executePlayerServer } 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() {
-    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())
-    })
+      playerObject = createPlayerServer(URL, resolveConfig());
+      executePlayerServer(playerObject, timelineRef.value);
+    });
+
+    onUnmounted(() => {
+      playerObject = null;
+    });
+
+    const playAction = (action) => {
+      // console.log(playerObject);
+      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");
 
-    resumeHandler = () => {}
+    const pauseHandler = () => playAction("pause");
+
+    return { resumeHandler, pauseHandler, timelineRef };
   },
-})
+});
 </script>
 
 <style scoped>
@@ -102,4 +133,12 @@ ul li a {
   margin: 10px 0;
   cursor: pointer;
 }
+
+.timeline__container {
+  margin: 5px 0;
+}
+
+.timeline__container span:nth-child(2) {
+  margin-left: 10px;
+}
 </style>
diff --git a/example_vue/src/services/player.js b/example_vue/src/services/player.js
index 547b5a8c..29bcfb9c 100644
--- a/example_vue/src/services/player.js
+++ b/example_vue/src/services/player.js
@@ -1,5 +1,46 @@
-import H265webjsModule from '../../public/dist/index'
+import H265webjsModule from "../../public/dist/index";
+
+const durationFormmat = (val) => {
+  val = val.toString();
+  if (val.length < 2) return "0" + val;
+  return val;
+};
+
+const setDurationText = (duration) => {
+  if (duration < 0) return "Player";
+  const randDuration = Math.round(duration);
+  return (
+    durationFormmat(Math.floor(randDuration / 3600)) +
+    ":" +
+    durationFormmat(Math.floor((randDuration % 3600) / 60)) +
+    ":" +
+    durationFormmat(Math.floor(randDuration % 60))
+  );
+};
 
 export const createPlayerServer = (videoUrl, config) => {
-  return H265webjsModule.createPlayer(videoUrl, config)
-}
+  return H265webjsModule.createPlayer(videoUrl, config);
+};
+
+export const executePlayerServer = (player, timelineEl) => {
+  // todo....
+  let mediaInfo = null;
+  player.onLoadFinish = () => {
+    mediaInfo = player.mediaInfo();
+    if (mediaInfo.videoType === "vod") {
+      timelineEl.textContent =
+        setDurationText(0) +
+        "/" +
+        setDurationText(mediaInfo.meta.durationMs / 1000);
+    }
+  };
+  player.onPlayTime = (pts) => {
+    if (mediaInfo.videoType === "vod") {
+      timelineEl.textContent =
+        setDurationText(pts) +
+        "/" +
+        setDurationText(mediaInfo.meta.durationMs / 1000);
+    }
+  };
+  player.do();
+};