确认

Question

简单的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>

请帮忙。对此有什么解决方案吗？

Answer 1

在IOS 8.0.2中的独立应用程序中打破了视频播放

Answer 2

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

Answer 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中使用的同一个webapp，主屏幕版本不播放视频，并在尝试更改video的来源时崩溃了网页。

我不喜欢苹果：|

Answer 4

我有两个使用HTML5视频的应用。一个停止工作，另一个没停止。有两点不同：

在将视频标记添加到DOM之后，仍可使用的标记将源标记添加到视频标记。
仍可使用的应用将自动播放设置为false（<video autoplay="false">...</video>）

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

Answer 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。我希望这有助于某人。

Answer 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上进行测试时，我遇到了它，它让我感到很沮丧。

为什么HTML5视频在IOS 8 WebApp（webview）中无法播放？

6 个答案:

确认

打包的cordova App无法加载视频

Safari播放工作

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