使用video标签，连续播放无限个mp4(h264封装的)视频时，画面会闪烁的问题解决

采用的预加载方法，使用两个video标签加一个js中的Array（存储还没播放的视频。）

1. html页面代码，除了下面的div之外，还需导入一个jquery的库我导的jquery-3.4.1.js这个。

 <div>
            <video id="devVideo0" muted="muted">浏览器不支持 video0 标签</video>
            <video id="devVideo1" muted="muted">浏览器不支持 video1 标签</video>
        </div>

2. js代码，使用ajax轮询后端，获取新的视频，并进行两个video标签的切换播放。

<script>
            $(function (){
    
    
                window.setInterval(videoAjax,500)
            })
            let domVideo0=document.getElementById("devVideo0");
            let domVideo1=document.getElementById("devVideo1");
            let video0=$("#devVideo0");
            let video1=$("#devVideo1");
            //存储播放视频的src
            let arry=new Array();
            //标记是否已有src
            let src0=false;
            let src1=false;
            video1.css("display","none");//隐藏1号video标签
            function videoAjax(){
    
    
                $.ajax({
    
    
                    url: "v",//我的servlet的访问名
                    dataType: "json",
                    method: "post",
                    success: function (resp) {
    
    
                        arry.push(resp);
                        if (!src0){
    
    
                            src0=true;
                            //添加0号video标签准备播放
                            video0.attr("src",arry.shift());
                            domVideo0.play();
                            domVideo1.pause();
                        }else if (!src1){
    
    
                            //预加载1号标签，不播放
                            src1=true;
                            video1.attr("src",arry.shift());
                        }
                    },
                })
            }

            //监听0号video
            video0.bind("ended",function(){
    
    
                video0.attr("autoplay","none")
                //隐藏1显示0
                video0.css("display","none");
                video1.css("display","");
                //更换标签才能继续播放
                video0.attr("src",arry.shift());
                domVideo1.play();
                domVideo0.pause();
            })

            //监听1号video
            video1.bind("ended",function(){
    
    
                //隐藏0显示1
                video1.css("display","none");
                video0.css("display","");
                //使1号标签预加载不播放
                video1.attr("src",arry.shift());
                domVideo0.play();
                domVideo1.pause();
            })
        </script>

3. 后端上传视频代码

public class VideoServlet extends HttpServlet {
    
    
    public static String videopath = null;//视频路径
    private final Gson om = new Gson();//返回前端json对象
    private int count=0;//测试计数


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
    
    
        response.setContentType("text/html;charset=UTF-8");//设置成返回html页面
        response.setCharacterEncoding("utf-8");
        String tmp="http://localhost:8080/video/";//我的tomcat设置的访问路径
        count++;
        if (count%5==0){
    
    
            videopath=tmp+"1.mp4";//测试文件
        }else if (count%8==0){
    
    
            videopath=tmp+"2.mp4";//测试文件
        }
        if (videopath != null) {
    
    
            String s = om.toJson(videopath);
            videopath = null;
            PrintWriter writer = response.getWriter();
            writer.print(s);
            writer.flush();
            writer.close();
        }
    }
}