就是一個(gè)簡單的切換視頻的效果肠槽,我最開始饰抒,是用js給video的src和poster不斷賦值的方法來實(shí)現(xiàn)的翅溺。
pc端的效果是沒有問題的脑漫,但是在移動(dòng)端看,雖然poster和src已經(jīng)設(shè)置了?咙崎,但是效果上看不出poster的變化优幸,如下圖中的第二張。點(diǎn)擊播放按鈕的話褪猛,可以看到src已經(jīng)更換了网杆,播放的是新的視頻。
在網(wǎng)上搜索了一下伊滋,發(fā)現(xiàn)有人提到:https://blog.csdn.net/nihaoqiulinhe/article/details/80430378
當(dāng) video 中存在 source 標(biāo)簽的時(shí)候碳却,瀏覽器渲染之后會(huì)自動(dòng)去獲取地址,即便地址改變笑旺,瀏覽器也不會(huì)再去獲取地址昼浦。但是通過動(dòng)態(tài)的插入 source 標(biāo)簽的方式,可以觸發(fā)瀏覽器進(jìn)行重排筒主,從而去獲取相應(yīng)地址的文件進(jìn)行播放关噪。
所以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);
}
}