From 751ceca5616d1815de10f6968ec9472ef8a0f998 Mon Sep 17 00:00:00 2001
From: Sake <1246665453@qq.com>
Date: Thu, 14 Jan 2021 15:01:53 +0800
Subject: [PATCH] Update Demo

---
 demo/html/index.html     | 12 ++++--
 demo/vuecli3/src/App.vue | 93 ++++++++++++++++++----------------------
 2 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/demo/html/index.html b/demo/html/index.html
index 99bc913..3ccbf87 100644
--- a/demo/html/index.html
+++ b/demo/html/index.html
@@ -12,11 +12,17 @@
     <h4 style="width:600px;margin: auto;">H265播放器</h4>
     <br>
     <div style="width:600px;height: 400px; background-color:pink;margin: auto;">
-        <div id="newplay" onClick="onplay" style="width:100%;height: 100%;"></div>
+        <div id="newplay" onClick="onplay"></div>
+        <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
+        <p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p> 
         <input type="text" id="value">
         <button id="btn">播放</button>
     </div>
     <script>
+        // 播放器回调函数
+        callbackfun = function (e) { 
+            console.log(e);
+        }
         // 播放按钮
         var btn = document.getElementById('btn'); 
         // 地址栏
@@ -30,9 +36,7 @@
             player.play(value.value,1);
             console.log(value.value);
         }
-        function callbackfun(e) {
-            console.log("回调数据e:",e);
-        }
+    
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demo/vuecli3/src/App.vue b/demo/vuecli3/src/App.vue
index e32e475..dd81808 100644
--- a/demo/vuecli3/src/App.vue
+++ b/demo/vuecli3/src/App.vue
@@ -1,22 +1,20 @@
 <template>
   <div id="app">
-      <h4>H265播放器</h4>
-      <el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
-      <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
-      <el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
-      <el-row class="box">
-        <el-col :xs="12" class="list"></el-col>
-        <el-col :xs="12" class="list"></el-col>
-        <el-col :xs="12" class="list"></el-col>
-        <el-col :xs="12" class="list"></el-col>
-      </el-row>
-      <!-- <h4>H265播放器</h4>
-      <div class="player-box">
-        <div id="wasmPlayer"></div>
-      </div>
-      <el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
-      <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv</p>
-      <el-button class="player-button" size="mini" type="success" @click="play">播放</el-button> -->
+    <el-row>
+      <el-col :span="24">
+        <h4>H265播放器</h4>
+        <div class="player-box">
+          <div id="wasmPlayer"></div>
+        </div>
+        <div style="width:600px;margin: auto;">
+          <div id="newplay" onClick="onplay"></div>
+          <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
+          <p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p> 
+          <el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
+          <el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -58,41 +56,32 @@
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
   }
-  // .el-row,
-  // .el-col {
-  //   min-height: 300px;
-  //   max-width: 600px;
-  //   margin: auto;
-  // }
-  // .el-input {
-  //   padding: 5px;
-  //   box-sizing: border-box;
-  // }
-  // .player-button {
-  //   margin: 5px;
-  //   width: 100%;
-  // }
-  // p {
-  //   font-size: 12px;
-  //   color: #67c23a;
-  // }
-  // .player-box {
-  //   height: 400px;
-  //   width: 600px;
-  //   margin: auto;
-  //   margin-top: 2%;
-  //   border: 1px solid #eee;
-  // }
-  // .el-input__inner:focus {
-  //   border-color: #67c23a !important;
-  // }
-  .box {
-    max-width: 900px;
+  .el-row,
+  .el-col {
+    min-height: 300px;
+    max-width: 600px;
     margin: auto;
-    margin-top: 20px;
-    .list {
-      padding-bottom: 50%;
-      background-color: red;
-    }
+  }
+  .el-input {
+    padding: 5px;
+    box-sizing: border-box;
+  }
+  .player-button {
+    margin: 5px;
+    width: 100%;
+  }
+  p {
+    font-size: 12px;
+    color: #67c23a;
+  }
+  .player-box {
+    height: 400px;
+    width: 600px;
+    margin: auto;
+    margin-top: 2%;
+    border: 1px solid #eee;
+  }
+  .el-input__inner:focus {
+    border-color: #67c23a !important;
   }
 </style>
\ No newline at end of file