Spaces:

miniwhite
/

video-vortex-showcase

Running

App Files Files Community

video-vortex-showcase

23.4 kB

1 contributor

History: 8 commits

miniwhite's picture

视频封面整个区域都可以进行点击播放，视频列表中视频详情有点赞功能

60a46cc verified 21 days ago

components
视频封面整个区域都可以进行点击播放，视频列表中视频详情有点赞功能 21 days ago
.gitattributes

1.52 kB

initial commit 21 days ago
README.md

251 Bytes

我有500多个视频作品要在页面上进行展示，一页展示10个作品，下滑屏幕展示更多页的数据，视频作品有封面图，视频有横屏视频，有竖屏视频，每个视频有用户点赞量，点击视频封面在当期页面弹层进行播放视频，给我设计一个视频展示H5页面 21 days ago
index.html

1.53 kB

`; } } customElements.define('custom-navbar', CustomNavbar); `; const playButton = this.shadowRoot.getElementById('play-button'); playButton.addEventListener('click', () => { const videoPlayer = document.querySelector('custom-video-player'); if (videoPlayer) { videoPlayer.playVideo(videoUrl); } }); } } customElements.define('custom-video-card', CustomVideoCard); `; const modal = this.shadowRoot.querySelector('.video-player-modal'); const videoElement = this.shadowRoot.getElementById('video-element'); const closeButton = this.shadowRoot.getElementById('close-player'); closeButton.addEventListener('click', () => { modal.classList.remove('active'); videoElement.pause(); videoElement.currentTime = 0; }); // Expose playVideo method to be called from outside this.playVideo = (videoUrl) => { videoElement.src = videoUrl; modal.classList.add('active'); videoElement.play(); }; } } customElements.define('custom-video-player', CustomVideoPlayer); 21 days ago
script.js

5.93 kB

视频封面整个区域都可以进行点击播放，视频列表中视频详情有点赞功能 21 days ago
style.css

1.9 kB

视频封面整个区域都可以进行点击播放，视频列表中视频详情有点赞功能 21 days ago