如何解决浏览器播放视频自动停止

Question

请回答的朋友认真读一遍我的问题，不要无脑的复制粘贴。万分感谢

使用bootstrap框架开发一个培训系统，可以播放视频文件（MP4），服务端使用WinServer + apache-tomcat-9.0.17

前端使用了DPlayer、VideoJS、H5的video标签都试过了，总是播几分钟后就自动停止了，再点播放按钮就无任何反应了。

DPlayer的错误提示：视频加载失败，前端debug抓到的错误信息：PIPELINE_ERROR_DECODE: Failed to send audio packet for decoding: {timestamp=142869333 duration=21333 size=428 is_key_frame=1 encrypted=0}。
VideoJS的错误提示是：ERROR: (CODE:3 MEDIA_ERR_DECODE) The media playback was aborted due to a corruption problem or because the media used features your browser did not support.

代码以DPlayer插件为例：

function initVideo(containerId, path, zlbh, spzlid, rywcqkid) {
    var duration = 0.0;//学习时长
    var currentTime = Number(new Date());//当前观看时间
    var sfytjwczt = false;//是否已提交完成状态
    var dplayer = new DPlayer({
        container: document.getElementById(containerId),
        autoplay: false,
        theme: 'red',
        loop: false,
        lang: 'zh-cn',
        screenshot: false,
        hotkey: true,
        preload: 'auto',
        logo: '',
        volume: 0.7,
        mutex: true, //阻止多个播放器同时播放
        video: {
            url: path, //视频路径
            pic: ctx+"img/xszlmrfm.png", //视频封面
            thumbnails: ctx+"img/xszlmrfm.png", //视频缩略图
            type: 'auto',
        },
    });

    dplayer.seek('0.01'); //跳转到指定时间位置

    dplayer.on('playing', function () {
        //console.log("播放 playing");
        //间隔两秒则自动隐藏
        setTimeout(function(){
            //为播放器添加隐藏工具条样式
            document.getElementById("dplayer").classList.add("dplayer-hide-controller");
        }, 2000);
    });
    dplayer.on('timeupdate', function () {
        //console.log("timeupdate ", currentTime, currentTimeTmp, duration, dplayer.video.currentTime, dplayer.video.duration);
        if(duration > dplayer.video.duration * 80 / 100){//观看总时长的80%，才算为已学习
            if(!sfytjwczt){
                gxxxjl();
                gxwcqk();//更新完成情况
                sfytjwczt = true;
            }
        }else{
            var currentTimeTmp = Number(new Date());
            duration += (currentTimeTmp - currentTime) * 1.0 / 1000;
            currentTime = currentTimeTmp;
        }
    });
    // 进行监听
    dplayer.on('play', function () {
        currentTime = Number(new Date());
        //console.log("play", currentTime, dplayer.video.currentTime);
        tjxxjl();//点击播放按钮了，添加一次学习记录
    });
    dplayer.on('error', function () {
        debugger
        console.log("播放结束", dplayer.video.currentTime);
    });
    dplayer.on('progress', function () {
        localStorage.setItem('video.history.' + spzlid, dplayer.video.currentTime);
    });
    dplayer.on('seeking', function () {
        currentTime = Number(new Date());
        //console.log("seeking", currentTime, dplayer.video.currentTime);
    });

    var prefixXxjl = ctx + "syxt/xxjl";//学习记录的Api
    //添加学习记录
    function tjxxjl() {
        $.ajax({
            type: "post",
            url: prefixXxjl + "/tjxxjl",
            data: {
                "zlbh": zlbh
            },
            success: function(data) {
                if (data.code == web_status.SUCCESS) {
                }else{
                    $.modal.alertWarning(data.msg);
                }
            }
        });
    }

    //更新学习记录
    function gxxxjl() {
        $.ajax({
            type: "post",
            url: prefixXxjl + "/gxxxjl",
            data: {
                "zlbh": zlbh,
                "wcxx": 1,//1是完成学习
            },
            success: function(data) {
                if (data.code == web_status.SUCCESS) {
                    dplayer.notice("恭喜你，已完成此文件资料的学习", 3000);
                }else{
                    $.modal.alertWarning(data.msg);
                }
            }
        });
    }

    //更新完成情况
    function gxwcqk() {
        if(rywcqkid == undefined || rywcqkid == null || rywcqkid == ""){
            return;
        }
        $.ajax({
            type: "post",
            url: ctx + "syxt/wdrw/gxwcqk",
            data: {
                "rywcqkid": rywcqkid,
                "ywc": 1,//1是完成任务
            },
            success: function(data) {
                if (data.code == web_status.SUCCESS) {
                }else{
                    $.modal.alertWarning(data.msg);
                }
            }
        });
    }
}

<div class="form-group" id="spzlDiv">
        <label class="col-sm-3 control-label">视频资料：</label>
        <div class="col-sm-8" style="padding-bottom: 15px;">
            <div id="dplayer"></div>
        </div>
    </div>

<script th:src="@{/js/DPlayer/DPlayer.min.js}"></script>
<script th:src="@{/js/DPlayer/MyDPlayer.js}"></script>
<script th:inline="javascript">

                var path = ctx + spzlFileInfo.filePath;
                path = path.replace("//", "/");
                initVideo('dplayer', path, zlglXskczl.zlbh, zlglXskczl.spzlid, rywcqkid);

</script>

只说DPlayer吧，正常播放几分钟后，视频左下角报错：视频加载失败，然后视频就停住了，点任何按钮都无反应，debugger截图如下：

在Chrome浏览器或Chrome内核的浏览器上都会有此问题，但是在火狐浏览器就没事，完成正常。试了几个前端视频插件都不行。使用工具处理了mp4文件，转换成H264编码（原本应该也是此编码的），依然有问题。怀疑是和tomcat的配置有关系吗？但是我没有搜到合适的解决方案

请问懂浏览器播放视频的朋友们，如何才能在Chrome及Chrome内核的浏览器中正常播放视频？

Answer 1

可能是你的音频源有问题，你可以换一个音频再试试