小记者视频播放

src/views/reporter/components/ReportDetail.vue

@@ -1,17 +1,28 @@
 <template>
-  <div class="detail-report">
+  <div class="detail-report" v-if="infoDetail">
     <i class="el-icon-close" @click="closeDialog"></i>
-    <div class="detail-left">
+    <div class="detail-left" v-if="infoDetail.res_urls_type&&infoDetail.res_urls_type.length>0">
         <el-carousel :interval="5000" arrow="always">
-            <el-carousel-item v-for="item in infoDetail.res_urls" :key="item">
-                <el-image class="image"
-                    :src="item"
-                    :fit="'contain'"
-                    :style="'width:802px;height:870px;'">
-                    <div slot="placeholder" class="image-slot" :style="'line-height:130px'">
-                        加载中<span class="dot">...</span>
-                    </div>
-                </el-image>
+            <el-carousel-item v-for="item in infoDetail.res_urls_type" :key="item.url">
+                <template v-if="item.type==='img'">
+                    <el-image class="image"
+                        :src="item.url"
+                        :fit="'contain'"
+                        :style="'width:802px;height:870px;'">
+                        <div slot="placeholder" class="image-slot" :style="'line-height:130px'">
+                            加载中<span class="dot">...</span>
+                        </div>
+                    </el-image>
+                </template>
+                <template v-else>
+                    <video controls width="802" height="870">
+                        <source :src="item.url"
+                                type="video/webm">
+                        <source :src="item.url"
+                                type="video/mp4">
+                        Sorry, your browser doesn't support embedded videos.
+                    </video>
+                </template>
             </el-carousel-item>
         </el-carousel>
     </div>
@@ -63,7 +74,20 @@ export default {
   },
   methods: {
     handleData(){
-        console.log(this.infoDetail)
+        this.infoDetail.res_urls_type = []
+        this.infoDetail.res_urls.forEach(item => {
+            let index = item.lastIndexOf('.');
+            let type = item.substring(index + 1).toLowerCase()
+            let obj = {
+                type: 'img',
+                url: item
+            }
+            if(type==='avi'||type==='wmv'||type==='mpeg'||type==='mov'||type==='mp4'){
+                obj.type = 'mp4'
+            }
+            this.infoDetail.res_urls_type.push(obj)
+        });
+        this.$forceUpdate()
     },
     closeDialog(){
         this.$emit('closeDetail')