写出判断刷新和打开html时播放视频,视频在网页内全屏播放,播放一遍完关闭隐藏的js代码
时间: 2024-03-23 20:39:42 浏览: 112
用JS判断浏览器刷新还是关闭
以下是一个示例代码,实现在刷新或打开 HTML 时播放视频,视频在网页内全屏播放,播放一遍完关闭并隐藏的 JS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>视频播放示例</title>
</head>
<body>
<video id="myVideo" width="100%" height="100%" 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);
// 判断是否是刷新或打开页面
if (performance.navigation.type == 1) {
// 是刷新或打开页面则播放视频
myVideo.play();
}
</script>
</body>
</html>
```
在这个示例中,我们使用了 `video` 标签来播放视频,使用了 `width` 和 `height` 属性来设置视频的宽度和高度为 100%。我们使用了 JavaScript 代码来处理视频播放结束事件 `ended`,在视频播放结束时关闭并隐藏视频。我们还使用了 `click` 事件来处理视频的全屏播放,使用了不同浏览器的前缀来兼容不同的浏览器。
在判断是否是刷新或打开页面时,我们使用了 `performance.navigation.type` 属性来获取页面加载类型,如果是 1 则表示是刷新或打开页面,此时我们就调用 `myVideo.play()` 方法来播放视频。
注意:在实际应用中,视频的播放和全屏播放可能会受到一些限制或需要用户的操作,例如自动播放可能会被浏览器禁止,全屏播放也可能需要用户的授权。
阅读全文