写出判断刷新和打开html时播放视频,视频全屏播放,播放一遍完关闭隐藏的js代码
时间: 2024-03-23 21:39:39 浏览: 142
以下是一个简单的示例代码,实现了在刷新或打开 HTML 时播放视频,视频全屏播放,播放一遍完关闭并隐藏的 JS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>视频播放示例</title>
</head>
<body>
<video id="myVideo" controls autoplay>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var myVideo = document.getElementById("myVideo");
myVideo.addEventListener('ended', function() {
myVideo.style.display = 'none';
}, false);
myVideo.addEventListener('click', function() {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
} else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
} else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
} else if (myVideo.webkitRequestFullscreen) {
myVideo.webkitRequestFullscreen();
}
}, false);
</script>
</body>
</html>
```
在这个示例中,我们使用了 `video` 标签来播放视频,并为其添加了 `controls` 和 `autoplay` 属性,分别用于显示控制条和自动播放。我们使用了 JavaScript 代码来处理视频播放结束事件 `ended`,在视频播放结束时关闭并隐藏视频。我们还使用了 `click` 事件来处理视频的全屏播放,使用了不同浏览器的前缀来兼容不同的浏览器。
注意:在实际应用中,视频的播放和全屏播放可能会受到一些限制或需要用户的操作,例如自动播放可能会被浏览器禁止,全屏播放也可能需要用户的授权。
阅读全文