首页使用html和css在页面开始自动播放一个视频播放结束后视频消失

使用html和css在页面开始自动播放一个视频播放结束后视频消失

时间: 2024-03-18 22:42:38 浏览: 318

您好！要在页面开始自动播放一个视频，并在视频播放结束后自动消失，可以使用以下的 HTML 和 CSS 代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自动播放视频</title> <style> #video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 1s ease-in-out; } #video.hidden { opacity: 0; } </style> </head> <body> <video id="video" autoplay onended="hideVideo()"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser doesn't support HTML5 video. </video> <script> function hideVideo() { var video = document.getElementById('video'); video.classList.add('hidden'); video.pause(); } </script> </body> </html> ``` 在上面的代码中，我们首先定义了一个`<video>`元素，并设置它的`autoplay`属性为`true`，这样页面加载时视频就会自动播放。我们还在`<video>`元素中添加了两个`<source>`元素，分别指定了不同格式的视频文件，以便在不同的浏览器上播放。接着，我们定义了两个 CSS 样式，分别控制视频的显示和消失。`#video`样式设置了视频元素的位置、大小、透明度和过渡效果，`#video.hidden`样式将视频元素的透明度设置为0，从而将其隐藏。最后，我们在 JavaScript 中定义了一个`hideVideo()`函数，该函数将视频元素的`hidden`类添加到`<video>`元素，以触发 CSS 中设置的消失效果。该函数还使用`pause()`方法停止视频的播放。希望这能够帮助您！

阅读全文