Help Center/ Live/ Low Latency Live Client SDK Reference/ Web SDK/ Best Practices/ Sample Code/ Specified Downgrade
Updated on 2024-11-15 GMT+08:00
View PDF

Specified Downgrade

Sample code of specified downgrade:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Downgrade Demo</title>
    <script src="sdk/HWLLSPlayer.js"></script>
</head>
<body>
<div id="preview" style="width: 1280px; height: 720px; position:relative;"></div>
<button id="btnStartPlay">start play</button>
<button id="btnStopPlay">stop play</button>
<script>
    const btnStartPlay = document.getElementById('btnStartPlay')
    const btnStopPlay = document.getElementById('btnStopPlay')

    const streamUrl = 'your stream url'
    const flvUrl = 'your flv url'

    const client = HWLLSPlayer.createClient()
    bindEvent(client)

    btnStartPlay.addEventListener('click', () => {
        startPlay(client, streamUrl, 'preview', {
            flvUrl: flvUrl
        })
    })
    btnStopPlay.addEventListener('click', () => {
        stopPlay(client)
    })

    function bindEvent(client) {
        client.on('Error', (error) => {
            console.log(`error: ${JSON.stringify(error)}`)
        })
        client.on('player-changed', (mediaFormat) => {
            console.log(`player changed:${mediaFormat}`)
        })
    }

    function startPlay(client, url, elementId, downgradeUrl) {
        client.startPlay(url, {
            elementId: elementId,
            downgradeUrl: downgradeUrl,
        })
    }

    function stopPlay(client) {
        client.stopPlay()
    }
</script>
</body>
</html>
Parent topic: Sample Code