{"id":70,"date":"2026-08-04T18:54:40","date_gmt":"2026-08-04T18:54:40","guid":{"rendered":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/?page_id=70"},"modified":"2026-08-04T19:30:08","modified_gmt":"2026-08-04T19:30:08","slug":"how-it-works","status":"publish","type":"page","link":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/how-it-works\/","title":{"rendered":"How It Works"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"70\" class=\"elementor elementor-70\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b148283 e-flex e-con-boxed e-con e-parent\" data-id=\"b148283\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e25b77b e-con-full e-flex e-con e-child\" data-id=\"e25b77b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47e32ad elementor-widget elementor-widget-html\" data-id=\"47e32ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Digital Signage<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-content\/uploads\/swiper-bundle.css\">\r\n    <style>\r\n        body { margin: 0; padding: 0; background-color: #000; overflow: hidden; }\r\n        \r\n        \/* Fixed dimensions for the kiosk display *\/\r\n        .swiper-container { \r\n            width: 1080px; \r\n            height: 1920px; \r\n            margin: 0 auto;\r\n            position:relative;\r\n        }\r\n\r\n        .swiper-slide { \r\n            display: flex; \r\n            justify-content: center; \r\n            align-items: flex-start; \r\n            background: #000;\r\n        }\r\n\r\n        \/* Object-fit ensures no black bars if videos vary slightly in size *\/\r\n        video, .swiper-slide img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            display: block;\r\n        }\r\n\r\n        .nav-arrow {\r\n    position: absolute;\r\n    width: 46%;\r\n    height: 100%;\r\n    color: #fff;\r\n    font-size: 0px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    z-index: 20;\r\n    user-select: none;\r\n    transition: .2s;\r\n}\r\n\r\n.nav-arrow:hover{\r\n    background:none;\r\n}\r\n\r\n.prev{\r\n    left:20px;\r\n}\r\n\r\n.next{\r\n    right:20px;\r\n}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"swiper-container\">\r\n        <div class=\"nav-arrow prev\">&#10094;<\/div>\r\n        <div class=\"nav-arrow next\">&#10095;<\/div>\r\n        <div class=\"swiper-wrapper\">\r\n            <div class=\"swiper-slide\"><video src=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-content\/uploads\/2026\/08\/1.mp4\" muted playsinline autoplay loop preload=\"auto\"><\/video><\/div>\r\n            <div class=\"swiper-slide\"><video src=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-content\/uploads\/2026\/08\/2.mp4\" muted playsinline loop preload=\"auto\"><\/video><\/div>\r\n            <div class=\"swiper-slide\"><video src=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-content\/uploads\/2026\/08\/3.mp4\" muted playsinline loop preload=\"auto\"><\/video><\/div>\r\n            <div class=\"swiper-slide\"><video src=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-content\/uploads\/2026\/08\/4.mp4\" muted playsinline loop preload=\"auto\"><\/video><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<script src=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-content\/uploads\/swiper-bundle.js\"><\/script>\r\n<script>\r\n    const swiper = new Swiper('.swiper-container', {\r\n    loop: true,\r\n    allowTouchMove: false,\r\n    effect: 'fade',\r\n    fadeEffect: {\r\n        crossFade: true\r\n    },\r\n    speed: 600,\r\n    on: {\r\n        init: function () {\r\n            playCurrentVideo(this);\r\n        },\r\n        slideChangeTransitionEnd: function () {\r\n            playCurrentVideo(this);\r\n        }\r\n    }\r\n});\r\n\r\nfunction playCurrentVideo(instance){\r\n\r\n    \/\/ Pause every video\r\n    document.querySelectorAll('.swiper-slide video').forEach(video=>{\r\n        video.pause();\r\n        video.currentTime = 0;\r\n    });\r\n\r\n    \/\/ Play active video\r\n    const activeVideo =\r\n        instance.slides[instance.activeIndex].querySelector('video');\r\n\r\n    if(activeVideo){\r\n\r\n        activeVideo.currentTime = 0;\r\n\r\n        activeVideo.play().catch(err=>{\r\n            console.log(err);\r\n        });\r\n\r\n        \/\/ Analytics\r\n        if(typeof _paq !== 'undefined'){\r\n            const fileName = activeVideo.src.split('\/').pop();\r\n            _paq.push(['trackEvent','Video','Play',fileName]);\r\n        }\r\n    }\r\n}\r\n\r\n\/\/ Navigation buttons\r\ndocument.querySelector('.next').addEventListener('click',()=>{\r\n    swiper.slideNext();\r\n});\r\n\r\ndocument.querySelector('.prev').addEventListener('click',()=>{\r\n    swiper.slidePrev();\r\n});\r\n\r\n\/\/ Touch support\r\ndocument.querySelector('.next').addEventListener('touchstart',e=>{\r\n    e.preventDefault();\r\n    swiper.slideNext();\r\n});\r\n\r\ndocument.querySelector('.prev').addEventListener('touchstart',e=>{\r\n    e.preventDefault();\r\n    swiper.slidePrev();\r\n});\r\n\r\n\/\/ Refresh once a day\r\nsetTimeout(()=>{\r\n    location.reload();\r\n},86400000);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-131345e elementor-absolute elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"131345e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"icon.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"https:\/\/bm3demo.com\/2026-cmee-shutterb\/\">\n\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-arrow-circle-left\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm28.9-143.6L209.4 288H392c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24H209.4l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0L107.7 239c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3z\"><\/path><\/svg>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Digital Signage &#10094; &#10095;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-70","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/pages\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":76,"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/pages\/70\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/pages\/70\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/bm3demo.com\/2026-cmee-shutterb\/wp-json\/wp\/v2\/media?parent=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}