为啥 HTML5 视频不能在 IOS 8 WebApp(webview) 中播放？

Posted

技术标签:

【中文标题】为啥 HTML5 视频不能在 IOS 8 WebApp(webview) 中播放？【英文标题】：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 应用程序上不再适用。 不只是自动播放失败，标准的“点击播放”视频手动启动失败。见***.com/questions/25972600/… 刚刚在 iOS 8.2 beta 上测试过，可以确认它仍然没有修复。 不适用于 iOS 8.1.2。 也不适用于 iOS 8.3beta。 :-( 【参考方案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 (&lt;video autoplay="false"&gt;...&lt;/video&gt;)

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

【讨论】：

我添加了 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

以上是关于为啥 HTML5 视频不能在 IOS 8 WebApp(webview) 中播放？的主要内容，如果未能解决你的问题，请参考以下文章

为啥 Firefox 不能从 Localhost 播放 HTML5 视频元素？

为啥这个 HTML5 地理定位代码不能仅在 iOS 上获取用户的位置？

为啥 videojs 不能在 IE6/7/8 中播放我的 Flash 视频？

Android WebView播放html5视频，退出全屏后为啥就是黑屏了

为啥qt webengine不能播放youtube直播视频流

IOS9 WKWebView html5视频无播放按钮