HTML5 视频标签在 Safari、iPhone 和 iPad 中不起作用 [英] HTML5 Video tag not working in Safari , iPhone and iPad

问题描述

我正在尝试创建一个 html5 网页，其中有一个像 13s 这样的小视频，我将此视频的 Flash 版本转换为 3 种格式:使用 fireFogg 的 .ogv、使用 firefogg 的 .webm 和使用 HandBrake 应用程序的 .mp4我在页面中使用的 html 脚本:

视频在 Chrome 和 FireFox 中运行良好，但在桌面版 Safari 和 iPhone 或 iPad 上都无法正常工作，输出只是一个空白页面，显示视频标签的控件，但没有加载任何内容

请注意，我拥有的 Safari 版本支持 HTML5 视频

解决方案

我在 iPhone 和 iPad 等苹果设备上遇到了同样的问题，我关闭了低功耗模式并且它工作了，你还应该包括 playsinline 属性如下:

它仅在包含 playsinline 时有效.

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4 using HandBrake application the html script I used in my page :

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

The video is working fine in Chrome and FireFox but not working at all neither in Safari on Desktop nor on iPhone or iPad , the output is simply a blank page that shows the controls of the the video tag but nothing is loaded

Note that the Safari version that I have supports HTML5 video

解决方案

I had same issue with apple devices like iPhone and iPad, I turned off the low power mode and it worked and you should also include playsinline attribute in video tag like this:

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

It only worked when including playsinline.

这篇关于HTML5 视频标签在 Safari、iPhone 和 iPad 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！