How to assign video materials to assigned objects?

Customization
1

I have few questions about viewer.createTextureFromHTMLVideo(video):

  1. How to assign video materials to assigned objects？
  2. How to reference the video path in the computer?
  3. How to control when to start playing video? For example: click the trigger to play the video.
  4. How to pause the video automatically when the video ended?
    Note: video here is texture.Not video plays in the pop-up window.

For now, I refer to code in https://forum.shapespark.com/t/video-as-texture-again/2223/3
but it doesn’t work.

2

Do you need to use the JavaScript viewer API? You can add a video texture using the built-in features - just select your video file as the “Base color” texture (see: https://www.youtube.com/watch?v=aRgpkdDNMAE)

Use the “Video texture control” extension described in: https://help.shapespark.com/hc/en-us/articles/360010148837-Extensions

The “Video texture control” extension allows you to disable video looping.

3

Thanks for your answer. Well, yes, I need to use the JavaScript viewer API.In order to set timer to control when the video plays or pause.To be exact. I need to play the video automatically after I reach the viewpoint.The video don’t loop, don’t autoplay immediately, and it’s muted.

4

I see. In this case:

  1. Do you need to replace a material, or is it enough to replace the material’s texture? In the latter case it’s described in: GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene.

  2. Video files can be put into the extra-assets subdirectory of the scene directory Documents\Shapespark\<SCENE-NAME>. Then, they are uploaded together with the scene, and can be referred in HTML/JS code as $EXTRA_ASSETS/<FILE-NAME>.

  3. You can use the Script extension to put your own code that starts the video when the trigger is clicked.

  4. HTML’s video element has a loop attribute: <video>: The Video Embed element - HTML: HyperText Markup Language | MDN

5

The code of body-end is as follows:

JavaScript:

    viewer.setMaterialEditable('diantixsq-01');
    let Elevator = document.createElement('video');
    Elevator.src = "$EXTRA_ASSETS/Elevator2.mp4";
    Elevator.muted = true;
    Elevator.loop = false;
    Elevator.autoplay = false;
    var material = viewer.findMaterial('diantixsq-01');
    if (material != null) {
        material.baseColorTexture = viewer.createTextureFromHtmlVideo(Elevator);
    }else{
        material.baseColorTexture = viewer.createTextureFromHtmlVideo(Elevator);
    }
    function EV(){
        Elevator.play();
        viewer.requestFrame();
    }
    setTimeout(EV,5000);

path of video: extra-assets/Elevator.mp4

image
image219×656 6.32 KB

material name: diantixsq-01

image
image1279×661 61.9 KB

The console of firefox shows error as follows:
Cross-origin request blocked: The Same Origin Policy disallows reading remote resources at the https://cdn0.shapespark.com/kcLjzdzXD3YW/cbt-0719/v19/extra-assets/Elevator2.mp4. (Reason: CORS request failed)
and
material is null
So why CORS request did not succeed?
How to fix material is null?