Html video tag doesn't play in Safari within my Angular app

Question

I am trying to play a video in my angular app, and it seems to work in every browser except with Safari :

<video controls autoplay muted class="media">
    <source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>

I have seen this questions : HTML5 Video tag not working in Safari , iPhone and iPad, and it doesn't solve my problem.

At first, I had the problem with the byte range, I fixed it, and it still doesn't work.

If I put the video tag in an empty html webpage, the video plays, but in my angular app it still doesn't.

I used fiddler to get the http traces, and there are differences I don't understand.

When I have the tag in an empty web page, I have the following request :

GET https://my-site/files/video.mp4 HTTP/1.1
Host: (my-site)
Accept-Encoding: identity
X-Playback-Session-Id: 14692D0E-A88B-4253-8B8A-BC580AB82174
Accept-Language: fr-fr
Range: bytes=0-1
Accept: */*
User-Agent: Mozilla/5.0 (iPod touch; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
Referer: (http://my-site/)
DNT: 1
Connection: keep-alive

I can see several requests with different ranges, and the video plays.

But when I try to play the video from my Angular app, the request is different :

GET https://my-site/files/video.mp4 HTTP/1.1
Host: (my-site)
Connection: keep-alive
Accept: */*
User-Agent: Mozilla/5.0 (iPod touch; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
Accept-Language: fr-fr
Referer: (http://my-site/)
Accept-Encoding: br, gzip, deflate

This time there is no range header, so my server sends the whole file. And it doesnt play.

I have no idea what can cause this difference. The url of the video is the same (although the html webpage is on a different domain).

Answer 1

您是否尝试过添加playsinline属性？

<video controls autoplay playsinline muted class="media">
    <source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>

Answer 2

请尝试<iframe>

示例：

<iframe title="vimeo-player" src="https://player.vimeo.com/video/336853299" width="640" height="360" frameborder="0" allowfullscreen></iframe>

Answer 3

您的Mp4可能需要使用h264编解码器进行转换。 Mp4具有不同类型的编解码器，而Safari不支持所有编解码器，因为我认为许可证问题。 在nodejs中进行转换的代码

const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
ffmpeg.setFfmpegPath(ffmpegPath);


function convertFile(input, output, size) {
  return new Promise((resolve, reject) => {
    console.log("Entering converting file: " + size);
    ffmpeg(input)
      .format("mp4")
      .videoCodec("libx264")
      .size(size)
      .on('error', (err) => {
        console.log("Error in converting file");
        reject(err);
      })
      .on('end', () => {
        console.log("Success in converting file");
        resolve(output);
      }).saveToFile(output);
  });
}