更改视频源脚本不起作用，代码更改但视图不起作用答案

【问题标题】：Change video source script doesn't work, code changes but view does not更改视频源脚本不起作用，代码更改但视图不起作用
【发布时间】：2022-02-01 08:14:36
【问题描述】：

我正在尝试构建动态网页，但在更改播放视频时遇到了问题。我想放一个按钮，当用户点击它时，视频应该会改变。我正在尝试通过脚本使用更改视频源。当我检查时，它会更改 src href 的值，但不会影响视图。仍然播放旧视频。我应该改变什么才能让它工作？

这是我的代码：

<div id="source_change" class="source">CHANGE SOURCE</div>

<video style="position: relative; left: -47px; border-radius: 45px;" autoplay="autoplay" loop="loop" muted="" width="642" height="324"><source id="source_video" src="firstvideo.mp4" type="video/mp4" />
</video>

<script>
  document.getElementById('source_change').addEventListener('click', function() {
  document.getElementById('source_video').src = 'secondvideo.mp4';
  });
</script>

【问题讨论】：

标签： html html5-video getelementbyid script

【解决方案1】：

您需要在 <video> 标记本身上设置 ID。
您可能还需要在之后执行 load() 以初始化新源。

尝试像这样设置代码：

<div id="source_change" class="source">CHANGE SOURCE</div>

<video  id="source_video" 
        style="position: relative; left: -47px; border-radius: 45px;" 
        autoplay="autoplay" loop="loop" muted="" width="642" height="324">
        
<source src="firstvideo.mp4" type="video/mp4" />
</video>

<script>

let myBtn = document.getElementById('source_change')
let myVid = document.getElementById('source_video');

myBtn.addEventListener('click', on_BtnClick );
  
function on_BtnClick ()
{
    myVid.src = 'secondvideo.mp4';
    myVid.load();
}

</script>

【讨论】：

PS：代码未经测试，但它是预期的正确流程，所以请告诉我它是否适合您。