启用“apple-mobile-web-app-capable”模式时，iOS 8 视频播放器出现问题
Posted
技术标签:
【中文标题】启用“apple-mobile-web-app-capable”模式时，iOS 8 视频播放器出现问题【英文标题】：iOS 8 problems with video player when "apple-mobile-web-app-capable" mode is enabled 【发布时间】：2014-12-22 11:12:20 【问题描述】：自从 ios 8 发布以来，我一直在努力解决我正在开发的网站上的一个问题。
我们制作了平板电脑版本的网站，为了获得更原生的应用外观和感觉，我们启用了 apple-mobile-web-app-capable 模式。然后，我们会在用户首次加载网站时要求他们将网站添加到主屏幕。
当网站在 iOS Safari 浏览器中作为普通网站加载时，视频可以正常播放，但在 iOS 8 中，当您从家中启动 Web 应用程序时，视频无法在支持 web-app-capable 的情况下播放屏幕。
我做了一个简单的测试设置，它重现了这个问题。
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>iOS 8 apple mobile web app capable test</title>
<meta name="description" content="Test videoplayer in iOS 8 when adding shortcut to home screen">
<meta name="author" content="TheSourceCodeAuthor">
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<video controls>
<source src="sample.mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
我已经测试了它是否可能是一个跨域问题，因为我们的视频是从另一个域加载的，然后是我们的主域名，但这似乎对问题没有任何影响，因为如果我有同样的问题将视频文件托管在同一域中。
我一直在谷歌上搜索该问题的解决方案，但找不到任何解决方案。
这可能是 Apple iOS 8 中的一个错误，但我没有找到任何来自 Apple 的关于此问题的官方消息。
如果您能够解决此问题，请告诉我。
【问题讨论】：
【参考方案1】：出于某种原因，iOS8 对视频的处理方式不同。
我一直在尝试在 iPad iOS8 上没有控件的全屏视频，在 iOS6 和 iOS7 上运行良好，但我发现唯一可靠的方法是播放然后立即暂停视频，然后使用事件侦听器确保视频可以开始播放并开始播放。
在我的例子中，我使用了使用 css translate 的技术将视频隐藏在页面之外，以克服 quicktime 徽标错误。 .video-overlay 是一个 div，其中包含在播放时切换的视频海报图像。
（请原谅 jQuery 和 javascript 事件处理程序的混合！）
var videoWrapper = $('#video-active');
var introVideo = $('video')[0];
$(document).ready(function()
introVideo.addEventListener('canplaythrough', function()
introVideo.play();
videoWrapper.addClass('active');
$('.video-overlay').hide();
introVideo.removeEventListener('canplaythrough');
);
videoWrapper.on('timeupdate', function(event)
onTrackedVideoFrame(this.currentTime); //this isn't relevant - was using timeline to trigger html text over the top of video at certain points in the timeline.
);
$('.video-overlay').one('click', function()
introVideo.play();
introVideo.pause(); //hack to force load by playing and then immediately pausing
videoWrapper.one('click', function()
introVideo.pause(); //pause video
);
);
);
【讨论】：
以上是关于启用“apple-mobile-web-app-capable”模式时，iOS 8 视频播放器出现问题的主要内容，如果未能解决你的问题，请参考以下文章