HTML video 在原有视频前增加广告视频

需要在播放视频前增加一个广告，实现代码如下：

<script>
    window.onload=function(){
    	// 我这块是一个页面里多个video标签, 所以需要用id区分
        $('.course_lists').each(function (n) {
            var id = $(this).attr('id');
            $(this).find('video').attr('id','video_'+id);
                var i = id.split('_')[1];
                guanggao(i)
        })
    }
    // 贴片广告 2020-12-29 13:42:19 刘啸宇
    var guanggao =function(id){
    	// 广告资源
        var nextVideo ="/ceshi.mp4";
        var videoPlayer = document.getElementById('video_lists_'+id);
        var _cur_video_src = videoPlayer.src;
        // 目的是为了后边 remove 
        var handle = function(videoPlayer, nextVideo){
            videoPlayer.src = nextVideo;
            // 自动播放视频时 需搭配 autoplay 和 muted
            videoPlayer.autoplay = 'autoplay';
            videoPlayer.muted = 'muted';
        }
        // 监听 play
        videoPlayer.addEventListener('play',handle(videoPlayer, nextVideo),false)
        // 监听视频播放完毕 ended
        videoPlayer.addEventListener('ended',function (){
        	// 去掉 监听
            videoPlayer.removeEventListener('play', handle, false)
            videoPlayer.src = _cur_video_src;
            // 跳转回之前观看的位置
            var currenttime = $("#lists_"+id).attr('data-data');//获取每个课程的上次观看时长
            $('#video_lists_'+id).on("loadedmetadata", function () {
                videoPlayer.autoplay = false;
                videoPlayer.muted = false;
                videoPlayer.currentTime = currenttime;
                // 禁止快进
                var sym_i;
                setInterval(function () {
                    var time=videoPlayer.currentTime
                    if(time-sym_i>1){
                        videoPlayer.currentTime=sym_i
                    }
                    sym_i=videoPlayer.currentTime
                },500);
               
            });
        },true)
    }

</script>