Html 为什么 HTML5 视频不能在 IOS 8 WebApp(webview) 中播放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25972362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why HTML5 video doesn't play in IOS 8 WebApp(webview)?
提问by inaam husain
Simple HTML5 video plays on safari browser. but after adding it to home screen(Standalone WebApp), it doesn't work. It is working on iOS7 but stopped working on iOS8.
简单的 HTML5 视频在 safari 浏览器上播放。但是将其添加到主屏幕（独立 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>
Please help. Is there any solution for this?
请帮忙。有什么解决办法吗？
回答by Julio Garcia
Video playback is broken on standalone applications in IOS 8.0.2
IOS 8.0.2 中独立应用程序的视频播放中断
回答by gillennium
Looks like iOS 8.3 fixes this issue. I have a standalone web app that uses an audio element, and it's working as expected now. FINALLY!
看起来 iOS 8.3 解决了这个问题。我有一个使用音频元素的独立 Web 应用程序，它现在按预期工作。最后！
回答by Matyas
Confirming
确认
Packaged cordova App cannot load video
打包的cordova App无法加载视频
Added:
添加：
<preference name="AllowInlineMediaPlayback" value="true"/>
to config.xmland
到config.xml和
webkit-playsinline
to the videoelement.
到video元素。
The UI says video is Loading, while video.networkStatusremains 2(NETWORK_LOADING) and video.readyState0(HAVE_NOTHING)
用户界面显示视频是Loading，而video.networkStatus仍然是2( NETWORK_LOADING) 和video.readyState0( HAVE_NOTHING)
Safari playback works
Safari 播放效果
Home screen launcher playback does not work
主屏幕启动器播放不起作用
For the same webapp that worked in ios Safari, the homescreen version does notplay videos either, and crashes the webapp when trying to change the source of the video.
对于在 ios Safari 中工作的同一个 webapp，主屏幕版本也不播放视频，并且在尝试更改video.
I don't like apple :|
我不喜欢苹果:|
回答by malthoff
I have two apps that use HTML5 video. One stopped working, the other not. There were two differences:
我有两个使用 HTML5 视频的应用程序。一个停止工作，另一个没有。有两个不同之处：
- The one that still works added the source tags to the video tag AFTER adding the video tag to the DOM.
- The app that still works has autoplay set to false (
<video autoplay="false">...</video>)
- 在将视频标签添加到 DOM 之后，仍然有效的那个将源标签添加到视频标签中。
- 仍然有效的应用程序将自动播放设置为 false (
<video autoplay="false">...</video>)
The first one made no difference, the second one made the app work again.
第一个没有任何区别，第二个使应用程序再次运行。
回答by Matt Grande
I think I found a workaround for the audio not working. I can't really explain why this fix is working, but it is.
我想我找到了音频不起作用的解决方法。我无法真正解释为什么此修复程序有效，但确实如此。
Here's what my old code looked like:
这是我的旧代码的样子：
// 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();
Here's what I'm doing now.
这就是我现在正在做的事情。
// 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();
});
In my mind, both should work however, in practice, only the second one does for iOS8. I hope this helps someone.
在我看来，两者都应该有效，但实际上，只有第二个适用于 iOS8。我希望这可以帮助别人。
回答by Chris
I got this working by finding the video element, then creating a source element in script (not in the html) - strange I know:
我通过找到视频元素，然后在脚本中（不是在 html 中）创建一个源元素来实现这个工作 - 我知道很奇怪：
var video = document.getElementById('theVideo');
var source = document.createElement('source');
source.src = fileLocation
source.type = "video/mp4"
video.appendChild( source );
video.load();
I also accept this is an old issue, but I came across it as I was testing on an iPad that has iOS 8.0.2 installed and it caught me out for a day.
我也承认这是一个老问题，但是我在安装了 iOS 8.0.2 的 iPad 上进行测试时遇到了它，它让我困扰了一天。
