Html 视频标签无法在我的 Angular 应用程序中的 Safari 中播放

Posted

技术标签:

【中文标题】Html 视频标签无法在我的 Angular 应用程序中的 Safari 中播放【英文标题】:Html video tag doesn't play in Safari within my Angular app 【发布时间】:2019-02-23 08:39:00 【问题描述】:

我正在尝试在我的 Angular 应用程序中播放视频,它似乎可以在除 Safari 之外的所有浏览器中使用:

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

我已经看到了这个问题:html5 Video tag not working in Safari , iPhone and iPad,它并没有解决我的问题。

一开始是字节范围有问题,我修了,还是不行。

如果我将视频标签放在一个空的 html 网页中,视频会播放,但在我的 Angular 应用程序中它仍然没有。

我用fiddler获取http的踪迹,有些区别我不明白。

当我在一个空网页中有标签时,我有以下请求:

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

我可以看到几个不同范围的请求,并且视频播放。

但是当我尝试从我的 Angular 应用播放视频时,请求不同:

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

这次没有范围标头,所以我的服务器发送整个文件。而且它不播放。

我不知道是什么导致了这种差异。视频的 url 是相同的(尽管 html 网页位于不同的域中)。

【问题讨论】:

你确定这不是自动播放错误吗?同样的错误,只有controls 作为属性? 我可以点击“播放”按钮,但仍然无法播放视频 你好,@glacasa 我也有同样的问题。你有解决这个问题的办法吗? 不,抱歉 :( 我们不为 safari 用户播放视频... 你找到解决办法了吗? 【参考方案1】:

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

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

【讨论】:

【参考方案2】:

请尝试&lt;iframe&gt;

例子:

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

【讨论】:

【参考方案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);
  );

【讨论】:

以上是关于Html 视频标签无法在我的 Angular 应用程序中的 Safari 中播放的主要内容,如果未能解决你的问题,请参考以下文章

手机无法播放网页上embed标签的视频

Chrome 无法在重复标签上播放 html5 视频

我如何使用 HTML 视频标签在 asp.net 应用程序中播放 VLC 实时流媒体视频

检查 <video> 标签是不是可以显示媒体并处理 Angular 中的错误

资产规模是否会影响Angular7应用程序性能?

Ipad 无法在我的网络应用程序上同时播放音频和视频