groupeasie - Smooth Video Switch<\/title>\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n html, body {\r\n height: 100%;\r\n background: #000;\r\n overflow: hidden;\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n background: #000;\r\n }\r\n\r\n \/* \u0110\u00e8 hai video l\u00ean nhau *\/\r\n .hero video {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0;\r\n transition: opacity 0.5s ease-in-out; \/* T\u1ea1o hi\u1ec7u \u1ee9ng chuy\u1ec3n m\u01b0\u1ee3t *\/\r\n }\r\n\r\n \/* Video n\u00e0o c\u00f3 class active s\u1ebd hi\u1ec7n l\u00ean *\/\r\n .hero video.active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"hero\">\r\n <video id=\"video1\" class=\"active\" autoplay muted playsinline><\/video>\r\n <video id=\"video2\" muted playsinline><\/video>\r\n <\/div>\r\n\r\n <script>\r\n const playlist = [\r\n '\/wp-content\/uploads\/2026\/03\/main-video.mp4',\r\n '\/wp-content\/uploads\/2026\/03\/Cinematic-wide.mp4',\r\n '\/wp-content\/uploads\/2026\/03\/Deck.mp4',\r\n ];\r\n\r\n let currentIndex = 0;\r\n const v1 = document.getElementById('video1');\r\n const v2 = document.getElementById('video2');\r\n \r\n let currentVideo = v1;\r\n let nextVideo = v2;\r\n\r\n \/\/ Kh\u1edfi t\u1ea1o video \u0111\u1ea7u ti\u00ean\r\n currentVideo.src = playlist[currentIndex];\r\n\r\n function switchVideo() {\r\n \/\/ 1. X\u00e1c \u0111\u1ecbnh index ti\u1ebfp theo\r\n currentIndex = (currentIndex + 1) % playlist.length;\r\n \r\n \/\/ 2. Chu\u1ea9n b\u1ecb video ti\u1ebfp theo (ch\u1ea1y ng\u1ea7m)\r\n nextVideo.src = playlist[currentIndex];\r\n nextVideo.load();\r\n\r\n \/\/ 3. \u0110\u1ee3i video hi\u1ec7n t\u1ea1i g\u1ea7n h\u1ebft ho\u1eb7c h\u1ebft th\u00ec \u0111\u1ed5i\r\n currentVideo.onended = () => {\r\n nextVideo.play().then(() => {\r\n \/\/ \u0110\u1ed5i class \u0111\u1ec3 hi\u1ec3n th\u1ecb video ti\u1ebfp theo\r\n nextVideo.classList.add('active');\r\n currentVideo.classList.remove('active');\r\n\r\n \/\/ \u0110\u1ed5i vai tr\u00f2 cho l\u1ea7n t\u1edbi\r\n let temp = currentVideo;\r\n currentVideo = nextVideo;\r\n nextVideo = temp;\r\n\r\n \/\/ \u0110\u1ec7 quy cho video ti\u1ebfp theo\r\n switchVideo();\r\n }).catch(err => {\r\n console.log(\"Auto-play blocked or error:\", err);\r\n switchVideo(); \/\/ Th\u1eed b\u1ecf qua n\u1ebfu l\u1ed7i\r\n });\r\n };\r\n }\r\n\r\n switchVideo();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>groupeasie – Smooth Video Switch<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/groupeasie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":110,"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":187,"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/187"}],"wp:attachment":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n groupeasie - Smooth Video Switch<\/title>\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n html, body {\r\n height: 100%;\r\n background: #000;\r\n overflow: hidden;\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n background: #000;\r\n }\r\n\r\n \/* \u0110\u00e8 hai video l\u00ean nhau *\/\r\n .hero video {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0;\r\n transition: opacity 0.5s ease-in-out; \/* T\u1ea1o hi\u1ec7u \u1ee9ng chuy\u1ec3n m\u01b0\u1ee3t *\/\r\n }\r\n\r\n \/* Video n\u00e0o c\u00f3 class active s\u1ebd hi\u1ec7n l\u00ean *\/\r\n .hero video.active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"hero\">\r\n <video id=\"video1\" class=\"active\" autoplay muted playsinline><\/video>\r\n <video id=\"video2\" muted playsinline><\/video>\r\n <\/div>\r\n\r\n <script>\r\n const playlist = [\r\n '\/wp-content\/uploads\/2026\/03\/main-video.mp4',\r\n '\/wp-content\/uploads\/2026\/03\/Cinematic-wide.mp4',\r\n '\/wp-content\/uploads\/2026\/03\/Deck.mp4',\r\n ];\r\n\r\n let currentIndex = 0;\r\n const v1 = document.getElementById('video1');\r\n const v2 = document.getElementById('video2');\r\n \r\n let currentVideo = v1;\r\n let nextVideo = v2;\r\n\r\n \/\/ Kh\u1edfi t\u1ea1o video \u0111\u1ea7u ti\u00ean\r\n currentVideo.src = playlist[currentIndex];\r\n\r\n function switchVideo() {\r\n \/\/ 1. X\u00e1c \u0111\u1ecbnh index ti\u1ebfp theo\r\n currentIndex = (currentIndex + 1) % playlist.length;\r\n \r\n \/\/ 2. Chu\u1ea9n b\u1ecb video ti\u1ebfp theo (ch\u1ea1y ng\u1ea7m)\r\n nextVideo.src = playlist[currentIndex];\r\n nextVideo.load();\r\n\r\n \/\/ 3. \u0110\u1ee3i video hi\u1ec7n t\u1ea1i g\u1ea7n h\u1ebft ho\u1eb7c h\u1ebft th\u00ec \u0111\u1ed5i\r\n currentVideo.onended = () => {\r\n nextVideo.play().then(() => {\r\n \/\/ \u0110\u1ed5i class \u0111\u1ec3 hi\u1ec3n th\u1ecb video ti\u1ebfp theo\r\n nextVideo.classList.add('active');\r\n currentVideo.classList.remove('active');\r\n\r\n \/\/ \u0110\u1ed5i vai tr\u00f2 cho l\u1ea7n t\u1edbi\r\n let temp = currentVideo;\r\n currentVideo = nextVideo;\r\n nextVideo = temp;\r\n\r\n \/\/ \u0110\u1ec7 quy cho video ti\u1ebfp theo\r\n switchVideo();\r\n }).catch(err => {\r\n console.log(\"Auto-play blocked or error:\", err);\r\n switchVideo(); \/\/ Th\u1eed b\u1ecf qua n\u1ebfu l\u1ed7i\r\n });\r\n };\r\n }\r\n\r\n switchVideo();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>groupeasie – Smooth Video Switch<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/groupeasie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":110,"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":187,"href":"https:\/\/groupeasie.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/187"}],"wp:attachment":[{"href":"https:\/\/groupeasie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}