首页html video播放结束自动隐藏

html video播放结束自动隐藏

时间: 2023-09-10 09:06:23 浏览: 271

可以使用JavaScript来实现视频播放结束后自动隐藏的效果。具体实现方法如下： 1. 在HTML文件中添加一个video标签，设置宽度、高度、视频地址等属性。 ```html <video id="myVideo" width="640" height="360" controls> <source src="myVideo.mp4" type="video/mp4"> </video> ``` 2. 在JavaScript文件中获取video元素，并为其添加ended事件监听器。 ```javascript const video = document.getElementById("myVideo"); video.addEventListener("ended", hideVideo); function hideVideo() { video.style.display = "none"; } ``` 3. 当视频播放结束时，调用hideVideo函数，将视频的display属性设置为none，即可实现自动隐藏效果。完整代码如下： ```html <!DOCTYPE html> <html> <head> <title>HTML Video播放结束自动隐藏</title> </head> <body> <video id="myVideo" width="640" height="360" controls> <source src="myVideo.mp4" type="video/mp4"> </video> <script> const video = document.getElementById("myVideo"); video.addEventListener("ended", hideVideo); function hideVideo() { video.style.display = "none"; } </script> </body> </html> ```

阅读全文