fix: 修复同层播放显示问题

goblin-laboratory · Jul 19, 2019 · fffbb47 · fffbb47
1 parent a63aa8e
commit fffbb47
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/example/src/App.css b/example/src/App.css
@@ -58,22 +58,30 @@
 }
 
 .x5videofullscreen .header {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
   z-index: 1;
 }
 
-.x5videofullscreen .form {
-  position: absolute;
+.x5videofullscreen .blankImg {
+  padding-top: 50px;
 }
 
-.fullscreen .header {
-  display: none;
+.x5videofullscreen .main video {
+  object-position: center 50px;
 }
 
-/* TODO: 同层播放时 player position 设置为 relative form 不会显示  */
-.x5videofullscreen .main {
+.fullscreen .header,
+.fullscreen .aside,
+.fullscreen .footer {
+  display: none;
+}
+.fullscreen .main {
   position: static;
-  /* z-index: -1; */
+}
+.fullscreen .main video {
+  object-position: center center;
 }
 
 .src {
@@ -205,6 +213,8 @@
     margin: 0;
     background: #333;
     color: #fff;
+    height: 40px;
+    line-height: 40px;
   }
 }
 
@@ -258,12 +268,12 @@
   padding: 4px;
 }
 
-.testActionTitle{
+.testActionTitle {
   text-align: center;
   width: 4em;
 }
 
-.testAction{
+.testAction {
   text-align: center;
   color: #1890ff;
   cursor: pointer;

diff --git a/example/src/App.js b/example/src/App.js
@@ -150,13 +150,13 @@ const App = React.memo(({ form }) => {
   }
 
   const bodyClassNames = ['container'];
-  const vidoeStyle = {};
+  // const vidoeStyle = {};
   if (fullscreen.x5videofullscreen) {
     bodyClassNames.push('x5videofullscreen');
-    vidoeStyle.objectPosition = 'center 50px';
+    // vidoeStyle.objectPosition = 'center 0';
     if (fullscreen.fullscreen) {
       bodyClassNames.push('fullscreen');
-      vidoeStyle.objectPosition = 'center center';
+      // vidoeStyle.objectPosition = 'center center';
     }
   }
 
@@ -212,7 +212,7 @@ const App = React.memo(({ form }) => {
             poster="https://raw.githubusercontent.com/goblin-laboratory/react-player/master/logo128x128.png"
             x5playsinline={x5playsinline}
             onFullscreenChange={onFullscreenChange}
-            videoProps={{ ...videoProps, style: vidoeStyle }}
+            videoProps={videoProps}
           />
         )}
         {'flash' === info.kernel && (
@@ -236,9 +236,11 @@ const App = React.memo(({ form }) => {
                   <Divider>接口测试</Divider>
                   <table className="testTable">
                     <thead>
-                      <th>接口</th>
-                      <th className="testActionTitle">运行</th>
-                      <th>结果</th>
+                      <tr>
+                        <th>接口</th>
+                        <th className="testActionTitle">运行</th>
+                        <th>结果</th>
+                      </tr>
                     </thead>
                     <tbody>
                       <tr>