由于要使用videojs插件,所以需要引入video.js和css文件(自己从网上找)
- swiper轮播图的布局可以根据自己的喜好来排布。
- 当视频播放时停止轮播。播放完毕时开始轮播。
html:
<div class="last-swiper-container" id="last_page">
<div class="swiper-wrapper">
<div class="swiper-slide pic-slide slide1 last_slider">
<video id="my_video_1" class="playVideo playVideo1 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/Lingshan.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide2 last_slider">
<video id="my_video_2" class="playVideo playVideo2 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/xh.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide3 last_slider">
<video id="my_video_3" class="playVideo playVideo3 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/factory.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide4 last_slider">
<video id="my_video_4" class="playVideo playVideo4 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/wisdom.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide5 last_slider">
<video id="my_video_5" class="playVideo playVideo5 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/Tianjin.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide6 ">
<video id="my_video_6" class="playVideo playVideo6 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/rose.png">
<source src="视频链接">
</video>
</div>
</div>
<div class="swiper-button last-swiper-button-next">
<img src="图片链接">
</div>
<div class="swiper-button last-swiper-button-prev">
<img src="图片链接">
</div>
<div class="swiper_pagination last-swiper-pagination"></div>
</div>
scss:
#last_page{
height: 70%;
position: relative;
bottom: -10%;
margin: 40px auto;
padding-bottom: 45px;
// width: 100%;
.swiper-slide.pic-slide{
width: 50%;
overflow: hidden;
// display: table-cell;
text-align: center;
}
.pic-slide > img{
width: 100%;
vertical-align: middle;
}
.swiper_pagination{
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -60px;
}
.swiper-button{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 4%;
z-index: 20;
margin-top: -1%;
padding: 50px;
img{
width: 25%;
display: block;
}
}
.last-swiper-button-next{
right:14%;
}
.last-swiper-button-prev{
left: 17%;
}
.pic-slide .playBtn{
position: absolute;
top: 50%;
left: 50%;
margin-left: -4%;
margin-top: -4%;
z-index: 100;
width: 8%;
cursor: pointer;
}
}
.last_slider{
min-height: 300px;
}
.playVideo{
min-height: 300px;
}
#last_page_con{
padding-top: 60px;
.last_top{
width: 100%;
text-align: center;
margin: 0 auto;
.last_tit{
font-size: 34px;
margin-bottom: 14px;
font-weight: lighter;
color: #333333;
}
.last_line{
width: 44px;
height: 1px;
border-bottom: 2px solid #999;
display: inline-block;
text-align: center;
}
.last_desc{
height: 78px;
margin-top: 14px;
font-size: 16px;
width: 50%;
margin: 14px auto 0;
padding: 0px 5px;
line-height: 26px;
color: #666;
text-align: center;
font-weight: lighter;
}
}
}
.last-swiper-container .playVideo{
width: 100%;
}
.videoCon .vjs-poster{
background: none;
}
.video-js{
width: 100%;
}
.video-js .vjs-control-bar .vjs-volume-panel{
display: none;
opacity: 0;
}
.playVideo .video-js .vjs-big-play-button{
display: none;
}
.video-js .vjs-control-bar .vjs-play-control{
margin-top: 2px;
}
.video-js .vjs-control-bar .vjs-fullscreen-control{
margin-top: 3px;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
.swiper-slide .video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.5em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.09em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.swiper-slide .vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.swiper-slide .vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
js:
window.onload = function () {
// 获取轮播图片的宽度从而计算高度,
var lastWidth = $('#last_page .swiper-wrapper').width();
var swiperWidth = lastWidth * 0.5;
$('#last_page_con .swiper-slide').css('width',swiperWidth);
var swiperHeight = swiperWidth*9/16;
$(window).resize(function(){
lastWidth = $('#last_page .swiper-wrapper').width()
swiperWidth = lastWidth/2
swiperHeight = swiperWidth*9/16
$('.playVideo').css('height',swiperHeight)
$('#last_page .swiper-slide').css('height',swiperHeight)
})
$('.playVideo').css('height',swiperHeight)
$('#last_page .swiper-slide').css('height',swiperHeight)
$('.videoCon .vjs-big-play-button').css('display','none');
var $lastSwiper = new Swiper('.last-swiper-container',{
pagination : '.last-swiper-pagination',
autoplay: 2000,
autoplayDisableOnInteraction: false,
paginationClickable :true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: '7.5%',
loop: true,
nextButton: '.last-swiper-button-next',
prevButton: '.last-swiper-button-prev',
onSlideChangeEnd : function(e) {
if (e.activeIndex === 6 || e.activeIndex === 12) {
$('.last_desc').text('每一个轮播图所对应的文字');
e.slideTo(6,0,false);
e.startAutoplay();
$click = 0;
} else if (e.activeIndex === 7) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 1;
} else if (e.activeIndex === 8) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 2;
} else if (e.activeIndex === 9) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 3;
} else if (e.activeIndex === 10) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 4;
} else if (e.activeIndex === 5 || e.activeIndex === 11) {
$('.last_desc').text('每一个轮播图所对应的文字')
e.slideTo(11,0,false);
e.startAutoplay();
$click = 5;
}
videojs("my_video_1").pause();
videojs("my_video_1").currentTime(0);
videojs("my_video_2").pause();
videojs("my_video_2").currentTime(0);
videojs("my_video_3").pause();
videojs("my_video_3").currentTime(0);
videojs("my_video_4").pause();
videojs("my_video_4").currentTime(0);
videojs("my_video_5").pause();
videojs("my_video_5").currentTime(0);
videojs("my_video_6").pause();
videojs("my_video_6").currentTime(0);
}
})
$('#last_page').mouseenter(function(){
$lastSwiper.stopAutoplay();
})
videojs("my_video_1").on('play',function(){
$click = 0;
$lastSwiper.stopAutoplay();
});
videojs("my_video_2").on('play',function(){
$click = 1;
$lastSwiper.stopAutoplay();
});
videojs("my_video_3").on('play',function(){
$click = 2;
$lastSwiper.stopAutoplay();
});
videojs("my_video_4").on('play',function(){
$click = 3;
$lastSwiper.stopAutoplay();
});
videojs("my_video_5").on('play',function(){
$click = 4;
$lastSwiper.stopAutoplay();
});
videojs("my_video_6").on('play',function(){
$click = 5;
$lastSwiper.stopAutoplay();
});
var videoPanelMenu = $(".vjs-fullscreen-control");
videoPanelMenu.before('<div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">'
+ '<div class="vjs-menu" role="presentation">'
+ '<ul class="vjs-menu-content" role="menu">'
+ '<li class="vjs-menu-item vjs-menu-item2" tabindex="-1" role="menuitemcheckbox">高清 1080P</li>'
+ '<li class="vjs-menu-item vjs-menu-item1" tabindex="-1" role="menuitemcheckbox">标清 720P</li>'
+ '</ul></div>'
+' <button class="vjs-subs-caps-button vjs-control vjs-button" id="change_btn" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">'
+'标清</button>'
+'</div>'
);
var obj={tag:false,ctime:0};
window.obj=obj;
$('.vjs-menu-item1').click(function(){
changeVideo(1);
})
$('.vjs-menu-item2').click(function(){
changeVideo(2);
})
videojs("my_video_1").on("timeupdate", function(){
var myVideo = "my_video_1"
timeChange(myVideo);
});
videojs("my_video_1").on('ended',function(){
var myVideo = "my_video_1"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_2").on("timeupdate", function(){
var myVideo = "my_video_2"
timeChange(myVideo);
});
videojs("my_video_2").on('ended',function(){
var myVideo = "my_video_2"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_3").on("timeupdate", function(){
var myVideo = "my_video_3"
timeChange(myVideo);
});
videojs("my_video_3").on('ended',function(){
var myVideo = "my_video_3"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_4").on("timeupdate", function(){
var myVideo = "my_video_4"
timeChange(myVideo);
});
videojs("my_video_4").on('ended',function(){
var myVideo = "my_video_4"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_5").on("timeupdate", function(){
var myVideo = "my_video_5"
timeChange(myVideo);
});
videojs("my_video_5").on('ended',function(){
var myVideo = "my_video_5"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_6").on("timeupdate", function(){
var myVideo = "my_video_6"
timeChange(myVideo);
});
videojs("my_video_6").on('ended',function(){
var myVideo = "my_video_6"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
$('.H3_play_btn').click(function(){
$click = -1;
})
function styleFormat(num){
num = num + 1;
var playDoc = '.playBtn' + num;
var swiperImgDoc = '.swiperImg' + num;
var videoConDoc = '.videoCon' + num;
$(playDoc).css('display','none');
$(swiperImgDoc).css('display','none');
$(videoConDoc).css('display','block');
}
function changeVideo(type){
var my_video = "my_video_" + ($click+1);
var slide = '.slide' + ($click + 1);
var change_btn = slide + " #change_btn";
var ctime=videojs(my_video).currentTime();
if(type==1){
if ($click === 0) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 1) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 2) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 3) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 4) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 5) {
videojs(my_video).src([{src: "视频连接" }]);
}
$(change_btn).html('标清');
videojs(my_video).play();
}
if(type==2){
if ($click === 0) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 1) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 2) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 3) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 4) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 5) {
videojs(my_video).src([{src: "视频连接" }]);
}
$(change_btn).html('高清');
videojs(my_video).play();
}
window.obj.ctime=ctime;
window.obj.tag=true;
}
function timeChange (myVideo) {
if(window.obj.tag){
videojs(myVideo).currentTime(window.obj.ctime)
videojs(myVideo).play();
window.obj.tag=false;
}
}
function videoEnd (myVideo) {
var videoCon = ".videoCon" + ($click + 1);
var play_control = videoCon + " .vjs-play-control";
var control_text = videoCon + " .vjs-control-text";
}
}