本文介绍在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”来控制轮播或暂停轮播,增加体验。
banner轮播视频
3、第二种播放方式,html和js代码如下:
1)使用“webkitEnterFullScreen”全屏播放,兼容性比较好,可以在安卓和苹果正常使用。
banner轮播视频
页面更新:2024-03-14
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号