【问题标题】：Why HTML5 video doesn't play in IOS 8 WebApp(webview)?为什么 HTML5 视频不能在 IOS 8 WebApp(webview) 中播放？
【发布时间】：2014-11-16 07:37:34
【问题描述】：

在 Safari 浏览器上播放简单的 HTML5 视频。但将其添加到主屏幕（独立 WebApp）后，它不起作用。它在 iOS7 上运行，但在 iOS8 上停止运行。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>HTML5 Video Standalone Test</title>
    <style>
    body{
        margin:0;
        }
    </style>
</head>
<body>
    <video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" autoplay="autoplay" controls="true" webkit-playsinline />
</body>
</html>

请帮忙。有什么解决办法吗？

【问题讨论】：

@IlyaStreltsyn HTML5 Video 对我来说在 iOS8 独立 web 应用程序上不再适用。
不只是自动播放失败，标准的“点击播放”视频手动启动失败。见stackoverflow.com/questions/25972600/…
刚刚在 iOS 8.2 beta 上测试过，可以确认它仍然没有修复。
不适用于 iOS 8.1.2。
也不适用于 iOS 8.3beta。 :-(

标签： ios html html5-video ios8 iphone-standalone-web-app

【解决方案1】：

IOS 8.0.2 中的独立应用程序无法播放视频

【讨论】：

视频和音频标签在 iOS 8.0.2 网络应用中被破坏
是否有官方消息证实这一说法？
视频播放在 cordova 应用程序中也不起作用。点击播放按钮后没有任何反应。希望他们能尽快修复它。
我最担心的事情得到了证实 - 但感谢您的确认。这真的很糟糕。
在 ios 8.1.2 中仍然存在问题。 tests.mikeditum.co.uk/iPad/video_playback.html 上提供了不错的复制案例。我已经向苹果举报了

【解决方案2】：

看起来 iOS 8.3 修复了这个问题。我有一个使用音频元素的独立网络应用程序，它现在按预期工作。终于！

【讨论】：

我在 ipad 上尝试了一个带有嵌入视频的 webview 应用程序，但在 ios 8.3 上无法使用。您对错误修复有任何参考吗？
我可以确认独立 web 应用中的视频播放在 iOS 8.3 中有效，而在 8.2 中无效。

【解决方案3】：

确认

打包的cordova App无法加载视频

添加：

<preference name="AllowInlineMediaPlayback" value="true"/>

到config.xml 和

webkit-playsinline

到video 元素。

用户界面说视频是Loading，而video.networkStatus 仍然是2 (NETWORK_LOADING) 和video.readyState 0 (HAVE_NOTHING)

Safari 播放效果

主屏幕启动器播放不起作用

对于在 ios Safari 中运行的同一 web 应用，主屏幕版本也不播放视频，并且在尝试更改 video 的源时导致 web 应用崩溃。

我不喜欢苹果：|

【讨论】：

确认，在此评论中，更改主屏幕网络应用中视频的来源会使应用崩溃。

【解决方案4】：

我有两个使用 HTML5 视频的应用程序。一个停止工作，另一个没有。有两个区别：

在将视频标签添加到 DOM 之后，仍然有效的将源标签添加到视频标签中。
仍然可以运行的应用将自动播放设置为 false (<video autoplay="false">...</video>)

第一个没有任何区别，第二个使应用程序再次运行。

【讨论】：

我添加了 autoplayy="flase"，但当我点击播放按钮时，webApp 仍然崩溃！我在 ios 8.1.3 上对其进行了测试。你能告诉我你是如何创建有效的播放按钮的吗？提前谢谢

【解决方案5】：

我想我找到了音频无法正常工作的解决方法。我无法真正解释为什么此修复程序有效，但确实有效。

这是我的旧代码的样子：

// Create the audio tag
var sprite = document.createElement('audio');
var id = document.createAttribute('id');
id.nodeValue = 'audio_sprite';
var src = document.createAttribute('src');
src.nodeValue = 'my-audio-sprite.mp3';

sprite.setAttributeNode( id );
sprite.setAttributeNode( src );

// Add it to the DOM
var body = document.getElementsByTagName('body')[0];
body.appendChild( sprite );

// Play/Pause to load the audio.
sprite.play();
sprite.pause();

这就是我现在正在做的事情。

// Grab an existing DOM element and create an audio tag.
var body = document.getElementById('hover');
body.innerHTML += '<audio id="audio_sprite"><p>Audio not supported</p></audio>';

// Apply the SRC to the audio tag.
// Q: Why don't we just do that in the step above?
// A: I'm not really sure why, but iOS8 doesn't like it. Sorry this is so ugly.
var sprite = document.getElementById( 'audio_sprite' );
sprite.src = 'my-audio-sprite.mp3';

// Once the metadata is loaded, call play/pause so we can play the audio later.
sprite.addEventListener('loadedmetadata', function() {
    sprite.play();
    sprite.pause();
});

在我看来，两者都应该有效，但实际上，只有第二个适用于 iOS8。我希望这对某人有所帮助。

【讨论】：

无法在 iOS 7.1 上确认 - 在“添加到主屏幕”后不起作用

【解决方案6】：

我找到了视频元素，然后在脚本中（不是在 html 中）创建了一个源元素，我知道这很奇怪：

var video = document.getElementById('theVideo');
var source = document.createElement('source');

source.src = fileLocation
source.type = "video/mp4"

video.appendChild( source );
video.load();

我也承认这是一个老问题，但我在安装了 iOS 8.0.2 的 iPad 上进行测试时遇到了这个问题，这让我困扰了一天。

【讨论】：

我试过 $(source).attr('src', myfile);player.load(); player.webkitEnterFullscreen();播放器.play();但是 webApp 在 ios 8.1.3 上崩溃了。你能告诉我我做错了什么吗？提前致谢
感谢您的回复。来源是： var source = document.getElementById('mp4');我什至尝试了您的确切代码并通过此超链接发送视频网址 w3schools.com/html/mov_bbb.mp4','./…> 但是 webApp 崩溃了！您能在 jsfiddle 中发布一个不会导致应用程序崩溃的演示吗？跨度>
你遇到了什么崩溃？ - 例如您发布的视频文件是 404
webApp 关闭而不是播放视频。示例网址为w3schools.com/html/mov_bbb.mp4