dataview/dahuacamera/IPCSD/webs/simple.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
		<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval'">-->
        <title>demo</title>
    </head>
    <body>
        <div>
            <button id="startBtn" style="display:none;"></button>
            <canvas id="testCanvas" style="background-color:#000;width:500px;height:360px;"></canvas>
            <div style="display:none;">
                <video id="testVideo" style="background-color:#000;width:500px;height:360px;" muted></video>
            </div>
        </div>
    </body>
    <script src="module/playerControl.js"></script>
    <script>
        var player = null;
        var canvas = document.getElementById('testCanvas');
        var video = document.getElementById('testVideo');
        var startBtn = document.getElementById('startBtn');
        // 按钮始终隐藏，只用于自动播放失败时的备用触发

        function showManualButton() {
            // 按钮始终隐藏，不显示
            startBtn.style.display = 'none';
        }

        function markPlaying() {
            startBtn.innerText = '';
            startBtn.disabled = true;
        }

        const startPlayback = function(muted){
            var options = {
                wsURL: 'ws://10.10.43.220/rtspoverwebsocket',
                rtspURL: 'rtsp://10.10.43.220/cam/realmonitor?channel=1&subtype=0&proto=Private3',
                username: 'admin',
                password: 'l1234567',
				// 在部分 Chrome 新版本上，开启 H.265 硬件加速会走 video 解码路径，可能导致有声无画
				// 先关闭硬件加速，强制使用 canvas / 软件解码路径，提升兼容性
				h265AccelerationEnabled: false
            };
            // 静音可提升自动播放成功率
            var enableMute = !!muted;
            video.muted = enableMute;
            if (enableMute) {
                video.setAttribute('muted','');
            } else {
                video.removeAttribute('muted');
            }

            player = new PlayerControl(options);
            player.on('WorkerReady', function(){
                player.connect();  
            });
            player.on('DecodeStart', function(rs){
                console.log('start decode');
                console.log(rs);

            });
            player.on('PlayStart', function(rs){
                console.log('play');
                console.log(rs);
                markPlaying();
            });
            player.on('Error', function(rs){
                console.log('error');
                console.log(rs);
                // 按钮始终隐藏，错误时也不显示
            });
            player.on('FileOver', function(rs){
                console.log('recorder play over');
                console.log(rs);
            });
            player.on('MSEResolutionChanged', function(rs){
                console.log('resolution  changed');
                console.log(rs);
            });
            player.on('FrameTypeChange', function(rs){
                console.log('video encode mode changed');
                console.log(rs);
            });
            player.on('audioChange', function(rs){
                console.log('audio encode changed');
                console.log(rs);
            });
            player.init(canvas, video);
        }
        document.getElementById('startBtn').addEventListener('click', function(){
            startPlayback(false); // 用户点击时可以尝试带声音
            this.disabled = true;
            this.innerText = '';
        }, { once: true });

        // 页面加载后自动尝试静音播放，按钮始终隐藏
        window.addEventListener('load', function(){
            try {
                startPlayback(true);
            } catch (e) {
                console.warn('autoplay failed', e);
                // 按钮始终隐藏，不显示
            }
        });
    </script>
</html>