CSS視屏點擊播放

<div class="video-box">
<video controls preload="none">
<source src="video.mp4" type="video/mp4">
</video>
<div class="play-btn"></div>
</div>

CSS中的transform屬性可以通過rotate，scale或translate改變元素的位置、大小或方向等。通過動態改變元素的transform屬性，可以實現視頻播放的動畫效果。

.video-box {
position: relative;
width: 640px;
height: 360px;
}
.video-box video {
width: 100%;
height: 100%;
}
.play-btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: url(play.png);
background-size: 100%;
cursor: pointer;
}
.played .play-btn {
display: none;
}
.played video {
transform: scale(1.05);
/* 視頻放大 */
}

JavaScript代碼實現：

var videoBox = document.querySelector('.video-box');
var playBtn = document.querySelector('.play-btn');
var video = document.querySelector('video');
playBtn.addEventListener('click', function() {
video.play();
videoBox.classList.add('played');
});
video.addEventListener('play', function() {
videoBox.classList.add('played');
});
video.addEventListener('pause', function() {
videoBox.classList.remove('played');
});
video.addEventListener('ended', function() {
videoBox.classList.remove('played');
});

以上就是CSS視頻點擊播放的實現方法，希望對大家有所幫助。