askbot-dragon 0.7.20 → 0.7.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "0.7.20",
+  "version": "0.7.24",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/js/AliyunlssUtil.js

@@ -82,7 +82,7 @@ function ossFileUrl(ossConfig, path, cname) {
 function uploadImageByBase64(ossConfig,blob) {
     let ossClient = new OSS(ossConfig);
 
-    // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
+    // object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形 式，实现将文件上传至当前Bucket或Bucket下的指定目录。
     let objectKey = pathGenerate(new Date().getTime());
     let result = ossClient.put(objectKey, blob);
     console.debug(result);

package/src/components/askVideo.vue

@@ -15,10 +15,13 @@
                 :raw-controls="true"
                 x5-video-player-type="h5-page"
                 style="object-fit: contain;width: calc(100vw - 139px);height: 160px;background-color: black;border-radius: 25px;max-width: 230px;padding-left: 10px"
+                preload
+                :poster="videoSrc+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'"
                 class="video-player vjs-custom-skin"
                 :id="msg.keyId+'key'">
           <source :src="videoSrc"/>
         </video>
+      <div id="output"></div>
     </div>
 </template>
 <script>
@@ -30,14 +33,7 @@
         data() {
             return {
               videoSrc:'',
-              ossConfig:{
-                region: "oss-cn-zhangjiakou",
-                //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
-                accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
-                accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
-                // stsToken: '<Your securityToken(STS)>',
-                bucket: "guoranopen-zjk",
-              }
+              poster:''
             }
         },
         watch: {
@@ -56,19 +52,20 @@
       mounted() {
           this.$nextTick(()=>{
             this.videoSrc = this.url ? this.url : this.localUrl
-            this.getImage()
-
+            this.poster = this.videoSrc+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'
+            console.debug('poster',this.poster)
           })
 
       },
       methods:{
         getImage(){
           let that = this
-          var video;
+          var video,output;
           var scale = 0.8;
 
           var initialize = function() {
             let id = that.msg.keyId+'key'
+            output = document.getElementById("output");
             video = document.getElementById(id);
             video.addEventListener('loadeddata',captureImage);
           };
@@ -79,15 +76,23 @@
             canvas.height = video.videoHeight * scale;
             canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
             /*var img = document.createElement("img");
-            img.crossOrigin = 'anonymous'*/
-            /*img.src = canvas.toDataURL("image/png");*/
+            img.crossOrigin = 'anonymous'
+            img.src = canvas.toDataURL("image/png");*/
+            let reg = /\.(png|jpg|gif)$/
+            console.debug('img.src',output)
             let base64 = canvas.toDataURL("image/png")
             let blob = that.dataURLtoFile(base64,'name')
             let promise = uploadImageByBase64(ossConfig,blob);
             promise.then((res)=>{
               console.debug("upload base64 reslut",res);
+              if (res&&res.url){
+                that.poster = res.url
+                if (!reg.test(that.poster)){
+                  that.poster +='.png'
+                }
+              }
+              console.debug('poster',that.poster)
             });
-            /*output.appendChild(img);*/
           };
 
           initialize();