HTML5视频标签无法在iOS上使用（iPhone）

Question

上下文

我正在尝试在Edge浏览器中播放视频。 项目框架是
.NET 6 MVC和vue客户端
.NET 6 WebAPI服务器端

客户的VUE组件将与范围标头（1MB）一起发送请求，以请求零碎的MP4，并使用媒体源扩展（MSE）将arraybuffer附加到bloburl，指向video.src。

这样的

var mediaSource = new MediaSource;
mediaSource.addEventListener('sourceopen', sourceOpen);
video.src = URL.createObjectURL(mediaSource);

这种情况在Window的边缘效果很好，，但在 iPhone 上没有起作用（iPhone SE 的Edge浏览器测试）
视频标签不起作用，只显示一个空白页。
图片来自iPhone SE（边缘版本100.0.1185.50）

在Window的边缘版本100.0.1185.50
上正常工作 来自窗口10的图像

我尝试过的尝试解决方案

，我尝试添加playsInline prop prop prop prop op toide tag和 html5视频标签在Safari，iPhone和iPad中不起作用，但仍然没有起作用。

代码段

vue组件的方法是bellow的：

    /*
         * check the videoId is equal to course or not.
         * if not, fetch new video stream, and create blob url to this.videoUrl
         */
        async displayVideo() {
          if (this.videoId != this.course) {
            //common.loader.show("#255AC4", 1.5, "Loading...");
            this.videoId = this.course;
    
            let video = document.querySelector("video");
            let assetURL = FrontEndUrl + `/Stream/${this.videoId}`;
            let mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
            let sourceBuffer;
            let chunkSize;
            let contentRange;
            let loop;
            let index;
    
            const token = common.cookieManager.getCookieValue(`signin`);
    
            if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
              let mediaSource = new MediaSource;
              mediaSource.addEventListener('sourceopen', sourceOpen);
              video.src = URL.createObjectURL(mediaSource);
            } else {
              console.error('Unsupported MIME type or codec: ', mimeCodec);
            }
    
            function sourceOpen() {
              // chunkSize set to 1MB
              chunkSize = 1024 * 1024 * 1;
    
              // index set to 1 because the fetchNextSegment start from second fragment
              index = 1;
    
              // 取出 mediaSource 並且把sourceBuffer加上 updateend event
              let mediaSoruce = this;
              sourceBuffer = mediaSoruce.addSourceBuffer(mimeCodec);
              sourceBuffer.addEventListener("updateend", fetchNextSegment);
    
              fetchArrayBuffer(assetURL, chunkSize * 0, appendBuffer);
    
              // 
              

Answer 1

摘要

在我可以使用mse 中，发现原因是iPhone的 ios确实不支持MSE （媒体源扩展）。所以MSE不起作用。

来自我可以使用MSE
的图像

解决方案

iPhone的iOS支持 hls> hls> hls “ https://developer.apple.com/streaming/examples/” rel =“ nofollow noreferrer”> apple dev docs ），因此您需要将MP4转换为 hls 格式。 （可以使用 bento4 hls ）
）