首页视频组件

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.15.8",
     "mavon-editor": "^2.10.4",
     "mui-player": "^1.6.0",
+    "mui-player-desktop-plugin": "^1.4.2",
     "vue": "^2.6.11",
     "vue-router": "3.5.2"
   },

src/assets/css/Home.css

@@ -0,0 +1,16 @@
+.video{
+    margin: 30px 15px;
+
+}
+
+.content{
+    margin-bottom: 30px;
+
+
+}
+
+.content-font{
+    display: flex;
+
+
+}

src/assets/css/common.css

@@ -1,9 +1,49 @@
 .content{
-    margin: 2vw 6vw;
+    margin: 0 6vw 2vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
 }
 
 .breadcrumb{
     margin: 2vw 0;
     font-size: 1.1rem;
+}
+
+.card{
+    /*display: flex;*/
+
+    background-color: white;
+    width: 51vw;
+    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.15);
+}
+
+.content-button{
+    margin: 2vw 24.5vw 15px;
+    text-align: right;
+}
+.edit-button{
+    display:inline-block;
+    line-height:1;
+    white-space:nowrap;
+    cursor:pointer;
+    background:#FFF;
+    border:1px solid #DCDFE6;
+    color:#606266;
+    -webkit-appearance:none;
+    text-align:center;
+    -webkit-box-sizing:border-box;
+    box-sizing:border-box;
+    outline:0;
+    margin:0;
+    -webkit-transition:.1s;
+    transition:.1s;
+    font-weight:500;
+    -moz-user-select:none;
+    -webkit-user-select:none;
+    -ms-user-select:none;
+    padding:10px 20px;
+    font-size:14px;
+    border-radius:4px
 }

src/components/Video.vue

@@ -5,6 +5,7 @@
 <script>
 import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
+import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'
 
 export default {
   props: {
@@ -15,6 +16,14 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    height:{
+      type: String,
+      default: ''
+    },
+    width:{
+      type: String,
+      default: ''
     }
   },
   name: "Video",
@@ -25,7 +34,13 @@ export default {
     var mp = new MuiPlayer({
       container: '#mui-player',
       title: this.title,
-      src: this.src
+      src: this.src,
+
+      plugins:[
+        new MuiPlayerDesktopPlugin({
+
+        })
+      ]
     })
     // 音量调节时触发
     mp.on('volume-change', function(e) {

src/pages/Home.vue

@@ -1,9 +1,25 @@
 <template>
-  <div class="content">
-    <Video
-    :title="videoTitle"
-    :src="videoSrc"></Video>
+
+  <div>
+    <div class="content-button">
+      <button class="edit-button">编辑</button>
+    </div>
+    <div class="content">
+      <div class="card">
+        <div>
+          <Video
+              :title="videoTitle"
+              :src="videoSrc"
+              class="video">
+          </Video>
+        </div>
+        <div class="content">
+          <p class="content-font">{{content}}</p>
+        </div>
+      </div>
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -19,7 +35,9 @@ export default {
     return{
       data: "",
       videoTitle:"标题",
-      videoSrc:"https://outin-396971199eed11e991a100163e1c7426.oss-cn-shanghai.aliyuncs.com/sv/34277901-180465b8b73/34277901-180465b8b73.mp4"
+      videoSrc:"https://outin-396971199eed11e991a100163e1c7426.oss-cn-shanghai.aliyuncs.com/sv/34277901-180465b8b73/34277901-180465b8b73.mp4",
+      videoWidth: "100%",
+      content:'测试内容测试内容测试内容'
     }
   }
 }

yarn.lock

@@ -5632,6 +5632,11 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mui-player-desktop-plugin@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.npmmirror.com/mui-player-desktop-plugin/-/mui-player-desktop-plugin-1.4.2.tgz#49eae10b50cb35f28c61814caa4e4f35848bfc7e"
+  integrity sha512-USGVZSvYyIRswYIOOMdeTTbWZhnKy+ntTC9of74lesjdFpnMaq7xsUNbweZ/jr66opl0FxXy5KHWdKxl0FNkNA==
+
 mui-player@^1.6.0:
   version "1.6.0"
   resolved "https://registry.npmmirror.com/mui-player/-/mui-player-1.6.0.tgz#8bf130a58faa54fd5b5ad8baf9e95f155c8d684a"