阿里云视频播放器(视频点播)视频列表制作方法

作者:vkvi 来源:ITPOW(原创) 日期:2021-4-13

本页实现了在视频列表中,点击 A 播放 A,点击 B 播放 B,且暂停 A。

初始是不创建播放器的,只有首次播放时,才创建播放器。

CSS

.list .listItem { margin:15px; background:#fff; border-radius:5px; }
.list .listItem .video { position:relative; padding-bottom:56.25%; width:100%; }
.list .listItem .video .cover { position:absolute; top:0; left:0; width:100%; height:100%; border-top-left-radius:5px; border-top-right-radius:5px; }
.list .listItem .video .play-btn { position:absolute; top:calc(50% - 20px); left:calc(50% - 20px); width:40px; height:40px; background:url('img/play-btn.png') 50% 50% no-repeat; }
.list .listItem .video .player { position:absolute; top:0; left:0; width:100%; height:100%; display:none; }
.list .listItem .video .player .prism-big-play-btn { position:absolute!important; top:calc(50% - 20px)!important; left:calc(50% - 20px)!important; width:40px!important; height:40px!important; background:url('img/play-btn.png') 50% 50% no-repeat!important; } /*改变阿里自带的播放按钮样式*/
.list .listItem .video .player .prism-big-play-btn .outter { display:none!important; } /*改变阿里自带的播放按钮样式*/
.list .listItem .title { padding:10px 10px 10px 44px; background:url("img/play-icon.png") 10px 50% no-repeat; line-height:20px; }

HTML

<div class="listItem">
    <div class="video">
        <div class="cover" style="background:#000 url('1.jpg') 50% 50% no-repeat; background-size:cover;"></div>
        <div class="play-btn"></div>
        <div id="player1" class="player" data-vid="" data-pa="" data-cu="1.jpg"></div>
    </div>
    <div class="title">标题</div>
</div>
<div class="listItem">
    <div class="video">
        <div class="cover" style="background:#000 url('2.jpg') 50% 50% no-repeat; background-size:cover;"></div>
        <div class="play-btn"></div>
        <div id="player2" class="player" data-vid="" data-pa="" data-cu="2.jpg"></div>
    </div>
    <div class="title">标题</div>
</div>
<div class="listItem">
    <div class="video">
        <div class="cover" style="background:#000 url('3.jpg') 50% 50% no-repeat; background-size:cover;"></div>
        <div class="play-btn"></div>
        <div id="player3" class="player" data-vid="" data-pa="" data-cu="3.jpg"></div>
    </div>
    <div class="title">标题</div>
</div>

JavaScript

var players = [];
var aliplayers = [];
$(window).ready(function () {
	// 变量初始化
	$(".player").each(function () {
		players.push($(this));
		aliplayers.push(null);
	});
	// 设置事件
	$(".play-btn").each(function (index) {
		$(this).click(function () {
			for (var i = 0; i < aliplayers.length; i++) {
				var aliplayer = aliplayers[i];
				if (i == index) {
					// aliplayer 中写了事件的,这里播放时,会自动暂停其他的
					if (aliplayer != null) {
						aliplayer.play(); // 播放当前
					}
					else {
						createAliplayer(index); // 创建当前
					}
				}
			}
		});
	});
});


function createAliplayer(index) {
	var player = players[index];

	var aliplayer = new Aliplayer({
		id: player.get(0).id,
		width: '100%',
		height: '100%',
		autoplay: true,

		//播放方式二:点播用户推荐
		vid: player.data("vid"),
		playauth: player.data("pa"),
		cover: player.data("cu"),
	});

	aliplayer.on("play", function () {
		// 暂停其他的
		for (var i = 0; i < aliplayers.length; i++) {
			var aliplayer = aliplayers[i];
			if (i != index && aliplayer != null) {
				aliplayer.pause(); // 暂停其他的
				// 仅靠 pause() 有时候无法显示播放按钮,这里显式设置一下
				// 注意,重复设置 pause()(已经暂停了又调用之),有时候也会无法显示播放按钮
				players[i].find(".prism-big-play-btn").show();
			}
		}
	});
	
	player.show();
	aliplayers[index] = aliplayer;
}


相关文章