feat: 初始化vionPlayer

h5/src/components/vionPlayer/index.vue

+<template>
+  <div ref="container"></div>
+</template>
+
+<script>
+export default {
+ name: 'VionPlayer',
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

h5/src/router/index.js

@@ -24,10 +24,15 @@ const routes = [
     name: 'playerback',
     name: 'playerback',
     component: () => import('../views/player/playback.vue')
     component: () => import('../views/player/playback.vue')
   }, */
   }, */
-  {
+  /* {
     path: '/jplayer-demo',
     path: '/jplayer-demo',
     name: 'jplayerDemo',
     name: 'jplayerDemo',
     component: () => import('../views/player/jPlayerDemo.vue')
     component: () => import('../views/player/jPlayerDemo.vue')
+  }, */
+  {
+    path: '/vion-player-demo',
+    name: 'vionPlayerDemo',
+    component: () => import('../views/player/vionPlayerDemo.vue')
   },
   },
   {
   {
     path: '/jplayer-extension',
     path: '/jplayer-extension',

h5/src/views/player/vionPlayerDemo.vue

+<template>
+  <div class="j-player-demo">
+    <div class="player-content">
+      <vion-player ref="vionPlay"
+        :type="playerType"
+        prefix-url=""
+        player-address="52.130.155.147"
+        channel-id="20000000001310000008"
+        :datetime-range="datetimeRange"
+        watermarkText="方案智能"
+      />
+    </div>
+    <div class="footer">
+      <button @click="handleLive">直播</button>
+      <button @click="handlePlayback">回放</button>
+      <button @click="handleStop">停止</button>
+      <button @click="handleScreenshot">抓拍</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import VionPlayer from '../../components/vionPlayer';
+
+export default {
+  name: 'VionPlayerDemo',
+  components: {
+    VionPlayer,
+  },
+  data() {
+    return {
+      playerType: 'live',
+      datetimeRange: [],
+    }
+  },
+  methods: {
+    handleLive() {
+      this.playerType = 'live';
+    },
+    handlePlayback() {
+      this.playerType = 'playback';
+      this.datetimeRange = [
+        '1693904400000',
+        '1693908000000',
+      ];
+    },
+    handleScreenshot() {
+      this.$refs.jplay.screenshotWatermark().then(data => {
+        console.log('handleScreenshot', data);
+      });
+    },
+    handleStop() {
+      const result = this.$refs.jplay.stopPlay();
+      console.log('handleStop', result);
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.j-player-demo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  outline: 1px solid #ccc;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  > .player-content {
+    width: 800px;
+    height: 480px;
+  }
+  > .footer {
+    margin-top: 10px;
+    > button {
+      margin-right: 10px;
+    }
+  }
+}
+</style>