After set video.src, video.play() not work

Iphone 16 pro

After set video.src, video.play() not work

    <div>
        <button id="play">
            play
        </button>
    </div>

    <video
        id="video"
        preload="auto"
        playsInline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-orientation="portraint"
        x-webkit-airplay="true"
        raw-controls="true"
        style="width: 300px;"
    >
        <source src="****.mp4" type="video/mp4" />
        <track kind="captions" srcLang="en" />
    </video>

    <script>
        document.querySelector('#play').addEventListener('click', function() {
            document.querySelector('#video').play();
        })

        document.querySelector('#video').addEventListener('ended', function() {
            document.querySelector('#video').pause();
            document.querySelector('#video').src = '*****.mp4';
            document.querySelector('#video').play()
        })
    </script>