HTML5视频标签不能在 Safari，iPhone 和 iPad 上使用

只要添加一个 muted属性，一切都将正常工作。

答案的来源在这里: https://webkit.org/blog/6784/new-video-policies-for-ios/

默认情况下，WebKit 将采用以下策略:

对于满足以下条件的元素，<video autoplay>元素将尊重 autoplay 属性:

• 如果 <video>元素的源媒体不包含音轨，则允许在没有用户手势的情况下自动播放。
• <video muted>元素也将被允许在没有用户手势的情况下自动播放。
• 如果一个 <video>元素获得一个音频轨道或变得非静音没有用户手势，播放将暂停。
• <video autoplay>元素只有在屏幕上可见时才会开始播放，比如当它们滚动到视窗中，通过 CSS 显示并插入到 DOM 中时。
• 如果 <video autoplay>元素变得不可见，那么它们将暂停，比如滚出视窗。

<video>元素现在将遵守 play ()方法，对于满足以下条件的元素:

• 如果 <video>元素的源媒体不包含音频轨道，或者如果它们的静音属性设置为 true，则允许在没有用户手势的情况下播放()。
• 如果一个 <video>元素获得一个音频轨道或变得非静音没有用户手势，播放将暂停。
• <video>元素将被允许播放()时，不可见的屏幕上或当出了视口。
• Play ()将返回一个誓言，如果不满足这些条件中的任何一个，该誓言将被拒绝。

在 iPhone 上，<video playsinline>元素现在可以内联播放，播放开始时不会自动进入全屏模式。 没有 playsinline 属性的 <video>元素将继续需要全屏模式才能在 iPhone 上播放。 当退出与捏手势全屏幕，<video>元素没有播放线将继续发挥内联。

对我有帮助的是放下音轨。之前一片寂静，但必须彻底消失。

Ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

然后 Safari/桌面开始播放视频

我在苹果设备上也遇到过同样的问题，比如 iPhone 和 iPad，我关闭了低功耗模式，它还能工作，你还应该在视频标签中包含 playsinline属性，比如:

<video class="video-background" autoplay loop muted playsinline>

它只有在包含 playsinline时才能工作。

在 Iphone 和 Ipa 上添加“ playsinline”对我来说很管用，如果你不介意你的视频被静音的话。

<video muted playsinline>
<source src="..." type="video/mp4">
</video>

如果你不想你的视频被静音，但仍然想要自动播放，也许可以尝试删除静音属性与 js: 如何取消静音 html5视频与静音道具

通过使用这段代码视频将在所有浏览器中以及 ios 设备中播放... 大家都去吧(我已经使用过这段代码并且工作得很好)

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.webm" type="video/webm"></source>
<source src="video/video.mov" type="video/mov"></source>
</video>

对于 IOS，请只使用 mp4源文件。 我在最新的 safari 浏览器中发现了一个问题: safari 浏览器无法正确检测源文件，因此视频自动播放无法正常工作。

让我们检查下面的例子-

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.webm" type="video/webm"></source>
</video>

因为我在源文件中使用了 mp4，webm。Safari deosent 支持 webm，但是在最新的 Safari 版本中，它会选择 webm，而且视频自动播放失败。

因此，为了在支持的浏览器上进行自动播放，我建议首先检查浏览器，并基于此生成 html。

因此，对于狩猎，使用下面的 html。

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
</video>

除了狩猎之外,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.webm" type="video/webm"></source>
<source src="video/video.mp4" type="video/mp4"></source>
</video>

我有同样的问题-确保视频资产的网址是来自安全域。我们的开发环境是 http，而生产是安全的。由于视频是通过相对路径引用的，所以不能用于开发。看来苹果公司要求视频安全是个问题。

正在工作，但 MacO 最近有自动播放政策的用户: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/，我解决了同样的问题，使用一个按钮，以启用声音:

Ejm:

<video autoplay loop muted id="myVideo">
<source src="amazon.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos...
</video>


<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>


<script>
var vid = document.getElementById("myVideo");
function disableMute() {
vid.muted = false;
}
</script>

我也遇到过类似的问题，<video>标签中的视频只能在 Chrome 和 Firefox 上播放，而不能在 Safari 上播放。我是这么做的。

我发现了一个奇怪的技巧，就是在你的视频中有两个不同的引用，一个在 Chrome 和 Firefox 的 <video>标签中，另一个在 Safari 的 <img>标签中。有趣的是，在 Safari 上，视频确实是在 <img>标签中播放的。然后，编写一个简单的脚本，在某个浏览器正在使用时隐藏其中一个或另一个。例如:

<video id="video-tag" autoplay muted loop playsinline>
<source src="video.mp4" type="video/mp4" />
</video>
<img id="img-tag" src="video.mp4">


<script type="text/javascript">
function BrowserDetection() {


//Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
document.getElementById('video-tag').style.display= "none";
} else {
document.getElementById('img-tag').style.display= "none";
}


//And run the script. Note that the script tag needs to be run after HTML so where you place it is important.
BrowserDetection();
</script>

这也有助于解决某些浏览器上视频呈现不正确的黑框/边框过薄的问题。

对于我的用例，有 两件事:

1. 我没有使用 新属性/webkit 的策略 playsinline;
2. 我的 录像/默剧类型或其他什么没有正确编码，所以我需要 我用这个网站把它转换为所有格式: https://pt.converterpoint.com/

没有

我也遇到了同样的问题，我的 HTML 视频标签在 Chrome 和 Mozilla 上播放得很好，在 Safari 上——控件出现了，但是视频是空白的。我尝试使用上述所有属性，删除/添加静音，playsInline 等等，但都没有效果。这里描述的服务器也存在问题。我有这个-没有工作:

<video
muted
playsInline
controls
style=\{\{ width: `100%` }}>
<source src={MfMfVideo} type="video/mp4" />
<source src={MfMfVideoWebM} type="video/webm" />
</video>

我刚刚把我的视频转移到外部图书馆，我现在在 Safari 上很好，它工作得很好:

<video
muted
playsInline
controls
style=\{\{ width: `100%` }}>
<source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
<source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
Sorry, your browser doesn't support embedded videos.
</video>

除了把视频压缩到30mb 以下，其他的都不管用。虽然有效，但是压缩效果很差。

如果有人有同样的问题，我解决了它通过启用字节范围支持我的服务器。似乎 Safari 需要字节范围请求。在我的情况下，我使用 NGINX，我必须添加 proxy_force_ranges on;到我的配置文件。感谢 这个答案！

如果您在 REACT 中使用使用 playsInline，那么它将在所有 IOS 设备中工作

我知道这是一篇老文章，但是在不同的服务器环境下，这个问题似乎仍然会浮出水面。以上这些对我来说都不是解决办法。在我的案例中，它归结为网页优化和使用 gzip，或者更确切地说，需要禁用它的视频。

我把这个添加到我的 htaccess 文件，它照顾它。 SetEnvIfNoCase Request _ URI. (? : ogv | ogg | oga | m4v | mp4 | m4a | mov | mp3 | wav | webma? | webmv) $no-gzip 勿变

我已经在我的标签: control playsinline 上使用了这些属性

在同一个问题中工作几天(在检查“ playsinline”和“ autoplay”和“ muted”ok，“ mime-type”和“ range”在服务器 ok 等之后)。所有浏览器的解决方案是:

<video controls autoplay loop muted playsinline>
<source src="https://example.com/my_video.mov" type="video/mp4">
</video>

是: 转换视频到。 MOV 和类型 = “视频/mp4”在同一个标签。工作！

我也经历过。视频没有在我的 iphone 上显示... 我所做的是添加静音和预加载属性的视频元素。.成功了。

 <video width="250" muted preload="metadata">
<source  src="vid_3.mp4" type="video/mp4" />
</video>

在我的 iPhone10上，我关闭了低功耗模式并在 Chrome 上自动播放。

在 video标签上包含 playsinline属性。

我的问题是视频编码，我用 Fmpeg改变了它:

ffmpeg \
-i input.mp4 \
-vcodec libx264 \
-acodec aac output.mp4

相关阅读:

对于静态视频文件，使用 H.264编码的 MP4文件。

Apple.com: “为 Safari 提供视频内容”

添加这4个参数 自动播放循环静音播放线路，比如:

<video autoplay loop muted playsinline
style="width:100%;height:auto;max-width:100%;">

在视频标签，使它在 iOS 设备自动播放。

对于有人来到这里，使用 MediaSource Extension操作视频源。
并尝试了其他解决方案，但仍然没有工作。

我在 我能用 MSE 吗检查，发现原因是 IPhone 的 iOS 不支持 MSE(媒体源扩展)。 所以 MSE 不能在 iPhone 上工作。

来自 我能用 MSE 吗的图像

IPhone 的 iOS 最初支持 HLS(苹果的开发文档) , 所以你需要把 MP4转换成 HLS 格式。 (可使用 Bento4 HLS)
MP4格式必须 < a href = “ https://i.stack.imgur.com/KPmDx.png”rel = “ nofollow norefrer”> fMP4格式

转换之后，HLS 格式输出目录将如下所示

文件扩展名应该是 .m3u8，而 master.m3u8是一个描述视频全部信息的模板。

然后让 video 标记的 src 属性指向 HLS 资源的 URL (master.m3u8)。
比如这个示例代码

<video src="https://XXX/master.m3u8">
</video>

了解更多信息

看 这个链接

我昨天的完整解决方案包括几个很好的答案从这个问题加上另一篇博客文章。我会尝试编辑它。

前面

视频标签

• PlaysInline 属性有所不同

<video id='my-video' class='video-js' controls preload='auto' autoplay height="270" poster='img/logo_cathedra.png' playsInline type="video/mp4">

• WithCreentials 对于发送 cookie 有所不同(在我的例子中，是 JWT 标记)

var player = videojs('my-video');
...
window.addEventListener("load", () => {
player.src({
src: 'path-to-video',
type: 'video/mp4',
withCredentials: true
});
});

后端

• 向响应写入状态 206以及 字节范围和视频流所需的标头

Accept-Ranges: bytes
Connection: Keep-Alive
Content-Length: 1289232
Content-Range: bytes 0-1289231/1289232
Content-Type: video/mp4
Last-Modified: Sun, 06 Nov 2022 14:08:57 GMT

在我的情况下，我期望一个请求 Header WITH 或 WITHOUT 限制(范围右侧)。当右边没有提供时，我使用一个固定的块大小并计算 内容-长度和 内容范围

• 前女友使用 Chrome 浏览器

# REQUEST
Range: bytes=0-
...
# RESPOSE
Content-Length: 4096
Content-Range: bytes 0-4096/1289232

• 前女友用 Safari

# REQUEST
Range: bytes=0-1
...
# RESPOSE
Content-Length: 1
Content-Range: bytes 0-1/1289232

• 添加返回做响应头 Safari 发送播放 HTML5视频

X-Playback-Session-Id: someRandom.chars.like.uuid