LOFTER-网易轻博

就是一个简单的切换视频的效果，我最开始，是用js给video的src和poster不断赋值的方法来实现的。

pc端的效果是没有问题的，但是在移动端看，虽然poster和src已经设置了 ，但是效果上看不出poster的变化，如下图中的第二张。点击播放按钮的话，可以看到src已经更换了，播放的是新的视频。

在网上搜索了一下，发现有人提到：https://blog.csdn.net/nihaoqiulinhe/article/details/80430378

当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。但是通过动态的插入 source 标签的方式，可以触发浏览器进行重排，从而去获取相应地址的文件进行播放。

所以js的方法改成下面，效果果然正确了。

//切换视频

function nextMovie(){

var box=document.getElementById('videoB'),myVideo = document.createElement("video");

videoInd++;

if(videoInd<videoList.length-1){

    myVideo.src=videoList[videoInd].src;

myVideo.controls="controls";

    myVideo.poster=videoList[videoInd].poster;

//myVideo.value=index+1;

    //alert(videoInd);

    //myVideo.setAttribute('value',);

   box.innerHTML='';

box.appendChild(myVideo);

}

}