video标签全屏js

要将 video 标签全屏，可以使用 JavaScript 来实现。下面是一个示例代码：

// 获取 video 元素
var video = document.querySelector('video');

// 检查是否支持全屏 API
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.mozRequestFullScreen) { // Firefox
  video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
  video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { // IE/Edge
  video.msRequestFullscreen();
}

以上代码将会触发浏览器的全屏模式，并将 video 元素填充整个屏幕。请确保在页面加载完成后执行该代码，可以通过将代码放在 `window.onload` 或者其他适当的事件处理函数中来实现。

相关问题

js 监听video标签全屏

要在JavaScript中监听video标签的全屏事件，可以使用bindfullscreenchange属性来绑定一个事件处理函数。在该函数中，可以通过e.detail.fullScreen属性来获取当前是否进入了全屏模式。如果fullScreen的值为true，则表示进入了全屏模式；如果值为false，则表示退出了全屏模式。以下是一个示例代码：

screenChange(e) {
  let fullScreen = e.detail.fullScreen;
  if (fullScreen) {
    // 进入全屏模式的处理逻辑
    console.log("进入全屏");
  } else {
    // 退出全屏模式的处理逻辑
    console.log("退出全屏");
  }
}

// 在video标签上绑定bindfullscreenchange事件
<video class="my-video1" id="myVideo1" bindfullscreenchange="screenChange" src="{{ossPath+'video/dunhuang-video202201051033.mp4'}}" controls='controls'></video>

在上述代码中，通过在video标签上添加bindfullscreenchange属性，并将其值设置为screenChange，即可将screenChange函数与全屏事件进行绑定。当全屏状态发生改变时，该函数会被触发，并通过e.detail.fullScreen来获取当前的全屏状态。
#### 引用[.reference_title]
- *1* *2* *3* [video标签使用（全屏的进入和监听）](https://blog.csdn.net/ys_dd/article/details/122347988)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

html 中 video标签全屏

在HTML中，要使视频标签（<video>）全屏显示，可以使用以下方法之一：

1. 使用JavaScript实现点击事件使视频全屏播放：

<video loop onClick="javascript:clickVideo();" controls>
  <source src="" type="video/webm">
</video>
<script>
  function clickVideo() {
    var video = document.querySelector('video');
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
    } else if (video.webkitRequestFullScreen) {
      video.webkitRequestFullScreen();
    }
  }
</script>

2. 使用CSS样式让视频标签铺满父元素：

<div style="width: 100%; height: 100%;">
  <video controls style="width: 100%; height: 100%; object-fit: fill;">
    <source src="" type="video/webm">
  </video>
</div>

其中，关键是添加了`object-fit: fill;`的样式，它可以让视频内容拉伸以填充整个容器。