HTML5实现微信播放全屏的方法详解

关于微信播放全屏

微信作为国内最大的社交软件之一，人流量巨大。而其中最常用的功能是音视频播放。但是在默认情况下，微信的视频播放只能在小窗口播放，用户无法将其全屏观看。那么在这种情况下，如何实现微信中的全屏播放呢？本文将为大家详细介绍HTML5实现微信全屏播放的具体方法。

1.全屏样式设计

<!-- 全屏样式 -->
<style>
  .video{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background-color:#000;
    z-index:9999;
  }
  video{
    object-fit:fill;
    width:100%;
    height:100%;
  }
</style>

实现全屏需要定义一个样式，使用position:fixed将其固定到屏幕的左上角，并设置宽高以及背景色。video设置object-fit:fill，以充满整个屏幕。

2.全屏显示代码实现

<!-- 视频播放 -->
<video src="video.mp4" poster="poster.jpg" preload="auto" controls></video>

<!-- 全屏显示 -->
<div id="fullScreen" class="video" style="display:none">
  <video src="video.mp4" poster="poster.jpg" preload="auto" controls></video>
  <div class="close">关闭</div>
</div>

在页面中，我们首先要先定义一个video标签，并添加src、poster、preload和controls属性，为视频提供播放地址、预览图片、自动加载和控制栏。然后，在需要显示全屏的情况下，我们通过添加一个具有.video样式的div来实现。在这个div中，我们再添加一个video标签用于显示视频，控制栏等。此外，我们也在div中添加一个关闭按钮，以便用户在观看结束后关闭视频。

3.全屏播放 JS 实现

//获取视频对象
var videoObj=document.getElementsByTagName("video")[0];

//全屏播放
videoObj.addEventListener("click",function(){
  this.webkitRequestFullScreen();
  var fullScreenDiv=document.getElementById("fullScreen");
  fullScreenDiv.style.display="block";
},false);

//全屏关闭
var closeBtn=document.getElementsByClassName("close")[0];
closeBtn.addEventListener("click",function(){
  document.webkitCancelFullScreen();
  var fullScreenDiv=document.getElementById("fullScreen");
  fullScreenDiv.style.display="none";
},false);

现在我们已经有了video标签和具有.video样式的div，接下来需要使用JS来实现全屏播放和关闭。在这里我们使用了webkitRequestFullScreen()方法来实现视频全屏播放。同时，我们监听video对象的点击事件，当用户单击video播放时，就会将其全屏显示。当我们需要手动关闭全屏时，也可以使用webkitCancelFullScreen()方法实现。并且通过添加一个具有.close样式的div来实现，用户可以点击关闭按钮来退出全屏播放界面。

4.总结

我们使用HTML5实现了在微信中的全屏播放功能。其中主要包括全屏样式设计、全屏显示代码实现以及全屏播放JS实现。通过这些步骤，用户在观看视频的过程中可以获得更好的视觉享受，同时也带来更好的用户体验。