Javascript 如何通过双击制作视频全屏

我正在建立一个项目，我需要在网站上的视频自动播放，当用户点击视频，它暂停视频和暂停标志将出现在视频。当用户双击视频时，它会扩展到全屏。我能够得到前两个部分，但在双击视频时无法将其扩展到全屏。我不知道出了什么问题

js

var elem=document.getElementsByClassName（“视频”）；
$（文档）.ready（函数（）{
$（“.playpause”）.fadeOut（）；
});
$（'.video'）.parent（）。单击（函数（）{
if（$（this）.children（“.video”）.get（0）.暂停）{
$（this.children（“.video”）.get（0.play（）；
$（this.children（“.playpause”）.fadeOut（）；
}否则{
$（this.children（“.video”）.get（0.pause（）；
$（this.children（“.playpause”）.fadeIn（）；
}
});
$（“.video”）.dblclick（函数（）{
if（元素请求全屏）{
元素请求全屏（）；
}else if（elem.mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（elem.webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}else if（elem.msRequestFullscreen）{
elem.msRequestFullscreen（）；
}
});

html

介绍视频

谢谢

这样试试

// Create fullscreen video button
function toggleFullscreen() {
 if (!document.webkitFullscreenElement) {
  if (video.requestFullScreen) {
   player.requestFullScreen();
  } else if (video.webkitRequestFullScreen) {
   player.webkitRequestFullScreen();
  } else if (video.mozRequestFullScreen) {
   player.mozRequestFullScreen();
  }
 } else {
  document.webkitExitFullscreen();
 }
}

video.addEventListener("dblclick", toggleFullscreen);

---

示例：

getElementsByClassName

返回集合，但将返回的节点列表视为单个元素。因此，您可以选择在索引0处指定元素，或者选择一个返回单个元素的选择器

var elem = document.getElementsByClassName("video")[0];

或：

或者更好的方法是使用

this

关键字返回目标元素，避免同时使用

elem

$(".video").dblclick(function() {
  if (this.requestFullscreen) {
    this.requestFullscreen();
  } 
  else if (this.mozRequestFullScreen) { 
    this.mozRequestFullScreen();
  } 
  else if (this.webkitRequestFullscreen) { 
    this.webkitRequestFullscreen();
  } 
  else if (this.msRequestFullscreen) { 
    this.msRequestFullscreen();
  }
});

var elem = document.getElementsByClassName("video")[0];

var elem = document.querySelector('.video');

$(".video").dblclick(function() {
  if (this.requestFullscreen) {
    this.requestFullscreen();
  } 
  else if (this.mozRequestFullScreen) { 
    this.mozRequestFullScreen();
  } 
  else if (this.webkitRequestFullscreen) { 
    this.webkitRequestFullscreen();
  } 
  else if (this.msRequestFullscreen) { 
    this.msRequestFullscreen();
  }
});