在banner轮播基础上实现播放视频功能

示例简介

本文介绍在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

标签:视频   兼容性   示例   样式   函数   加载   效果   代码   功能   方式   播放按钮

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号

Top