js控制列表页视频播放和暂停,不用插件

很多网站视频列表页可以预览,为了做到这个效果,试了很多方法,先是用阿里播放器,再用了videojs,最终都无法满足我的需求,后来决定自己写代码实现,其实很简单。,,发出来记录一下。

var players = [];
		$( document ).ready(function() {
			//初始化播放器
			PlayerInit();
		});

		function PlayerInit() {
		//遍历播放器
			$('.player').each(function(i) {
				if( typeof player[i] !== 'undefined' ) return;
				var container = $(this);
				pinit(i, container);

			});

		} 

		function pinit(i, container){
			//给播放器添加唯一ID
			var selector = 'player-' + i;
			container.attr('id', 'player-' + i);
			player[i]=document.getElementById('player-'+i);
			//父元素,为了实现鼠标移动到视频卡片区域有播放和暂停效果
			var pcard = $(container).parent();

			//播放控制 鼠标移动到自动播放
			pcard.mouseenter(function(){
				//暂停其它
				pPauseOther(pplayer, i);
				player[i].play();
			});
			//鼠标移出暂停
			pcard.mouseleave(function(){
			  	player[i].pause();
			});


		}
		//暂停其它播放器
		function pPauseOther(player, i) {
			$.each(player, function(j) {
				if (j != i) {
					player[j].pause();
				}
			});
		}

效果演示 http://moviepart.cn/media/video_2676.html

你可能感兴趣的:(javascript)