<video id="openAnimal" controls muted> <source src="./开场.mp4" type="video/mp4"> </video>js如何判断video是否加载完成
时间: 2023-10-05 12:04:17 浏览: 46
可以使用video元素的`loadeddata`事件来判断视频是否已经加载完成。当视频的第一帧已经加载完成并可以播放时,该事件会被触发。可以使用以下代码来判断视频是否已经加载完成:
```javascript
const video = document.getElementById('openAnimal');
video.addEventListener('loadeddata', () => {
console.log('视频已加载完成!');
});
```
当视频加载完成时,`console.log`会打印出"视频已加载完成!"。
相关问题
<div id="divAN"> <video id="openAnimal" controls muted autoplay > <source src="./开场.mp4" type="video/mp4"> </video> </div>如何不显示博凡控件
如果想要不显示博凡控件,可以通过CSS样式来实现。可以给video标签和其父元素设置CSS样式,将博凡控件隐藏。
以下是示例代码:
HTML代码:
```
<div id="divAN">
<video id="openAnimal" controls muted autoplay>
<source src="./开场.mp4" type="video/mp4">
</video>
</div>
```
CSS代码:
```
#divAN {
position: relative;
}
#openAnimal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
```
在上面的代码中,给video标签的父元素设置了position: relative;属性,给video标签设置了position: absolute;、top: 0;、left: 0;、width: 100%;、height: 100%;、object-fit: cover;属性。这样就可以将博凡控件隐藏,并且让视频全屏播放。
<div id="divAN"> <video id="openAnimal" controls muted autoplay> <source src="./开场.mp4" type="video/mp4"> </video> </div>如何让video标签默认不播放
可以在video标签中去掉autoplay属性,这样视频就不会在页面加载时自动播放。可以通过点击播放按钮或者调用play()方法来手动触发视频播放。
以下是示例代码:
HTML代码:
```
<div id="divAN">
<video id="openAnimal" controls muted>
<source src="./开场.mp4" type="video/mp4">
</video>
</div>
```
在上面的代码中,去掉了autoplay属性,这样视频默认不会自动播放。同时保留了controls属性,这样可以显示播放控件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<title>更新汽车等级</title> <body> <main> 修改汽车等级 <form id="saveForm"> <input type="hidden" name="id" value="${data.id }"> <label>汽车等级</label> <input type="text" name="cname" value="${data.cname }" class="form-control"> </form> <button type="button" id="save" class="btn btn-primary">确定提交</button> 返回 </main> </main> <script> $("#save").click(function() { $.ajax({ cache : true, type : "post", url : "CategoryServlet?action=updateCategory", data : $("#saveForm").serialize(), async : false, success : function(e) { if (e == 'yes') { alert("修改成功!"); window.parent.location.href = "CategoryServlet?action=CategoryList"; } else { alert("修改失败!"); } } }) }); </script> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)