Ionic 6 + Angular：iOS应用构建中video标签失效问题及替代方案咨询

针对你遇到的HTML5 Video在iOS应用构建中无法正常工作的问题，以下是几种可行的替代方案：

1. 混合开发框架原生视频组件（Cordova/React Native） #

如果你的项目基于混合开发框架，直接使用对应框架的原生视频组件能更好适配iOS的播放规则：

Cordova 方案 #

使用cordova-plugin-video-player插件实现原生播放：

# 安装插件
cordova plugin add cordova-plugin-video-player

在JS中调用播放：

// 静音+循环播放配置
VideoPlayer.play("file:///android_asset/www/assets/videos/video-ref.mp4", {
  volume: 0.0,
  loop: true
});

React Native 方案 #

使用react-native-video库，它完全适配iOS原生播放逻辑：

import Video from 'react-native-video';

function VideoPlayer() {
  return (
    <Video
      source={{ uri: require('./assets/videos/video-ref.mp4') }}
      style={{ width: '100%', height: 'auto' }}
      muted={true}
      repeat={true}
      poster={require('./assets/images/video-default-background.png')}
      autoPlay={true}
    />
  );
}

2. WebView桥接原生播放 #

如果你的内容是通过WebView加载的HTML，可以通过JS桥接调用iOS原生播放器：

iOS 原生Swift代码（WKWebView配置） #

import UIKit
import WebKit
import AVKit

class WebVideoViewController: UIViewController, WKScriptMessageHandler {
    private var webView: WKWebView!
    private var player: AVPlayer?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
    }

    private func setupWebView() {
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "triggerNativeVideo")
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        // 加载本地HTML文件
        if let htmlURL = Bundle.main.url(forResource: "index", withExtension: "html") {
            webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "triggerNativeVideo", let videoPath = message.body as? String else { return }
        guard let videoURL = Bundle.main.url(forResource: videoPath, withExtension: "mp4") else { return }
        
        // 初始化原生播放器
        player = AVPlayer(url: videoURL)
        player?.isMuted = true
        player?.actionAtItemEnd = .none
        
        // 设置循环播放
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(restartVideo),
            name: .AVPlayerItemDidPlayToEndTime,
            object: player?.currentItem
        )
        
        // 弹出播放器并播放
        let playerVC = AVPlayerViewController()
        playerVC.player = player
        present(playerVC, animated: true) {
            self.player?.play()
        }
    }

    @objc private func restartVideo(notification: NSNotification) {
        player?.currentItem?.seek(to: .zero)
        player?.play()
    }
}

HTML中调用桥接方法 #

<!-- 用海报图触发播放 -->
<div style="width:100%;height:auto;" onclick="window.webkit.messageHandlers.triggerNativeVideo.postMessage('assets/videos/video-ref')">
    <img src="/assets/images/video-default-background.png" style="width:100%;height:auto;" />
</div>

3. 调整HTML5 Video配置适配iOS（非完全替代，但可尝试修复） #

如果仍想使用HTML5 Video，补充iOS特定属性可能解决问题：

<video
    width="100%"
    height="auto"
    muted
    autoplay
    loop
    playsinline
    poster="/assets/images/video-default-background.png"
>
    <source src="/assets/videos/video-ref.mp4" type="video/mp4" />
</video>

添加playsinline属性允许视频在WebView内联播放（iOS默认会全屏），同时确保视频编码符合iOS兼容标准（H.264 baseline profile，分辨率≤1080p）。

内容的提问来源于stack exchange，提问作者Aastha B