关闭

JavaScript实现N个视频的切换

标签: javascripthtml5视频html
298人阅读 评论(0) 收藏 举报
分类:

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

HTML中有一个div,如下:

<div id="video" class="video" onclick="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;
}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52954次
    • 积分:720
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条