web-dev-qa-db-ja.com

HTML5ビデオがIOS 8 WebApp（webview）で再生されないのはなぜですか？

シンプルな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>

助けてください。これに対する解決策はありますか？

ioshtml5html5-videoios8iphone-standalone-web-app
39
inaam husain

IOS 8.0.2のスタンドアロンアプリケーションでビデオの再生が壊れています

17
Julio Garcia

IOS 8.3はこの問題を修正しているようです。オーディオ要素を使用するスタンドアロンのWebアプリがあり、現在は期待どおりに機能しています。最後に！

7
gillennium

確認中

パッケージ化されたCordovaアプリはビデオをロードできません

追加：

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

config.xmlおよび

webkit-playsinline

video要素に。

UIは、ビデオがLoadingであるのに対し、video.networkStatus残り2（NETWORK_LOADING）およびvideo.readyState0（HAVE_NOTHING）

Safariの再生機能

ホーム画面ランチャーの再生が機能しない

IOS Safariで機能した同じwebappの場合、ホームスクリーンバージョンはnotを再生し、videoのソースを変更しようとするとwebappをクラッシュさせます。

Apple：|

6
Matyas

HTML5ビデオを使用する2つのアプリがあります。 1つは機能しなくなり、もう1つは機能しなくなりました。 2つの違いがありました。

  • まだ機能しているものは、ビデオタグをDOMに追加した後、ソースタグをビデオタグに追加しました。
  • まだ機能するアプリの自動再生はfalse（<video autoplay="false">...</video>）

最初のものは違いがなく、2番目のものはアプリを再び機能させました。

2
malthoff

オーディオが機能しないための回避策を見つけたと思います。この修正が機能している理由を実際に説明することはできませんが、実際には機能しています。

古いコードは次のようになりました。

// 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で機能するのは2番目の機能だけです。これが誰かの役に立つことを願っています。

0
Matt Grande

ビデオ要素を見つけ、スクリプトでソース要素を作成することでこれが機能しました（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でテストしていたので、1日気づきました。

0
Chris