HTML5video标记在Safari,iPhone和iPad中不起作用

我试图创build一个html5的网页,其中有一个像13s小video,我把这个video的Flash版本转换为3格式:.ogv使用fireFogg,.webm使用firefogg也和.mp4使用HandBrake应用程序的HTML脚本我在我的页面中使用:

<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> 

该video在Chrome和FireFox中运行良好,但在桌面Safari或iPhone或iPad上均不工作,输出只是一个空白页面,显示video标签的控件,但没有加载

请注意,我已经支持HTML5video的Safari版本

未来的search者的另一个可能的解决scheme:(如果你的问题不是一个MIMEtypes的问题。)

由于某些原因,video不能在iPad上播放,除非我设置控件=“真”标志。

例如:这在iPhone上适用于我,但不适用于iPad。

 <video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video> 

这现在适用于iPad和iPhone:

 <video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video> 

您的Web服务器可能不支持HTTP字节范围请求。 这是我使用的Web服务器的情况,结果是video部件加载和一个播放button出现,但点击button不起作用。 – video在FF和Chrome中运行,但不在iPhone或iPad上运行。

有关字节范围请求,请参阅mobiforge.com上的更多内容,请参阅 附录A:适用于Apple iPhone的Streaming

首先,Safari浏览器请求内容,如果是audio或video文件,则打开它的媒体播放器。 媒体播放器然后请求内容的前2个字节,以确保Web服务器支持字节范围请求。 然后,如果它支持,iPhone的媒体播放器按字节范围请求剩下的内容并播放它。

您可能需要在网页上search“iphone mp4 byte-range”。

如果您的video受基于会话的login系统的保护,Safari将无法加载它们。 这是因为Safari会对video进行初始请求,然后将任务交给QuickTime,从而产生另一个请求。 由于Safari持有会话信息,它将通过身份validation,但QuickTime不会。

你可以看到这个,如果你查看你的服务器访问日志…首先来自Safari的请求,然后从QuickTime的请求。 其他浏览器只是从浏览器本身提出一个请求。

如果这是您的问题,那么您可能必须重新将video访问权限用于使用临时令牌或从原始请求中进行有限的时间访问。 如果我find更直接的解决scheme,我会更新这个答案。

对于未来的search,我也有一个mp4文件,我使用handbrake-gtkapt-get缩减了Handbrake,例如sudo apt-get install handbrake-gtk 。 在Ubuntu 14.04中, handbrake信息库不包括对开箱即用的MP4的支持。 我离开了默认设置,将音轨剥离出来,并生成* .M4V文件。 对于那些想知道的,他们是相同的容器,但M4V主要用于在iOS上打开在iTunes中。

这适用于除Safari之外的所有浏览器:

 <video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png"> <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4"> <source src="//cdn.foo.com/bar-video.webm" type="video/webm"> </video> 

我改变了video/mp4video/m4v之间的mimetypes,没有任何效果。 我也testing添加control属性,并再次没有效果。

这在所有testing的浏览器中都有效,包括Mavericks上的Safari 7和Yosemite上的Safari 8。 我只是将相同的m4v文件(实际的文件,不仅仅是HTML)重新命名为mp4并重新上传到我们的CDN:

 <video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png"> <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4"> <source src="//cdn.foo.com/bar-video.webm" type="video/webm"> </video> 

我觉得Safari是完全期待一个实际命名的MP4。 没有文件和MIMEtypes的其他组合为我工作。 我认为其他浏览器首先select了WEBM文件,特别是Chrome,尽pipe我很确定源列表应该select技术上支持的第一个源文件。

但是,这并没有解决iOS设备(iPad 3“新iPad”和iPhone 6testing)中的video问题。

我发现尽pipeSafari不支持HTML5video,但是必须安装Quicktime Player才能使其工作。 在我使用HTML5 Video制作的网站上,使用Safari时会提醒用户,他们必须安装Quicktime,否则他们只能看到video文字。 希望这可以帮助。

我已经看到了一个不可信的“开发”SSL证书的奇怪问题,其中移动Safari很高兴为您的页面提供服务,但即使您已接受证书,也拒绝将video提供给“假”SSL证书。

要testing你可以在其他地方部署video – 或切换到http(整个页面),它应该播放。

我面临同样的问题。 因为我的video画面太大 ie.2248 px苹果支持H.264 Baseline Profile Level 3.0video,在30 fps时可达640 x 480。 请注意,基准configuration文件不支持B帧。 检查这个更多的信息

从iOS 6.1开始,不能再在iPad上自动播放video。 根据苹果文档自动播放function不适用于包括iPad在内的所有ios设备上的Safari:

“苹果已经决定禁用iOS设备上的video自动播放,通过脚本和属性实现。

在Safari中,在iOS(包括iPad在内的所有设备)上,用户可能位于蜂窝networking中并按数据单元收费,则预加载和自动播放function将被禁用。 直到用户启动它才会加载数据。

你可以在这个Apple文档中阅读更多的内容

我有这个问题.mp4播放在Safari浏览器不起作用,但在其他浏览器,它是好的。 我在控制台中看到的错误是:错误媒体src不支持。 在我的情况下,这原来是一个MIMEtypes的问题,但不是因为它没有声明为IIS中的MIMEtypes,而是它被宣布了两次(一次在IIS中,还有一个web.config文件)。 我通过尝试在服务器上本地下载.mp4文件发现了这一点。 我从我试图播放的内容的位置删除configuration文件,它解决了这个问题。 我可以从web.config文件中删除MIMEtypes,但在这种情况下,不需要web.config文件。

对于.mp4这个工程(safari移动和桌面):

 <video height="250" width="250" controls> <source src="video.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> 

在上面的post中提到的controls=”true”对苹果公司来说没有任何意义,只是自行使用控件。

参考: “要使用HTML5audio或video,请先创build一个或一个元素,为媒体指定一个源URL,并包含controls属性。 <video src="http://example.com/path/mymovie.mp4" controls></video>

资料来源: https : //developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

在我的交易中(一个小题目) :我发现从iPhone上传video以.quicktime的forms发送给服务器。 具有讽刺意味的是,在Safari上尝试从服务器上播放video时,这是个问题。 (手机和台式机)。

所以, 如果(像我一样)在Safari浏览器中遇到.quicktime(或者.mp4以外的任何问题) ,这里是苹果公司提供的解决方法。 请注意,我还没有对自己进行testing,我一眼就看不到它,只是提供了更多的信息。

参考: “回到QuickTime插件回到适用于几乎所有浏览器的QuickTime插件有一个简单的方法 – 从HTMLvideo示例下载Apple提供的预buildJavaScript文件ac_quicktime.js,将下面这行代码插入到HTML头中,将其包含在您的网页中: <script src="ac_quicktime.js" type="text/javascript"></script>

资料来源: https : //developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

更新:在.quicktime重命名为.mov之前上传到服务器(在base64文件types“data:video / mov;”),跳过ac_quicktime.js。 。 。 然后将工作在htmlvideo标签; Hacker Hack。