JavaScript实现N个视频的切换

原创 2015年11月18日 09:15:03

需求 :使用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;
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

Struts2 关于i18n国际化的问题,可点击链接实现中英文切换

1.首先把Struts2的环境搭建起来,   2.建立一个action.测试i18n的。   3.下面这个是struts.xml的简单配置,里有2中properties文件的配置,一种是全局的...

iOS Swift3.0实现视频播放横竖屏切换效果

iOS Swift3.0实现视频播放横竖屏切换效果

Javascript+Flash实现图片切换

  • 2009年09月10日 17:52
  • 54KB
  • 下载

Javascript+Flash实现图片切换

  • 2008年12月17日 16:34
  • 54KB
  • 下载

mediaplayer+surfaceview实现视频播放以及全屏窗口切换

mediaplayer+surfaceview实现视频暂停播放、动态设置视频横竖屏全屏半屏

Javascript+Flash实现5副图片切换

  • 2008年11月03日 17:06
  • 67KB
  • 下载

Android视频播放器实现小窗口和全屏状态切换

Android视频播放器实现小窗口和全屏状态切换实在是不好意思,楼下评论的兄弟久等了,这文章一直没写第一是没时间,第二是自己准备也不充足,最近才看了好几个Android视频播放器的开源项目,才对视频播...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现N个视频的切换
举报原因:
原因补充:

(最多只允许输入30个字)