Tôi hiện đang vật lộn với một cách để thay thế các biểu tượng phát / tạm dừng bằng văn bản trong khi vẫn duy trì hoạt hình chuyển đổi.
Tôi đang cố gắng hiểu chính xác mã JS nào đang hiển thị các biểu tượng và thứ hai xóa / ẩn chúng, để chúng có thể được thay thế bằng văn bản
Tôi vẫn là người mới bắt đầu với JS, bất kỳ trợ giúp nào cũng sẽ được đánh giá cao
var tl = new TimelineMax(),
$videoContainer = $('.cb-video-container'),
$video = $videoContainer.find('.video'),
$playPauseClickArea = $videoContainer.find('.play-pause--click-area'),
$playPauseContainer = $videoContainer.find('.play-pause--container'),
$playIcon = $videoContainer.find('.play-icon'),
$pauseIcon = $videoContainer.find('.pause-icon'),
iconIsToggled = false,
iconEase = Back.easeInOut.config(1.7),
iconDuration = 0.3;
setupVideo();
// functions
function setupVideo() {
TweenMax.set($pauseIcon, {
autoAlpha: 0,
scale: 0
});
TweenMax.set($playPauseClickArea, {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
})
};
function showPaused() {
iconIsToggled = true;
tl.play();
tl.to($playIcon, iconDuration, {
autoAlpha: 0,
scale: 0,
ease: iconEase
}, 0);
tl.to($pauseIcon, iconDuration, {
autoAlpha: 1,
scale: 1,
ease: iconEase
}, 0);
TweenMax.to($playPauseClickArea, iconDuration, {
backgroundColor: 'rgba(0, 0, 0, 0)'
}, 0)
console.log('playing - show pause');
$video.get(0).play();
}
function showPlay() {
iconIsToggled = false;
tl.reverse();
TweenMax.to($playPauseClickArea, iconDuration, {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
}, 0)
console.log('paused - show play');
$video.get(0).pause();
}
// event handlers
$playPauseClickArea.on('click', function() {
!iconIsToggled ? showPaused() : showPlay();
});
$playPauseClickArea.on('mouseleave', function() {
if (iconIsToggled === true) TweenMax.to($playPauseContainer, iconDuration, {
autoAlpha: 0
}, 0);
console.log('mouseleave');
});
$playPauseClickArea.on('mouseenter', function() {
TweenMax.to($playPauseContainer, iconDuration, {
autoAlpha: 1
}, 0);
console.log('mouseenter');
});
$video.on('ended', function() {
// TODO: showReplay()
console.log('video ended')
});* {
color: #fff;
}
.cb-video-container {
position: relative;
padding: 0;
}
.video {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.play-pause--click-area {
width: 100%;
height: 100%;
top: 0;
position: absolute;
}
.play-pause--container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
}
.play-pause--container .play-pause--icon {
margin: auto;
right: 0;
left: 0;
position: absolute;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.play-pause--container .play-icon {
width: 0;
height: 0;
border: 0 solid transparent;
border-bottom-width: 15px;
border-top-width: 15px;
border-left: 25px solid #fff;
}
.play-pause--container .play-icon:after {
content: 'Play';
font-size: 2.2rem;
line-height: 0.3;
background: inherit;
width: 10px;
height: 30px;
left: 15px;
position: absolute;
}
.play-pause--container .pause-icon {
background-color: #fff;
width: 10px;
height: 30px;
left: -10px;
position: absolute;
}
.play-pause--container .pause-icon:after {
content: 'Pause';
font-size: 2.2rem;
line-height: 1.2;
background: inherit;
width: 10px;
height: 30px;
left: 15px;
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="cb-video-container">
<video loop class="video" preload="auto">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
<div class="play-pause--click-area">
<div class="play-pause--container center-xy">
<div class="play-pause--icon play-icon"></div>
<div class="play-pause--icon pause-icon"></div>
</div>
</div>
</div>