Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 解决方法

        In the project, web pages need to be used to play video streams. First, hls.js is used to play. The playback code is as follows:

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <video id="video" controls width="1080" height="720"></video>
    <script>
        var url = "https://live.tv.xxx.cn:19080/live/201/live.m3u8";
        if (Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = url;
            video.addEventListener('canplay', function() {
                video.play();
            });
        }
    </script>

        When this code is in good network conditions, the video stream can be played normally, but when the network conditions are not good, it will often freeze, and sometimes the video cannot be loaded. At this time, the console will print Exception information:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 

        I searched the Internet for the handling of this error, and tried a lot but failed to solve the problem.

        Finally, try to replace the playback plug-in, the video stream can be played normally, and the problem is solved.

    <script src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"></script>
    <video id="HLS_Player" autoplay="autoplay" loop muted controls="controls" width="100%" height="100%"></video>
    <script type="text/javascript">
        var url = "https://live.tv.xxx.cn:19080/live/201/live.m3u8";
        function PlayVideo(elId, url) {
            var player = new Aliplayer({
                id: elId,
                source: url,
                "width": "100%",
                "height": "100%",
                cover: 'assets/image/loading.gif',
                "autoplay": true,
                "isLive": true,
                "playsinline": true,
                "preload": true,
            }, function(player) {
                player.mute();
                player.play();
            });
        }

        PlayVideo('HLS_Player', url);
    </script>

        Aliplayer plug-in official address: Aliyun Aliplayer player

おすすめ

転載: blog.csdn.net/evanyanglibo/article/details/129156530