即使在使用JavaScript更改源代码后，WordPress视频也会重复播放

Question

我正在创建一个WordPress网站，并希望创建一个视频背景，一个接一个地播放三个简短的自托管视频片段。由于我找不到合适的插件，我决定在网页上添加媒体（视频）。我试图通过更改视频源使用相同的播放器一个接一个地播放视频。代码工作，视频源在检查控制台中的网页时发生变化。但是相同的视频片段（“wp-content / uploads / reel / airbnb_website.mp4”）会循环而不是播放下一个视频。知道为什么会这样吗？

HTML：

<mediaelementwrapper id="video-5-1">
   <video class="wp-video-shortcode" id="video-5-1_html5" width="720" height="294" poster="wp-content/uploads/reel/airbnb_website.jpg" autoplay="1" preload="auto" src="https://robierobz.com/wp-content/uploads/reel/airbnb_website.mp4?_=1" style="width: 908px; height: 370.767px;">
      <source type="video/mp4" src="wp-content/uploads/reel/giahdin_website.mp4">
        <a href="wp-content/uploads/reel/airbnb_website.mp4">wp-content/uploads/reel/airbnb_website.mp4</a>
   </video>
   <source src="wp-content/uploads/reel/airbnb_website.mp4"> 
</mediaelementwrapper>

CSS：       var varCounter = 0;

                var varName = function(video,source){


                 if(varCounter <= 7)
                 {
                    varCounter +=1;

                    if(varCounter == 2)
                    {

                        source.setAttribute('src','wp-content/uploads/reel/airbnb_website.mp4');
                        video.appendChild(source);
                        video.pause();
                        video.load();
                    }
                    if(varCounter == 4)
                    {

                        source.setAttribute('src','wp-content/uploads/reel/aucklandcouncil_website.mp4');
                        video.appendChild(source);
                        video.pause();
                        video.load();
                    }

                    if(varCounter == 6)
                    {


                        source.setAttribute('src','wp-content/uploads/reel/giahdin_website.mp4');
                        video.pause();
                        video.load();
                    }
                    if(varCounter == 6)
                    {
                        varCounter = 0;
                    }
                    video.play();
                 } 
                 else
                 {
                      clearInterval(varName);
                 }
            };


            document.addEventListener("DOMContentLoaded", function(event) { 
              var video = document.getElementById('video-5-1_html5');
                var source = document.createElement('source');
                source.setAttribute('src','wp-content/uploads/reel/airbnb_website.mp4');

                 varName(video,source);

                video.addEventListener('ended',myHandler,false); 
                function myHandler(e){
                    varName(video,source);
                }


                setTimeout(function myHandler(e){varName(video,source);}, 3000);

            });