在banner轮播基础上实现播放视频功能
2022-07-29 东少笔记
加入收藏
示例简介
本文介绍在banner轮播基础上实现播放视频功能，有两种播放方式：
1、点击播放按钮，在banner图位置播放视频（效果如下）；
2、点击播放按钮，全屏播放视频。
实现过程
1、两种播放方式，css样式共用如下：
* { padding: 0; margin: 0;}.swiper-container { width: 100%; height: 211px;}.video { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.5);}.loading-box { width: 100%; position: absolute; top: 0; left: 0; height: 100%; font-size: 0;}.loading-box .video-img { width: 100%; height: 100%;}.loading-box .palying-img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 1; transition: opacity 0.3s;}.loading-box .loading-img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; transition: opacity 0.3s;}.loading-box.loading .loading-img { animation: loading 1s infinite; -webkit-animation: loading 1s infinite; opacity: 1;}.loading-box.loading .palying-img { display: none;}.diy-buttons { overflow: hidden; text-align: center;}.diy-buttons a { float: left; width: 50%;}@keyframes loading { from { transform: translateX(-50%) translateY(-50%) rotate(0deg); } to { transform: translateX(-50%) translateY(-50%) rotate(360deg); }}
2、第一种播放方式，html和js代码如下：
1）“onSlideChangeEnd”用来轮播结束回调函数“removeLoading”，移除加载效果，解决切换过快有时候还显示加载效果；
2）由于swiper为了循环轮播，复制了多一份数据，所以里面的video获取未使用ID；
3）监听video的状态“play”和“pause”来控制轮播或暂停轮播，增加体验。
<!DOCTYPE html><html lang="en"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <title>banner轮播视频</title> <link rel="shortcut icon" href="#" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href="css/swiper.min.css" rel="stylesheet"></head><body> <div class="banner"> <div class="swiper-container"> <div class="swiper-wrApper"> <div class="swiper-slide"> <video type="video/mp4" width="100%" height="211" id="video-1" class="video" src="video/1.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()"></video> <div class="loading-box video-play" data-id="video-1"> <img class="video-img" alt="" src="img/1.jpg"> <img src="img/palying.png" alt="" class="palying-img"> <img src="img/load-c.png" alt="" class="loading-img"> </div> </div> <div class="swiper-slide"> <video type="video/mp4" width="100%" height="211" id="video-2" class="video" src="video/2.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()"></video> <div class="loading-box video-play" data-id="video-2"> <img class="video-img" alt="" src="img/2.jpg"> <img src="img/palying.png" alt="" class="palying-img"> <img src="img/load-c.png" alt="" class="loading-img"> </div> </div> </div> </div> </div> <script src="js/swiper.min.js"></script> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function() { // 设置swiper参数 var mySwiper = new Swiper('.swiper-container', { autoplay: 3000, // 3000 loop: true, // 循环模式选项 pagination: { el: '.swiper-pagination', }, onSlideChangeEnd: function() { removeLoading(); } }); $('.video-play').click(function(e) { $('.video').css('display', 'none'); var video = $(this).siblings('video.video'); video.css('display', 'block'); playVideo(mySwiper, video); }); }); // 全屏播放视频函数 function playVideo(mySwiper, video) { $('.loading-box').addClass('loading'); video[0].play(); // 监听播放状态 video.on('play', function() { mySwiper.stopAutoplay(); }); // 监听暂停状态 video.on('pause', function() { mySwiper.startAutoplay(); $('.video').css('display', 'none'); }); } function removeLoading() { $('.loading-box').removeClass('loading'); }</script></body></html>
3、第二种播放方式，html和js代码如下：
1）使用“webkitEnterFullScreen”全屏播放，兼容性比较好，可以在Android/ target=_blank class=infotextkey>安卓和苹果正常使用。
<!DOCTYPE html><html lang="en"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <title>banner轮播视频</title> <link rel="shortcut icon" href="#" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link href="css/swiper.min.css" rel="stylesheet"></head><body> <div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <video type="video/mp4" width="100%" height="211" id="video-1" class="video" src="video/1.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()" onwebkitfullscreenchange="fullScreenChange(event)"></video> <div class="loading-box video-play" data-id="video-1"> <img class="video-img" alt="" src="img/1.jpg"> <img src="img/palying.png" alt="" class="palying-img"> <img src="img/load-c.png" alt="" class="loading-img"> </div> </div> <div class="swiper-slide"> <video type="video/mp4" width="100%" height="211" id="video-2" class="video" src="video/2.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()" onwebkitfullscreenchange="fullScreenChange(event)"></video> <div class="loading-box video-play" data-id="video-2"> <img class="video-img" alt="" src="img/2.jpg"> <img src="img/palying.png" alt="" class="palying-img"> <img src="img/load-c.png" alt="" class="loading-img"> </div> </div> </div> </div> </div> <script src="js/swiper.min.js"></script> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function() { // 设置swiper参数 var mySwiper = new Swiper('.swiper-container', { autoplay: 3000, // 3000 loop: true, // 循环模式选项 pagination: { el: '.swiper-pagination', } }); $('.video-play').click(function(e) { var idName = e.currentTarget.dataset.id; $('#' + idName).css('display', 'block'); playVideo(idName); }); }); // 全屏播放视频函数 async function playVideo(idName) { $('.loading-box').addClass('loading'); var video = document.getElementById(idName); await video.play() video.webkitEnterFullScreen() } function removeLoading() { $('.loading-box').removeClass('loading'); } function fullScreenChange(e) { $('.loading-box').removeClass('loading'); var video = document.getElementById(e.target.id); if (!video.webkitDisplayingFullscreen) { video.pause(); $('.video').css('display', 'none'); } }</script></body></html>
