screenshot

src/views/screenshot.vue

 <template>
     <div class="screenshot">
         <div class="content">
-            <video id="screenshot-video"></video>
+            <video id="screenshot-video" width="400" height="300" :src="srcUrl" controls></video>
         </div>
         <div class="operate-area">
-            <input id="screenshot-input" type="file" style="display:none;" />
+            <input id="screenshot-input" type="file" style="display:none;" @change="changeFile" />
+            <label id="select-btn">选择文件</label>
         </div>
     </div>
 </template>
@@ -18,7 +19,47 @@ export default {
         }
     },
     created() {},
-    mounted() {}
+    mounted() {
+        let input = document.getElementById('screenshot-input')
+        let fileBtn = document.getElementById('select-btn')
+        fileBtn.addEventListener('click', function() {
+            input.click()
+        })
+        let video = document.getElementById('screenshot-video')
+        video.onerror = function(e) {
+            console.log('onerror', e)
+        }
+        video.addEventListener('loadedmetadata', function(e) {
+            console.log('loadedmetadata', e)
+            //webkitVideoDecodedByteCount
+            if (e.target.webkitVideoDecodedByteCount < 1) {
+                console.error('格式不支持')
+            }
+        })
+
+        //loadedmetadata
+    },
+    methods: {
+        selectClick() {},
+        changeFile(e) {
+            //console.log('changeFile', e)
+            if (e.target.files[0]) {
+                this.srcUrl = URL.createObjectURL(e.target.files[0])
+                // let _this = this
+                // let reader = new FileReader()
+                // reader.addEventListener(
+                //     'load',
+                //     () => {
+                //         console.log('_this.srcUrl', this)
+                //         _this.srcUrl = reader.result
+                //     },
+                //     false
+                // )
+                // reader.readAsDataURL(e.target.files[0])
+            }
+            //e.target
+        }
+    }
 }
 </script>
 
@@ -30,8 +71,15 @@ export default {
     display: flex;
     flex-direction: column;
     .content {
+        height: 90%;
         margin: 20px 30px;
         background-color: lightcyan;
     }
+    .operate-area {
+        #select-btn {
+            width: 200px;
+            height: 100px;
+        }
+    }
 }
 </style>