时间戳

首页 > 解决方案 > 如何通过双击使视频全屏

javascript - 如何通过双击使视频全屏

问题描述

我正在构建一个项目，我需要网站中的视频自动播放，当用户单击视频时，它会暂停视频，并且视频上会出现暂停徽标。当用户双击视频时，它会扩展到全屏。我能够获得前两部分，但在双击时将视频扩展到全屏时失败了。而且我不知道出了什么问题..

js

var elem = document.getElementsByClassName("video");

$( document ).ready(function() {
    $(".playpause").fadeOut(); <!-- makes the play button fade out when autoplay starts when the website finished loading -->
});


$('.video').parent().click(function () {
  if($(this).children(".video").get(0).paused) {
    $(this).children(".video").get(0).play();
    $(this).children(".playpause").fadeOut();
  } else {
      $(this).children(".video").get(0).pause();
      $(this).children(".playpause").fadeIn();
  }
});

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

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrapper">
    <center><p>Introduction Video</p></center>
    <video class="video" autoplay>
      <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

谢谢！

标签： javascriptjqueryhtml

解决方案

getElementsByClassName返回一个集合，但您将返回的节点列表视为单个元素。因此，您的选择是分配索引 0 处的元素，或者选择返回单个元素的选择器。

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

或者：

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

或者更好的是，您可以使用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();
  }
});

推荐阅读