HTML5 source标签src属性值更改无效

最近有个同事问我，为什么动态更改video里面source的src属性无效，还是播放原来的视频，相信很多人和我一样，基本没用过source这个标签，所以当我发现的时候也觉得很奇怪很郁闷，当时解决的办法就是不要source标签还是用video。后来研究了一下发现了解决办法，那就是不能使用jquery的方式去改src值，要用js原始的方式去更改。

当video和source标签同时存在时，使用jquery的attr方法，无论是去更改source的src属性值时，还是video的src都无效，你会发现代码上的src值的确是更改了，但是浏览器还是播放原来的视频。我个人理解是jquery更改的只会对你所选择到的那个元素进行操作，而js原生的却不是，会对video和source两个标签同时进行更改而后生成代码。因此当video和source标签元素同时存在时，浏览器时需要对这两个元素同时解析才行，而只更改其中一个时，代码是会生效，但是浏览器却不会去解析。

不知道我的理解对不对，希望有懂的大神能解释一下

下面贴代码

js：
document.getElementById("videoid").src = '2.mp4';
注意：此处的id是video标签的id


html：
<video id="videoid" controls="controls" style="height:100%;width:500px;">
    <source src="1.mp4" type="video/mp4" />
</video>