From 0d872ef3e821185959f25cb8a340846d3a27d86d Mon Sep 17 00:00:00 2001
From: zhouliujun <1096432931@qq.com>
Date: Sat, 10 Oct 2020 14:10:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 58 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index e0007be..bc7fc44 100644
--- a/README.md
+++ b/README.md
@@ -40,18 +40,26 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
 ```html
 <template>
     <div id="app">
-        <template v-if="show">
+        <template v-if="!isShowMultiple && show">
             <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
         </template>
-        <p class="remove-text" v-else>播放器已销毁!</p>
+        <div v-if="isShowMultiple && show" class="show-multiple">
+            <template v-for="x in 5">
+                <vue-aliplayer-v2 class="multiple-player" :key="x" :source="source" ref="VueAliplayerV2" :options="options" />
+            </template>
+        </div>
+        <p class="remove-text" v-if="!show">播放器已销毁!</p>
         <div class="player-btns">
-            <span @click="play()">播放</span>
-            <span @click="pause()">暂停</span>
-            <span @click="replay()">重播</span>
-            <span @click="getCurrentTime()">播放时刻</span>
+            <template v-if="!isShowMultiple && show">
+                <span @click="play()">播放</span>
+                <span @click="pause()">暂停</span>
+                <span @click="replay()">重播</span>
+                <span @click="getCurrentTime()">播放时刻</span>
+                <span @click="getStatus()">获取播放器状态</span>
+            </template>
             <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
             <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
-            <span @click="getStatus()">获取播放器状态</span>
+            <span @click="showMultiple()">{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span>
         </div>
         <div class="source-box">
             <span class="source-label">选择播放源(支持动态切换):</span>
@@ -69,16 +77,18 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
     </div>
 </template>
 <script>
-// import VueAliplayerV2 from 'vue-aliplayer-v2';
 export default {
-    // components:{ VueAliplayerV2 },
     data(){
         return {
             options: {
-                source:'//player.alicdn.com/video/aliyunmedia.mp4'
+                // source:'//player.alicdn.com/video/aliyunmedia.mp4',
+                isLive: true,   //切换为直播流的时候必填
+                // format: 'm3u8'  //切换为直播流的时候必填
             },
             source: '//player.alicdn.com/video/aliyunmedia.mp4',
-            show: true
+            // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
+            show: true,
+            isShowMultiple: false
         }
     },
 
@@ -97,7 +107,18 @@ export default {
         },
 
         getCurrentTime(){
-            this.$refs.VueAliplayerV2.getCurrentTime();
+            // this.$refs.VueAliplayerV2.getCurrentTime();
+            this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
+        },
+
+        getStatus(){
+           const status =  this.$refs.VueAliplayerV2.getStatus();
+           console.log(`getStatus:`, status);
+           alert(`getStatus:${status}`);
+        },
+
+        showMultiple(){
+            this.isShowMultiple = !this.isShowMultiple;
         }
     }
 }
@@ -112,6 +133,13 @@ export default {
     padding: 20px;
     font-size: 24px;
 }
+.show-multiple{
+    display: flex;
+    .multiple-player{
+        width: calc(100% / 4);
+        margin: 20px;
+    }
+}
 .player-btns{
     width: 100%;
     display: flex;
@@ -168,12 +196,6 @@ props:{
         type: [Object],
         default: () => null
     },
-    
-    id:{  //播放器的ID 唯一标识符 不传就是默认的 但是有多个的时候不一定是唯一的
-        required: false,
-        type: [String],
-        default: `player-${Date.parse(new Date())}`
-    },
 
     cssLink:{   //css版本源
         required: false,