problem playing a video #16

jhonrymat · 2021-03-22T05:11:04Z

Hello, I am new to programming and augmented reality, I am studying your code a bit, but I find the problem that the video starts when loading the page and not when recognizing the augmented reality image, some example or advice where I modify this thank you very much.
`

<script>
  const showInfo = () => {
    let y = 0;
    const profileButton = document.querySelector("#profile-button");
    const webButton = document.querySelector("#web-button");
    const emailButton = document.querySelector("#email-button");
    const locationButton = document.querySelector("#location-button");
    const text = document.querySelector("#text");

    profileButton.setAttribute("visible", true);
    setTimeout(() => {
      webButton.setAttribute("visible", true);
    }, 300);
    setTimeout(() => {
      emailButton.setAttribute("visible", true);
    }, 600);
    setTimeout(() => {
      locationButton.setAttribute("visible", true);
    }, 900);

    let currentTab = "";
    webButton.addEventListener("click", function(evt) {
      text.setAttribute("value", "https://softmind.tech");
      currentTab = "web";
    });
    emailButton.addEventListener("click", function(evt) {
      text.setAttribute("value", "hello@softmind.tech");
      currentTab = "email";
    });
    profileButton.addEventListener("click", function(evt) {
      text.setAttribute("value", "AR, VR solutions and consultation");
      currentTab = "profile";
    });
    locationButton.addEventListener("click", function(evt) {
      console.log("loc");
      text.setAttribute("value", "Vancouver, Canada | Hong Kong");
      currentTab = "location";
    });

    text.addEventListener("click", function(evt) {
      if (currentTab === "web") {
        window.location.href = "https://softmind.tech";
      }
    });
  };

  const showPortfolio = done => {
    const portfolio = document.querySelector("#portfolio-panel");
    const portfolioLeftButton = document.querySelector(
      "#portfolio-left-button"
    );
    const portfolioRightButton = document.querySelector(
      "#portfolio-right-button"
    );
    const paintandquestPreviewButton = document.querySelector(
      "#paintandquest-preview-button"
    );

    let y = 0;
    let currentItem = 0;

    portfolio.setAttribute("visible", true);

    const showPortfolioItem = item => {
      for (let i = 0; i <= 2; i++) {
        document
          .querySelector("#portfolio-item" + i)
          .setAttribute("visible", i === item);
      }
    };
    const id = setInterval(() => {
      y += 0.008;
      if (y >= 0.6) {
        clearInterval(id);
        portfolioLeftButton.setAttribute("visible", true);
        portfolioRightButton.setAttribute("visible", true);
        portfolioLeftButton.addEventListener("click", () => {
          currentItem = (currentItem + 1) % 3;
          showPortfolioItem(currentItem);
        });
        portfolioRightButton.addEventListener("click", () => {
          currentItem = (currentItem - 1 + 3) % 3;
          showPortfolioItem(currentItem);
        });

        paintandquestPreviewButton.addEventListener("click", () => {
          paintandquestPreviewButton.setAttribute("visible", false);
          const testVideo = document.createElement("video");
          const canplayWebm = testVideo.canPlayType(
            'video/webm; codecs="vp8, vorbis"'
          );
          if (canplayWebm == "") {
            document
              .querySelector("#paintandquest-video-link")
              .setAttribute("src", "#paintandquest-video-mp4");
            document.querySelector("#paintandquest-video-mp4").play();
          } else {
            document
              .querySelector("#paintandquest-video-link")
              .setAttribute("src", "#paintandquest-video-webm");
            document.querySelector("#paintandquest-video-webm").play();
          }
        });

        setTimeout(() => {
          done();
        }, 500);
      }
      portfolio.setAttribute("position", "0 " + y + " -0.01");
    }, 10);
  };

  const showAvatar = onDone => {
    const avatar = document.querySelector("#avatar");
    let z = -0.3;
    const id = setInterval(() => {
      z += 0.008;
      if (z >= 0.3) {
        clearInterval(id);
        onDone();
      }
      avatar.setAttribute("position", "0 -0.25 " + z);
    }, 10);
  };

  AFRAME.registerComponent("mytarget", {
    init: function() {
      this.el.addEventListener("targetFound", event => {
        console.log("target found");
        showAvatar(() => {
          setTimeout(() => {
            showPortfolio(() => {
              setTimeout(() => {
                showInfo();
              }, 300);
            });
          }, 300);
        });
      });
      this.el.addEventListener("targetLost", event => {
        console.log("target found");
      });
      //this.el.emit('targetFound');
    }
  });
</script>

<style>
  body {
    margin: 0;
  }
  .example-container {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  #example-scanning-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
  }
  @media (min-aspect-ratio: 1/1) {
    #example-scanning-overlay .inner {
      width: 50vh;
      height: 50vh;
    }
  }
  @media (max-aspect-ratio: 1/1) {
    #example-scanning-overlay .inner {
      width: 80vw;
      height: 80vw;
    }
  }

  #example-scanning-overlay .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background: linear-gradient(to right, white 10px, transparent 10px) 0 0,
      linear-gradient(to right, white 10px, transparent 10px) 0 100%,
        linear-gradient(to left, white 10px, transparent 10px) 100% 0,
          linear-gradient(to left, white 10px, transparent 10px) 100% 100%,
            linear-gradient(to bottom, white 10px, transparent 10px) 0 0,
              linear-gradient(to bottom, white 10px, transparent 10px) 100%
                  0,
                linear-gradient(to top, white 10px, transparent 10px) 0 100%,
                  linear-gradient(to top, white 10px, transparent 10px) 100%
                    100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
  }

  #example-scanning-overlay.hidden {
    display: none;
  }

  #example-scanning-overlay img {
    opacity: 0.6;
    width: 90%;
    align-self: center;
  }

  #example-scanning-overlay .inner .scanline {
    position: absolute;
    width: 100%;
    height: 10px;
    background: white;
    animation: move 2s linear infinite;
  }
  @keyframes move {
    0%,
    100% {
      top: 0%;
    }
    50% {
      top: calc(100% - 10px);
    }
  }
</style>

  <a-scene
    mindar="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/examples/assets/card-example/card.mind; showStats: false; uiScanning: #example-scanning-overlay;"
    embedded
    color-space="sRGB"
    renderer="colorManagement: true, physicallyCorrectLights"
    vr-mode-ui="enabled: false"
    device-orientation-permission-ui="enabled: false"
  >
    <a-assets>
      <img id="card" src="./assets/card-example/card.png" />
      <img id="icon-web" src="./assets/card-example/icons/web.png" />
      <img
        id="icon-location"
        src="./assets/card-example/icons/location.png"
      />
      <img
        id="icon-profile"
        src="./assets/card-example/icons/profile.png"
      />
      <img id="icon-phone" src="./assets/card-example/icons/phone.png" />
      <img id="icon-email" src="./assets/card-example/icons/email.png" />
      <img
        id="icon-play"
        src="https://cdn.glitch.com/b38eb9a2-8d3c-4e64-998d-6d0738b4c845%2Fplay.png?v=1616294545285"
      />
      <img id="icon-left" src="./assets/card-example/icons/left.png" />
      <img id="icon-right" src="./assets/card-example/icons/right.png" />
      <img
        id="paintandquest-preview"
        src="./assets/card-example/portfolio/paintandquest-preview.png"
      />
      <video
        id="paintandquest-video-mp4"
        autoplay="false"
        loop="true"
        src="https://cdn.glitch.com/d854003b-b32d-455a-98db-95fe418cab4c%2Fpaintandquest.mp4?v=1616389137177"
      ></video>
      <video
        id="paintandquest-video-webm"
        autoplay="false"
        loop="true"
        src="https://cdn.glitch.com/d854003b-b32d-455a-98db-95fe418cab4c%2Fpaintandquest.webm?v=1616389074156"
      ></video>
      <img
        id="coffeemachine-preview"
        src="./assets/card-example/portfolio/coffeemachine-preview.png"
      />
      <img
        id="peak-preview"
        src="./assets/card-example/portfolio/peak-preview.png"
      />

      <a-asset-item
        id="avatarModel"
        src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@0.3.1/examples/assets/card-example/softmind/scene.gltf"
      ></a-asset-item>
    </a-assets>

    <a-camera
      position="0 0 0"
      look-controls="enabled: false"
      cursor="fuse: false; rayOrigin: mouse;"
      raycaster="far: 10000; objects: .clickable"
    >
    </a-camera>

    <a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
      <a-plane
        src="#card"
        position="0 0 0"
        height="0.552"
        width="1"
        rotation="0 0 0"
      ></a-plane>

      <a-entity visible="false" id="portfolio-panel" position="0 0 -0.01">
        <a-text
          value="Portfolio"
          color="black"
          align="center"
          width="2"
          position="0 0.4 0"
        ></a-text>
        <a-entity id="portfolio-item0">
          <a-video
            id="paintandquest-video-link"
            webkit-playsinline
            playsinline
            width="1"
            height="0.552"
            position="0 0 0"
          ></a-video>
          <a-image
            id="paintandquest-preview-button"
            class="clickable"
            src="#paintandquest-preview"
            alpha-test="0.5"
            position="0 0 0"
            height="0.552"
            width="1"
          >
          </a-image>
        </a-entity>
        <a-entity id="portfolio-item1" visible="false">
          <a-image
            class="clickable"
            src="#coffeemachine-preview"
            alpha-test="0.5"
            position="0 0 0"
            height="0.552"
            width="1"
          >
          </a-image>
        </a-entity>
        <a-entity id="portfolio-item2" visible="false">
          <a-image
            class="clickable"
            src="#peak-preview"
            alpha-test="0.5"
            position="0 0 0"
            height="0.552"
            width="1"
          >
          </a-image>
        </a-entity>

        <a-image
          visible="false"
          id="portfolio-left-button"
          class="clickable"
          src="#icon-left"
          position="-0.7 0 0"
          height="0.15"
          width="0.15"
        ></a-image>
        <a-image
          visible="false"
          id="portfolio-right-button"
          class="clickable"
          src="#icon-right"
          position="0.7 0 0"
          height="0.15"
          width="0.15"
        ></a-image>
      </a-entity>

      <a-image
        visible="false"
        id="profile-button"
        class="clickable"
        src="#icon-profile"
        position="-0.42 -0.5 0"
        height="0.15"
        width="0.15"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></a-image>

      <a-image
        visible="false"
        id="web-button"
        class="clickable"
        src="#icon-web"
        alpha-test="0.5"
        position="-0.14 -0.5 0"
        height="0.15"
        width="0.15"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></a-image>

      <a-image
        visible="false"
        id="email-button"
        class="clickable"
        src="#icon-email"
        position="0.14 -0.5 0"
        height="0.15"
        width="0.15"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></a-image>

      <a-image
        visible="false"
        id="location-button"
        class="clickable"
        src="#icon-location"
        position="0.42 -0.5 0"
        height="0.15"
        width="0.15"
        animation="property: scale; to: 1.2 1.2 1.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
      ></a-image>

      <a-gltf-model
        id="avatar"
        rotation="0 0 0"
        position="0 -0.25 0"
        scale="0.004 0.004 0.004"
        src="#avatarModel"
      ></a-gltf-model>

      <a-text
        id="text"
        class="clickable"
        value=""
        color="black"
        align="center"
        width="2"
        position="0 -1 0"
        geometry="primitive:plane; height: 0.1; width: 2;"
        material="opacity: 0.5"
      ></a-text>
    </a-entity>
  </a-scene>
</div>

`

The text was updated successfully, but these errors were encountered:

hiukim · 2021-03-22T06:01:56Z

@jhonrymat I'm not sure I understand what you mean. Can you provide screencaps?

jhonrymat · 2021-03-22T13:17:03Z

just take the example of advanced.html and change the link of the video, for a video that has embedded audio, but when the page is opened the audio is played instantly without having clicked on the video

hiukim · 2021-03-22T20:11:54Z

@jhonrymat

Can you perhaps create a minimal and runnable example? That would help a lot.

Better off, are you able to confirm the problem is caused by MindAR. One good way to do that is remove MindAR and create a regular AFRAME scene with video, and make the "click and play" works.

After that, put in the MindAR library, and see what's the difference. Then we will know what's causing the problem.

jhonrymat · 2021-03-23T03:08:27Z

here an example in glitch.com
https://mighty-arrow-pyrite.glitch.me/
https://cdn.glitch.com/b38eb9a2-8d3c-4e64-998d-6d0738b4c845%2Fcard.png?v=1616288422890
and here the code
https://glitch.com/edit/#!/mighty-arrow-pyrite?path=index.html%3A1%3A0

hiukim · 2021-03-28T04:48:49Z

I run your example, and I couldn't see any video. So there is also no audio as well.

jhonrymat · 2021-04-01T20:18:14Z

Hello again, could you please explain how to play a video I still can't find how, and then proceed to close the thread, thank you very much

hiukim · 2021-04-01T20:35:15Z

Now, I'm a bit confused about the problem you are having. Are you

no able to play video, or
can play video, but the video started playing incorrectly

if 1)
The interactive example you mentioned already provided an example of how to start a video.

if 2)
Can you provide a minimal and runnable example that I can replicate your issue.

jhonrymat · 2021-04-01T20:45:39Z

You just want to put a video on top of an image but I don't know how to break down your example, just to use the video, I appreciate your help. I tried this way and I did not succeed.

https://glitch.com/edit/#!/mighty-arrow-pyrite?path=index.html%3A1%3A0

hiukim · 2021-04-06T02:07:45Z

@jhonrymat Your video doesn't play because the click event wasn't fired/captured. If you need to capture click event on aframe element, you need to setup the raycaster in camera, e.g.

 <a-camera cursor="fuse: false; rayOrigin: mouse;" raycaster="near: 10; far: 10000; objects: .clickable"></a-camera>
        <a-cursor></a-cursor>
      </a-camera>

<a-video class="clickable" src="#surfer" height="4.5" width="8" position="0 3 -9"
        ><a-image
          id="videocontrols"
          src="#play"
          position="0 -3 0"
          scale="0.5 0.5 1"
          play-pause
        ></a-image>
      </a-video>

jhonrymat · 2021-04-10T19:25:00Z

Excellent, thank you very much, it was what I needed, you are the best. I close thread.

jhonrymat closed this as completed Apr 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

problem playing a video #16

problem playing a video #16

jhonrymat commented Mar 22, 2021

hiukim commented Mar 22, 2021

jhonrymat commented Mar 22, 2021

hiukim commented Mar 22, 2021

jhonrymat commented Mar 23, 2021 •

edited

Loading

hiukim commented Mar 28, 2021

jhonrymat commented Apr 1, 2021

hiukim commented Apr 1, 2021

jhonrymat commented Apr 1, 2021 •

edited

Loading

hiukim commented Apr 6, 2021

jhonrymat commented Apr 10, 2021 •

edited

Loading

problem playing a video #16

problem playing a video #16

Comments

jhonrymat commented Mar 22, 2021

hiukim commented Mar 22, 2021

jhonrymat commented Mar 22, 2021

hiukim commented Mar 22, 2021

jhonrymat commented Mar 23, 2021 • edited Loading

hiukim commented Mar 28, 2021

jhonrymat commented Apr 1, 2021

hiukim commented Apr 1, 2021

jhonrymat commented Apr 1, 2021 • edited Loading

hiukim commented Apr 6, 2021

jhonrymat commented Apr 10, 2021 • edited Loading

jhonrymat commented Mar 23, 2021 •

edited

Loading

jhonrymat commented Apr 1, 2021 •

edited

Loading

jhonrymat commented Apr 10, 2021 •

edited

Loading