天天看點

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

        項目中需要使用網頁頁面播放視訊流,先是使用了hls.js進行播放,播放代碼如下:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>
           

        這段代碼在網絡條件好的時候,視訊流能正常播放,但是在網絡條件不好的時候,就會經常出現卡頓,有時候還會出現視訊加載不出來的情況,此時控制台會列印異常資訊:

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

        網上搜尋這個報錯的處理,試過了很多都沒能解決問題。

        最後嘗試更換了播放插件,視訊流就能正常播放了,問題得以解決。

<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插件官方位址:阿裡雲Aliplayer播放器

繼續閱讀