jquery video全屏_请问，怎么用JQuery监听html5 中video 标签的全屏按钮？

可以使用以下代码来监听video标签的全屏按钮：

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
  var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
  var event = state ? 'FullscreenOn' : 'FullscreenOff';
  // 触发自定义事件
  $(this).trigger(event);
});

这段代码监听了三种全屏事件，分别是webkitfullscreenchange、mozfullscreenchange和fullscreenchange。当任意一个事件触发时，会获取当前的全屏状态，并根据状态触发自定义的FullscreenOn或FullscreenOff事件。

你可以在FullscreenOn或FullscreenOff事件的回调函数中执行你需要的操作。

相关问题

以下用jQuery和 原生监听fullscreenchange事件，为什么elvideo视频在jQuery中没暂停，在原生中暂停 const elvideo = $(`${data_taskId} video`)[0] $(document) .off('fullscreenchange') .on('fullscreenchange', () => { if (!checkIsFullScreen()) { console.log('退出全屏') console.log(elvideo) elvideo.pause() $(`${data_taskId} video`).attr({ controls: false }) $(`${data_taskId} .play`).show() $(`${data_taskId} span`).show() } }) document.addEventListener('fullscreenchange', () => { if (!checkIsFullScreen()) { console.log('退出全屏') console.log(elvideo) elvideo.pause() $(`${data_taskId} video`).attr({ controls: false }) $(`${data_taskId} .play`).show() $(`${data_taskId} span`).show() } })

在jQuery中，`elvideo` 是一个 jQuery 对象，通过索引 `[0]` 可以获取到原生的 DOM 元素。所以在 `elvideo.pause()` 的调用中是有效的。

而在原生监听中，`elvideo` 是直接通过原生 DOM 方法获取的，不是 jQuery 对象。所以在 `elvideo.pause()` 的调用中是有效的。

可能的原因是在 jQuery 中，`elvideo` 是一个 jQuery 对象，调用 `pause()` 方法时会被 jQuery 内部处理并转发给原生 DOM 元素，所以视频会暂停。而在原生监听中，`elvideo` 是直接的 DOM 元素，所以可以直接调用 `pause()` 方法。

如果你希望在 jQuery 中也能暂停视频，可以尝试使用 `elvideo.get(0).pause()` 来调用原生的 `pause()` 方法。这样可以确保在 jQuery 中也能正确暂停视频。

jq 触发video全屏

在JavaScript库jQuery中，你可以使用`trigger()`方法以及自定义事件来模拟视频的全屏切换。假设你有一个HTML元素，代表一个video播放器，你可以这样做：

// 获取video元素
var videoElement = $('#your-video-id');

// 定义一个自定义事件名，比如"enterFullScreen"
var enterFullScreenEvent = 'enterFullScreen';

// 当需要触发全屏时
function enterFullScreen() {
  // 先检查当前是否已经是全屏状态
  if (!isVideoInFullscreen(videoElement.get(0))) {
    // 如果不是，进入全屏模式
    videoElement[0].requestFullscreen();
  } else {
    // 否则，退出全屏模式
    exitFullscreen(videoElement.get(0));
  }

  // 触发自定义事件
  videoElement.trigger(enterFullScreenEvent);
}

// 模拟视频全屏状态改变的函数
function isVideoInFullscreen(element) {
  return element === document.fullscreenElement ||
         element === document.mozFullScreenElement ||
         element === document.webkitFullscreenElement;
}

// 然后，当你想要让用户觉得视频进入了全屏，就调用enterFullScreen()函数
enterFullScreen();

// 监听自定义事件
videoElement.on(enterFullScreenEvent, function() {
  console.log('Video entered full screen.');
});