How to load src dynamically or using variables

I'm attempting to dynamically assign video sources to the Plyr player based on their resolution. The potential resolutions for these videos are consistently one of [480, 720, 1080], and I'm determining this based on the video's height. However, upon initializing the Plyr player, it seems that none of the sources are linked or loaded correctly.

let videos = []
function destroyVideoElement(videoElement) {
    videoElement.src = "";
    videoElement = null;
}

function WriteSource(url) {
    let sourcevideo = document.createElement('video');
    sourcevideo.src = url

    sourcevideo.addEventListener('loadedmetadata', function () {
        const sourceElement = document.createElement('source');
        videos.push({ 'src': url, 'size': String(sourcevideo.videoHeight) })
        destroyVideoElement(sourcevideo);
    });
}

let videoUrls = [
    "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",
    "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
];

videoUrls.forEach(function (url) {
    WriteSource(url);
});

let player = new Plyr('#video-player', {
    "controls": [
        'play-large',
        'play',
        'progress',
        'current-time',
        'mute',
        'volume',
        'captions',
        'settings',
        'fullscreen'
    ]
});

player.volume = 0.5;
player.source = {
    type: 'video',
    title: 'Example title',
    sources: videos,
    poster: '/path/to/poster.jpg',
};
window.player = player;

console.log(videos) shows output [ { "src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", "size": "720" }, { "src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", "size": "1080" } ]

maybe i've got a trick, But help me for the best case


<html>

<head>
    <meta charset=utf-8 />
    <title>videojs-quality-selector Demo</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
</head>
<style>
    .container {
        margin: 50px auto;
        width: 100%;
        aspect-ratio: 16/9;
    }
    .plyr.plyr--stopped .plyr__controls { display: none }
</style>

<body>
    <div class="container">
        <video id="video-player" crossorigin playsinline preload="auto">
            <source />
        </video>
    </div>
    <!-- Plyr resources and browser polyfills are specified in the pen settings -->
    <button id="alertButton">Click Me</button>
    <script src="//cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
    <script>
        let player = new Plyr('#video-player', {
            "controls": [
                'play-large',
                'play',
                'progress',
                'current-time',
                'mute',
                'volume',
                'captions',
                'settings',
                'fullscreen'
            ]
        });

    </script>
    <script>
        let videos = []
        function WriteSource(url) {
            let sourcevideo = document.createElement('video');
            sourcevideo.src = url

            sourcevideo.addEventListener('loadedmetadata', function () {
                const sourceElement = document.createElement('source');
                videos.push({ 'src': url, 'size': String(sourcevideo.videoHeight) })
            });
        }

        let videoUrls = [
            "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",
            "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
        ];

        videoUrls.forEach(function (url) {
            WriteSource(url);
        });

    </script>
    <script>
        player.once("play", function () {
            player.source = {
                type: 'video',
                sources: videos,
            }
            console.log()
            player.play()
        })
        player.volume = 0.5;
        window.player = player;
        console.log(player.options)
    </script>
</body>

</html>```

Did you try assigning the URL to the underlying HTML5 player element's src attribute? That worked at least for me to dynamically change the player's src after the Plyr instance has been initialized. But this might bypass steps in the Plyr instance, so I guess use with care ;)

Something like this:

const plyrPlayer = new Plyr("#videoPlayer", defaultOptions);
const htmlPlayer = plyrPlayer.elements.container.querySelector("video") 

// Some time later
htmlPlayer.src = someUrl;

sampotts / plyr

How to load src dynamically or using variables #2716