WKWebView 上内嵌视频播放与原生全屏控制的完美结合

在 iOS 上的 WKWebView 中实现内联视频播放和原生全屏控制

前言

在 iOS 应用中集成视频播放是一项常见任务，但有时需要在内联播放和原生全屏控制之间进行权衡。内联播放 允许视频在 WebView 中播放，而原生全屏控制 提供了一个熟悉的全屏体验。本文将逐步介绍如何在 iOS 上的 WKWebView 中同时实现这两项功能。

配置 WKWebView

1. 将 WKWebViewConfiguration 的 allowsInlineMediaPlayback 属性设置为 true。这允许在 WebView 中播放视频。

添加视频元素

1. 在 HTML 页面中，添加 <video> 标签。
2. 添加 webkit-playsinline 属性，指示视频应在 WebView 中播放。
3. 添加 controls 属性以显示原生播放控制栏。

处理全屏控制

1. 使用 JavaScript 监听 webkitendfullscreen 事件。当视频退出全屏模式时触发此事件。
2. 在 webkitendfullscreen 事件处理程序中，将视频元素的大小设置为全屏（例如，使用 requestFullscreen() 方法）。

完整代码示例

<video webkit-playsinline controls>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
  const video = document.querySelector('video');

  video.addEventListener('webkitendfullscreen', () => {
    video.requestFullscreen();
  });
</script>

其他注意事项

1. 确保第三方视频播放器支持原生全屏控制。
2. 如果视频播放器使用自定义播放器，可能需要进行其他修改。

结论

通过遵循本文概述的步骤，你可以在 iOS 上的 WKWebView 中同时实现内联视频播放和原生全屏控制。这将提供一种流畅的视频观看体验，既可以在 WebView 内播放，又可以在全屏模式下获得沉浸式体验。

常见问题解答

1. 为什么在启用内联播放后会禁用原生全屏控制？

   • 这是 WKWebView 的默认行为。要启用原生全屏控制，需要在视频元素上添加 webkit-playsinline 属性。

2. 如何检测视频何时进入全屏模式？

   • 可以监听 webkitbeginfullscreen 事件。

3. 为什么我的视频在全屏模式下会切断？

   • 确保视频播放器的宽度和高度设置为 100%。

4. 如何在退出全屏模式后保持视频播放？

   • 在 webkitendfullscreen 事件处理程序中，将视频播放状态设置为 play。

5. 是否可以自定义全屏控制栏？

   • 可以，但需要使用自定义视频播放器并重写全屏控制栏。