I´m getting "The element or ID supplied is not valid. (videojs)"

Question

Hi

I get quite a few errors like this logged "The element or ID supplied is not valid. (videojs)". This happens in 10-20% cases but I have not been able to replicate personally on my computer.

with tis detail

at f line 47, column 16087 (https://amp.azure.net/libs/amp/2.3.11/azuremediaplayer.min.js:47)

at ? line 264, column 20 (https://eventstreamingpublicwebdev.azurewebsites.net/Event/ViewEvent/3ef8a583-4579-4444-8ca3-bed3e5de591a?couponCode=588436:264)

But I don´t have a clue why and what I can do about it.

The errors are happening 99% on Chrome and 1% Edge (I´m using Raygun to log)

Here is my code below.

@page "{id}"
@using BSR.Beinni.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@inject IHtmlLocalizer<BeinniResource> L
@model BSR.Beinni.Web.Public.Pages.Event.ViewEventModel

<script crossorigin="anonymous" src="https://amp.azure.net/libs/amp/2.3.11/azuremediaplayer.min.js"></script>

// I switch like this if I´m on an Apple device or not. 
@if (Model.OnApple)
{
    <video id="appleplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"> </video>
}
else
{
    <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"> </video>
}

<script>
    var myOptions = {
        techOrder: ["azureHtml5JS", "html5"],
        autoplay: true,
        controls: true,
        width: "100%",
        height: "400",
        poster: "",
        "logo": { "enabled": false }
    };

    var myPlayer = amp("appleplayer", myOptions);
    myPlayer.src([{ src: "@Model.ManifestUrl", type: "application/vnd.ms-sstr+xml", streamingFormats: ["DASH", "SMOOTH"], protectionInfo: [{ type: "AES", authenticationToken: "@Model.Token" }] }, { src: "@Html.Raw(@Model.LiveStreamUrl)", type: "application/vnd.apple.mpegurl", disableUrlRewriter: true, protectionInfo: [{ type: "AES" }] }]);
</script>

<script>
    var myOptions = {
        autoplay: true,
        controls: true,
        width: "100%",
        height: "400",
        poster: "",
        "logo": { "enabled": false },
    };

    var myPlayer = amp("azuremediaplayer", myOptions);
    myPlayer.src([{ src: "@Model.LiveStreamUrl", type: "application/vnd.ms-sstr+xml", protectionInfo: [{ type: "AES", authenticationToken: "@Model.Token" }] }]);
</script>

The page loads fast and all..

Hope you can point me in the right direction with this.

p.s

Love the new look and feel of the QA site! 💖

Answer 1

Should I rather be doing something like this? But I don´t know if this will have any affect on the error but its cleaner setup regardless I think.

<script crossorigin="anonymous" src="https://amp.azure.net/libs/amp/2.3.11/azuremediaplayer.min.js"></script>



<script>
    var playerId;
    var playerOptions;
    var videoPlayer;
    var videoSource;

    if (Model.OnApple) {
        playerId = "appleplayer";
        videoSource = [{ src: "@Model.ManifestUrl", type: "application/vnd.ms-sstr+xml", streamingFormats: ["DASH", "SMOOTH"], protectionInfo: [{ type: "AES", authenticationToken: "@Model.Token" }] }, { src: "@Html.Raw(@Model.LiveStreamUrl)", type: "application/vnd.apple.mpegurl", disableUrlRewriter: true, protectionInfo: [{ type: "AES" }] }];
        playerOptions = {
            techOrder: ["azureHtml5JS", "html5"],
            autoplay: true,
            controls: true,
            width: "100%",
            height: "400",
            poster: "",
            "logo": { "enabled": false }
        };
    } else {
        playerId = "azuremediaplayer";
        videoSource = [{ src: "@Model.LiveStreamUrl", type: "application/vnd.ms-sstr+xml", protectionInfo: [{ type: "AES", authenticationToken: "@Model.Token" }] }];
        playerOptions = {
            autoplay: true,
            controls: true,
            width: "100%",
            height: "400",
            poster: "",
            "logo": { "enabled": false }
        };
    }
    document.getElementById("player-container").innerHTML = "<video id='" + playerId + "' class='azuremediaplayer amp-default-skin amp-big-play-centered'></video>";
    videoPlayer = amp(playerId, playerOptions);
    videoPlayer.src(videoSource);
                var playerId;
                var playerOptions;
                var videoPlayer;
                var videoSource;

                var onApple = @Model.OnApple.ToString().ToLower();
                if (onApple) {
                    playerId = "appleplayer";
                    videoSource = [{ src: "@Model.ManifestUrl", type: "application/vnd.ms-sstr+xml", streamingFormats: ["DASH", "SMOOTH"], protectionInfo: [{ type: "AES", authenticationToken: "@Model.Token" }] }, { src: "@Html.Raw(@Model.LiveStreamUrl)", type: "application/vnd.apple.mpegurl", disableUrlRewriter: true, protectionInfo: [{ type: "AES" }] }];
                    playerOptions = {
                        techOrder: ["azureHtml5JS", "html5"],
                        autoplay: true,
                        controls: true,
                        width: "100%",
                        height: "400",
                        poster: "",
                        "logo": { "enabled": false }
                    };
                } else {
                    playerId = "azuremediaplayer";
                    videoSource = [{ src: "@Model.LiveStreamUrl", type: "application/vnd.ms-sstr+xml", protectionInfo: [{ type: "AES", authenticationToken: "@Model.Token" }] }];
                    playerOptions = {
                        autoplay: true,
                        controls: true,
                        width: "100%",
                        height: "400",
                        poster: "",
                        "logo": { "enabled": false }
                    };
                }
                document.getElementById("player-container").innerHTML = "<video id='" + playerId + "' class='azuremediaplayer amp-default-skin amp-big-play-centered'></video>";
                videoPlayer = amp(playerId, playerOptions);
                videoPlayer.src(videoSource);
</script>

Answer 2

The error message "The element or ID supplied is not valid. (videojs)" suggests that the video player is unable to find the specified element or ID in the HTML code. It seems that you are using Azure Media Player to play videos on your website.

Based on the code you provided, it looks like you are using different video players for different devices. For Apple devices, you are using the "appleplayer" ID, and for other devices, you are using the "azuremediaplayer" ID.

It's possible that the issue is caused by a mismatch between the video player ID and the ID of the video element in the HTML code. To troubleshoot this issue, you can try the following steps:

1. Verify that the video element in the HTML code has the correct ID that matches the ID used in the JavaScript code.
2. Check if the video element is present in the HTML code before the JavaScript code is executed.
3. Make sure that the video element is not hidden or obscured by other elements on the page.
4. Try to reproduce the issue on your own computer by accessing the website from a browser.
5. If you are still unable to resolve the issue, you can collect logs from the extension and share them here after sanitizing them.
6. You can also check for any errors or warnings in the Azure portal and repair the connection to Azure if necessary.
7. Make sure the underlying Media Services account has the default Streaming Endpoint in a started state. Otherwise, you can't watch videos from this Media Services account or in Azure Video Indexer.
8. You must allocate Media Reserved Units on your Media Service resource in order to index videos. For optimal indexing performance, it's recommended to allocate at least 10 S3 Reserved Units.
9. Use the same Azure AD user you used when connecting to Azure.

I hope this helps you troubleshoot the issue. Let me know if you have any other questions.

P.S. Thank you for the Q&A feedback. The team worked hard on this version. Stay tuned for more Q&A goodies!