实现H5 Video的全屏播放功能

在HTML5中，我们可以使用video标签来播放视频。然而，直接使用video标签的全屏播放功能可能无法满足我们的需求，因为浏览器可能会在全屏模式下显示视频的默认界面，而不是我们自定义的界面。为了解决这个问题，我们可以使用WebChromeClient的onShowCustomView()和onHideCustomView()方法来实现全屏播放和退出全屏播放的功能。

首先，我们需要创建一个video标签和一个用于全屏播放的自定义视图。在HTML文件中，我们可以添加以下代码：

<video id="myVideo" src="myVideo.mp4" controls></video>
<div id="customView" style="display: none;"></div>

然后，在JavaScript文件中，我们可以添加以下代码：

var video = document.getElementById('myVideo');
var customView = document.getElementById('customView');
video.addEventListener('click', function() {
  // 显示全屏播放按钮
  var fullscreenButton = document.createElement('button');
  fullscreenButton.textContent = '全屏播放';
  document.body.appendChild(fullscreenButton);
  // 全屏播放按钮点击事件
  fullscreenButton.addEventListener('click', function() {
    // 隐藏video标签和自定义视图，将它们放入一个容器中
    var container = document.createElement('div');
    container.appendChild(video);
    container.appendChild(customView);
    document.body.appendChild(container);
    // 显示全屏播放界面
    WebAppBar.show();
    customView.style.display = 'block';
    video.play();
  });
  // 退出全屏播放按钮点击事件
  customView.addEventListener('click', function() {
    // 隐藏全屏播放界面和全屏播放按钮，显示video标签和自定义视图，将它们从容器中移除
    WebAppBar.hide();
    customView.style.display = 'none';
    video.pause();
    var container = document.querySelector('div');
    if (container) {
      document.body.removeChild(container);
    }
  });
});

这段代码将创建一个全屏播放按钮，当用户点击这个按钮时，它将隐藏video标签和自定义视图，将它们放入一个容器中，并显示全屏播放界面。当用户点击全屏播放界面的任何位置时，它将隐藏全屏播放界面和全屏播放按钮，显示video标签和自定义视图，并从容器中移除它们。在全屏播放模式下，用户可以使用JavaScript来控制视频的播放和暂停。注意，这个示例代码使用了WebAppBar对象来显示和隐藏全屏播放界面，你可能需要根据你的具体需求来修改这个对象。