edit

index.html

@@ -49,7 +49,6 @@
   <div class="container">
     <div class="front">
       <div id="lvb"></div>
-      <video id="remoteVideo" autoplay playsinline></video>
     </div>
     <div class="side"></div>
     <div class="wheel">

index.js

@@ -2,6 +2,7 @@ var insert = require('./utils/insertscript');
 var ios = require('./libs/ios');
 var android = require('./libs/android');
 import './less/index.less'
+import toast from 'in-toast'
 
 new TcPlayer('lvb', {
   "m3u8": "http://14246.liveplay.myqcloud.com/live/14246_055dd098ab729831abff0c1f55536403.m3u8    ",
@@ -25,19 +26,23 @@ if (/iphone|ipad|ipod/gi.test(ua)) {
 var btnPlay = document.querySelector('.play')
 var wheel = document.querySelector('.wheel')
 var btnDown = document.querySelector('.down')
+var vLvb = document.querySelector('#lvb')
 
 btnPlay.addEventListener('click', start)
 btnDown.addEventListener('click', () => {
+  toast('1.2秒后结束游戏...')
   setTimeout(end, 1200)
 })
 
 function start() {
   show.call(wheel)
   hide.call(btnPlay)
+  hide.call(vLvb)
 }
 
 function end() {
   show.call(btnPlay)
+  show.call(vLvb)
   hide.call(wheel)
 }
 

less/index.less

@@ -26,6 +26,13 @@ body {
   overflow: hidden;
 }
 
+.side {
+  .size(250, 350);
+  .pos(50, 275);
+  overflow: hidden;
+  display: none;
+}
+
 .wheel {
   display: none;
   @height: 400;
@@ -96,3 +103,15 @@ body {
   background-color: @color;
   border-radius: 30px;
 }
+
+canvas,
+#lvb,
+#lvb video {
+  width: 100%;
+  height: 100%;
+  .pos(0, 0);
+}
+
+#lvb {
+  z-index: 100;
+}
\ No newline at end of file

libs/android.js

 module.exports = function() {
+  var ele = document.createElement('video')
+  ele.id = "remoteVideo"
+  ele.autoplay = "autoplay"
+  document.querySelector('.front').appendChild(ele)
+
   WebRTCAPI.init({
     onInitResult: function(result) {
       console.log("on init result : " + result);
@@ -65,6 +70,6 @@ module.exports = function() {
     openid: "1574",
     sdkAppId: 1400050371,
     accountType: 19242,
-    userSig: "eJxFkFFPgzAUhf8LrzNyCytVEx-qYGQGE8fAZHtpKnTkOmEddAM0-neRjPh6vtyc79xvK4k2t1JrzIU0wq1z68EC62aMVaexVkLujaqHmFBKHYCJXlTd4LEagAOEEscF*IeYq8rgHsdDzjm9v4IGiyF5CdLFyk-t*LCLi26RaB9ksA6Lks1t8hSuGnnq4*VH28PsEpEy4xjw1t62Jf1iBN8*qyXwu-dot-UTrzinJx2Em3XCQxV3s*dX-jiV5Qcxbvuznw92FFxGrtBgqcZVxGOeS9lkKLPseK6MML1W4zN*fgGy2FYp"
+    userSig: "eJxFkFFPgzAUhf8LrzNyCytVEx-qYGQGE8fAZHtpKnTkOmEddAM0-neRjPh6vtyc79xvK4k2t1JrzIU0wq1z68EC62aMVaexVkLujaqHmFBKHYCJXlTd4LEagAOEEscF*IeYq8rgHsdDzjm9v4IGiyF5CdLFyk-t*LCLi26RaB9ksA6Lks1t8hSuGnnq4*VH28PsEpEy4xjw1t62Jf1iBN8*qyXwu-dot-UTrzinJx2Em3XCQxV3s*dX-jiV5Qcxbvuznw92FFxGrtBgqcZVxGOeS9lkKLPseK6MML1W4zN*fgGy2FYp",
   })
 }
\ No newline at end of file

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "autoprefixer": "^7.2.5",
+    "in-toast": "^0.1.2",
     "postcss-modules": "^1.1.0",
     "postcss-px2rem": "^0.3.0"
   }

yarn.lock

@@ -385,6 +385,10 @@ image-size@~0.5.0:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
 
+in-toast@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/in-toast/-/in-toast-0.1.2.tgz#90f024211703511bb94d6294f9c82db0b64613c6"
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"