amp.js

ampSetup() {
      try {
        let myPlayer = amp(
          "vid1",
          {
            nativeControlsForTouch: false,
            autoplay: false,
            controls: true,
            width: "800",
            height: "600",
            fluid: true,
            poster: "",
            logo: {
              enabled: false,
            },
            // cea708captions: true,
            // cea708CaptionsSettings: {
            //   enabled: true,
            //   srclang: "en",
            //   label: "Live CC",
            // },
            // imsc1Captions: [
            //   {
            //     label: "Caption",
            //     srclang: "en-us",
            //   },
            // ],
            imsc1CaptionsSettings: [
              {
                label: "Caption",
                srclang: "en-us",
              },
            ],
          },
          function () {
            console.log("Good to go!");
            this.addEventListener("ended", function () {
              console.log("Finished!");
            });
          }
        );
        myPlayer.src([
          {
            src: this.streamInfo.endpoint,
            type: "application/vnd.ms-sstr+xml",
          },
        ]);
      } catch (error) {
        window.alert("stream error");
        document.getElementById("vid1").replaceWith("");
        console.log("stream err");
        console.log(error);
      }
    },

index.html

<video
          id="vid1"
          class="azuremediaplayer amp-default-skin"
          style="width: 100%"
        ></video>