本页实现了在视频列表中,点击 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; }