视频预览

src/views/XMHJC/column/newPageEditor.vue

@@ -1,6 +1,7 @@
 <template>
-  <div>
-    <img :src="bannerImg" alt="">
+  <div class="newPageEditor">
+  <div style="width: 100%;">
+    <img style="width: 100%;" :src="bannerImg" alt="">
   </div>
     <div class="indexMain">
       <el-breadcrumb separator="/" style="margin-bottom: 8px;">
@@ -15,17 +16,38 @@
                 <div class="fwbtitle2">
                     {{ formData.columnIdName }}
                     {{ formData.time }}
+                    <div v-if="formData.bodyType=='2'">{{formData.readNum}}次播放</div>
                 </div>
             </div>
             
-            <div  v-html="formData.content" class="right">
+            <div v-if="formData.bodyType=='1'" v-html="formData.content" class="right">
             
             </div>
+            <!-- 展示视频 -->
+            <div style="display: flex;" v-if="formData.bodyType=='2'">
+                <div>
+                    <div class="videoBox">
+                        <video id="myVideo" v-if="videoUrl!=''" style="height:100%;width: 100%;" controls>
+                            <source :src="videoUrl"
+                            type="video/mp4">
+                            <source :src="videoUrl"  type="video/ogg">
+                            您的浏览器不支持 HTML5 video 标签。
+                        </video>
+                    </div>
+                    <div style="width: 100%">
+                        <img style="width: 100%" :src="ButtonImg" alt="">
+                    </div>
+                </div>
+                <div style="width: 30%">
+                    <img style="width: 100%" :src="rightImg" alt="">
+                </div>
+            </div>
         </div>
 
     </div>
-  <div>
-    <img :src="bootImg" alt="">
+  <div style="width: 100%;">
+    <img style="width: 100%;" :src="bootImg" alt="">
+  </div>
   </div>
 </template>
 
@@ -43,6 +65,8 @@ const route=useRoute()
 
 const bannerImg = ref('/img/viewsHead.png')
 const bootImg = ref('/img/viewsBoot.png')
+const rightImg = ref('/img/viewRight.png')
+const ButtonImg = ref('/img/viewButton.png')
 const breadcrumbImg = ref('/img/viewBreadcrumb.png')
 
 const formData = ref({
@@ -50,6 +74,8 @@ const formData = ref({
     columnIdName:'',
     time:'',
     title:'',
+    bodyType:'1',
+    readNum:'18',
 })
 watch(
   () => route.query,
@@ -59,17 +85,24 @@ watch(
 
   }
 )
-
+const videoUrl = ref('')
 
 onMounted(async() => {
     
     formData.value = JSON.parse(localStorage.getItem('formData')) 
+
+    videoUrl.value = formData.value.videoList[0].fileUrl
 });
 
 
 </script>
 
 <style scoped>
+.newPageEditor{
+  /* overflow: hidden;
+  width: 100vw; */
+
+}
 .indexMain{
     width: 80vw;
     margin: 0 auto;
@@ -98,4 +131,10 @@ onMounted(async() => {
     height: 40px;
     line-height: 40px;
 }
+.videoBox{
+    /* width: 70%; */
+    height: 450px;
+    background-color: #000;
+    text-align: center
+}
 </style>