feat: select tag

components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue

@@ -23,10 +23,6 @@ const parseData = computed(() => {
 });
 
 const playVideo = ref<boolean>(false)
-
-onMounted(() => {
-  getResource(JSON.parse(props.dataResult).detail)
-})
 </script>
 
 <template>
@@ -41,6 +37,7 @@ onMounted(() => {
             v-if="!playVideo"
             class="article_video_thumb h-full" 
             :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+            @click="playVideo = true"
           >
               <div></div>
               <div class="article_video_content">
@@ -53,7 +50,8 @@ onMounted(() => {
                   </p>
               </div>
           </div>
-          <video src=""></video>
+          <div v-else v-html="getResource('HIGHLIGHT_VIDEO', JSON.parse(props.dataResult).detail)">
+          </div>
       </template>
     </div>
 

utils/resourceHandler.ts

@@ -1,27 +1,19 @@
 import * as cherrio from 'cheerio'
 
-const getResource = (data: any) => {
-    // const result = {
-    //     videoHightlight: null,
-    //     imageHightlight: null,
-    //     resources: [],
-    // };
-    // const $ = cherrio.load(`<div class="get-resource">${data}</div>`)
-    // const html : any = $('.get-resource').html();
-    // html.find('video, figure img, img').each((index : any, element: any) => {
-    //     // if (index === 0) result.videoHightlight = 
-    // });
-
-    // console.log(html)
-
-    // <div>
-    //     <video controls="controls" width="100%" height="auto" data-id="578" data-resource="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" data-title="28thi-tot-nghiep-ptth-2024">
-    //         <source src="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" type="video/mp4">
-    //     </video>
-    // </div>
+const getResource = (key: any, data: any) => {
+    const $ = cherrio.load(`<div class="">${data}</div>`)
+    let result = null;
+    switch (key) {
+        case 'HIGHLIGHT_VIDEO':
+            result = $('video').first().parent().html();
+            break;
+        default:
+            result = $.html();
+    }
+    console.log(result)
+    return result;
 }
 
-
 export {
     getResource
-}
+}