Javascript实现视频轮播

最近客户要求用Javascript实现视频轮播:(单视频,多视频均可以)

      有兴趣的同学可以参开一下

      下面写了一个程序实现多视频轮播,pc端与移动端均可以实现,(单视频播放实现的原理也是一样)

      只要在polyv平台注册一个账号,上传几个视频,就可以利用这段代码了。


实现的原理是,拿到在polyv视频平台上传的视频id,把他放在一个数组里面:

var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7"); 
然后利用循环,还有调用视频播放结束接口s2j_onPlayOver( );跳转到下一个要播放的视频的id


视频播放函数:printPlayer(index);



多终端控制代码如下,如果用户是利用移动终端看的,(利用Html5)就会执行下面的代码段:

	if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
		var video = document.createElement("video");
		video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid;
		video.οnended=s2j_onPlayOver;
			//video.addEventListener('ended',j2s_onPlayOver, false);
		video.autoplay="true";
		video.controls="controls"
			container.appendChild(video);
	}

如果用户是利用pc端看的,就会执行下面的代码段:

else{
		
      		var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid;

		   container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
		   +"<param name='allowFullScreen' value='true' />"
		   +"<EMBED src='"+swf+"' width='600' height='375'  TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
		   +"</OBJECT>";
		  <!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->
          
          
	}

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<title>Insert title here</title>
</head>       

<p>视频轮播11</p>
   <div id="container"></div>
   
 
   <p>视频轮播22</p>
</body>
<ml>




<script type="text/javascript">
var index=0;
var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7"); 


var container = document.getElementById("container");
function printPlayer(index){
	//alert(arr.length);
	if(index>arr.length-1){
		index=0;
	}
	//container.removeElement;
	container.innerHTML="";
	var vid=arr[index];
	if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
		var video = document.createElement("video");
		video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid;
		video.οnended=s2j_onPlayOver;
			//video.addEventListener('ended',j2s_onPlayOver, false);
		video.autoplay="true";
		video.controls="controls"
			container.appendChild(video);
	}else{
		
      		var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid;

		   container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
		   +"<param name='allowFullScreen' value='true' />"
		   +"<EMBED src='"+swf+"' width='600' height='375'  TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
		   +"</OBJECT>";
		  <!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->
          
          
	}
}

printPlayer(index);


/* function j2s_onplayover(){
	index++;
	printPlayer(index);
	
} */

function s2j_onPlayOver() {
alert('ssss');
	index++;
	printPlayer(index);
}
</script>


运行效果:

效果预览地址1:http://www.polyv.net/

效果预览地址2:http://forum.junjing.net/test3.php



  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现视频轮播,可以使用 HTML5 的 video 标签和 JavaScript实现。以下是一个简单的示例: HTML 代码: ```html <div id="video-carousel"> <video src="video1.mp4" autoplay muted></video> <video src="video2.mp4"></video> <video src="video3.mp4"></video> </div> ``` CSS 代码: ```css #video-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; } #video-carousel video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease-in-out; opacity: 0; } #video-carousel video.active { opacity: 1; z-index: 1; } ``` JavaScript 代码: ```javascript var videos = document.getElementsByTagName('video'); var index = 0; function playVideo() { videos[index].classList.add('active'); videos[index].play(); } function pauseVideo() { videos[index].classList.remove('active'); videos[index].pause(); } function nextVideo() { pauseVideo(); index = (index + 1) % videos.length; playVideo(); } playVideo(); setInterval(nextVideo, 5000); ``` 在这个示例中,我们使用了一个 div 包含了多个 video 标签,通过设置 CSS 的 position 和 overflow 属性来实现轮播的效果。我们还定义了一个 active 类来控制当前播放的视频的显示和隐藏。 JavaScript 代码中,我们首先获取了所有的 video 标签,并且定义了三个函数:playVideo、pauseVideo 和 nextVideo。playVideo 函数用于播放当前视频,pauseVideo 函数用于暂停当前视频,nextVideo 函数用于播放下一个视频。我们还使用了 setInterval 函数来定时调用 nextVideo 函数,实现视频轮播效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值