JavaScript实现N个视频的切换

需求 ：使用JavaScript实现一定数量的视频切换是非常简单的，类似功能如图片切换等等。

HTML中有一个div，如下：

<div id="video" class="video" οnclick="setvideo()">
<video width="400" height="400" controls="controls">
<source src="1.mp4" type="video/mp4"  />
</video>
</div>

一般CSS控制Vedio的位置和样式，Css这里不用说，重点是通过JavaScript让其“动起来”，按照顺序先后循环，JS代码如下：

<script language="javascript">
var imgUrl=new Array(2);
imgUrl[0]="<video width='400' height='400' controls='controls'><source src='1.mp4' type='video/mp4' /></video>";
imgUrl[1]="<video width='400' height='400' controls='controls'><source src='2.mp4' type='video/mp4' /></video>";
/*功能：按照先后顺序动态切换视频*/
var number=0;
function setvideo(){
var number1=document.getElementById("youku"); 
number1.innerHTML = imgUrl[number];
number +=1;
if(number >=2){
number = 0 ;
}
}

按照随机顺序进行视频切换，JS代码如下：

<script language="javascript">
var imgUrl=new Array(2);
imgUrl[0]="<video width='400' height='400' controls='controls'><source src='1.mp4' type='video/mp4' /></video>";
imgUrl[1]="<video width='400' height='400' controls='controls'><source src='mzd.flv' type='video/mp4' /></video>";
/*功能：随机切换动态切换视频*/
function setvideo(){
var number1=document.getElementById("video");
number = Math.floor(Math.random()*imgUrl.length); 
console.log(number);
number1.innerHTML = imgUrl[number];
}
</script> 

只切换一次视频，JS代码如下：

<script language="javascript">
/*功能：动态切换视频一次*/
function setvideo(){
    var video= document.getElementById("video");
    var htmlstr =  "<video width='400' height='400' controls='controls'>";
        htmlstr += "<source src='mzd.flv' type='video/mp4' />";
    video.innerHTML = htmlstr;
}