新增拉流代码

node_modules/.package-lock.json

@@ -1,12 +1,13 @@
 {
-  "name": "shopxo-uniapp",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "node_modules/jweixin-module": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
-      "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
+    "name": "HlsVideoPlayer - APP 的 hls 的视频流播放器",
+    "version": "0.0.1",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "node_modules/hls.js": {
+            "version": "1.6.15",
+            "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+            "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA=="
+        }
     }
-  }
 }

package.json

@@ -1,5 +1,20 @@
 {
-  "dependencies": {
-    "jweixin-module": "^1.6.0"
-  }
-}
+    "id": "liusheng22-HlsVideoPlayer",
+    "name": "HlsVideoPlayer - APP 的 hls 的视频流播放器",
+    "displayName": "HlsVideoPlayer - APP 的 hls 的视频流播放器",
+    "version": "0.0.1",
+    "description": "APP 的视频流播放器，支持iOS & Android，但是仅支持 hls 视频流，flv 不支持原因见下方文档详细说明",
+    "keywords": [
+        "hls",
+        "flv",
+        "m3u8",
+        "视频流",
+        "视频播放器"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}

pages/plugins/live/pull/pull.vue

@@ -1,12 +1,22 @@
 <template>
     <view :class="theme_view">
-        <video class="wh-auto ht dis-block" :is-live="true" src="rtmp://live-pull.shopxo.vip/68f764013572f9240ca7ce6c/shopxo" 
-            @error="video_error_callback" 
-            :autoplay="autoplay" 
-            :controls="controls" 
-            :show-fullscreen-btn="show_fullscreen_btn" 
-            :enable-play-gesture="false"
-        ></video>
+        <!-- #ifdef H5 -->
+        <h5-hls-video ref="h5_hls_video" src="http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8"></h5-hls-video>
+        <!-- <flv-video
+            ref="flv_player"
+            src="http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8"
+            mode="live"
+            autoplay
+            style="width: 300px; height: 225px;"
+        ></flv-video> -->
+        <!-- #endif -->
+        <!-- <live-player
+            src="http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8"
+            mode="live"
+            autoplay
+            style="width: 300px; height: 225px;"
+        ></live-player> -->
+        <button type="primary" @click="play_pause_event">播放/暂停</button>
         <view class="page-width-max pf z-i-deep bottom-0-lg wh-auto bg-white">
             <view v-if="message_list.length > 0" class="radius padding-main">
                 <block v-for="(item, index) in message_list">
@@ -28,8 +38,12 @@
     </view>
 </template>
 <script>
+    import flvVideo from './flv-video.vue'
     const app = getApp();
     export default {
+        components: {
+            flvVideo
+        },
         data() {
             return {
                 theme_view: app.globalData.get_theme_value_view(),
@@ -260,6 +274,12 @@
                     return false;
                 }
                 this.socket_send('message', value);
+            },
+            // 播放/暂停事件
+            play_pause_event() {
+                if (this.$refs.h5_hls_video) {
+                    this.$refs.h5_hls_video.play();
+                }
             }
         }
     }