web-dev-qa-db-ja.com

iPadのHTML5ビデオ

私はダイナミックなビデオギャラリーを持っていて、それはコンピューター上でうまく機能します。 iPadに移動すると、ビデオの読み込みが開始され、再生できないアイコンが表示されます。これの代わりに、再生の準備ができるまでビデオを表示しないようにします。 「canplaythrough」と「canplay」のイベントリスナーを追加しようとしましたが、それらが発生すると、ビデオがフェードインしてから再生されます。 iPadはこれらのイベントをサポートしていませんか？

new_video = document.createElement('video');
new_video.setAttribute('class', 'none');
new_video.setAttribute('width', '568');
new_video.setAttribute('height', '269');
new_video.setAttribute('id', 'video'+video_num);
current_video.insertBefore(new_video, video_controls);
new_video.load();
new_video.addEventListener('canplaythrough', function() {
     $('#video'+video_num').fadeIn(100);
     new_video.play();
});
videoipadhtml
17
mrollinsiv

この視覚的な問題を解決する方法は、再生の準備ができるまでビデオ要素を非表示にすることです。 _display:none_を設定することはできず（設定するとビデオは読み込まれません）、_visibility:hidden_も問題を解決しないことに注意してください。

これを修正するには、DIVのビデオ要素を_overflow:hidden_でラップし、-webkit-transform:translateX(1024px)（ビデオを画面の外にプッシュするのに十分な数）を設定します。

canplayまたはcanplaythroughまたはloadイベントを（必要に応じて）リッスンし、その後translateXをゼロに設定する必要があります。

7
Miller Medeiros

IPadでは、ユーザーがイベントを開始するまでビデオをロードしません。これは、iPhoneまたはiPadユーザーがデータプランを焼き尽くすのを防ぐためのAppleの設計によるものです。したがって、これはできません。申し訳ありませんがやりたいことをしてください。

これをチェックしてください リンク そしていくつかの情報のためにデバイス固有の考慮事項セクションを探してください。ただし、データの読み込みは開始されないため、ユーザーがデータに触れるまでcanplaythroughイベントを発生させることはできませんでした。

4
Jeff Beck

iPad/iPhoneでプレーヤーを自動的に起動します。

function fakeClick(fn) {
    var $a = $('<a href="#" id="fakeClick"></a>');

    $a.bind("click", function(e) {
        e.preventDefault();
        fn();
    });

    $("body").append($a);

    var evt,
        el = $("#fakeClick").get(0);

        if (document.createEvent) {
            evt = document.createEvent("MouseEvents");
            if (evt.initMouseEvent) {
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            }
        }

        $(el).remove();
} 

$(function() {
    var video = $("#mobileVideo").get(0);

    fakeClick(function() {
        video.play();
    });
});
1
Ryan Weiss

ロードする前に、ブラウザがビデオを再生できるかどうかを確認してください。

function canPlayVorbis() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
}

function canPlayMP4() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}

function canPlayWebM() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
}

HTML5付録Aに飛び込む から取得。

1
robertc

問題はビデオオブジェクトを動的に作成しているようです-それはどういうわけかiPadのコードを壊します。すでに存在するビデオ要素をコンテナに移動し、すぐにビデオが機能しなくなるビデオプレーヤーを作成しました。ただし、他のシステムでは問題ありません...ビデオ要素を既に配置し、その上下に他のすべてのコードを追加する方法を見つける必要があると思います。

1
Jörn Berkefeld

これは古い問題であることに気づきますが、他の誰かがこれに遭遇した場合、私は同様の問題に遭遇しました。

ビデオ要素によってディスパッチされたイベントを見ると、iPadがビデオのロードを開始し、ほぼすぐに一時停止しているように見えます（最初の「進行中」イベントと同時に表示されます）。

しない「canplay」または「canplaythrough」イベントを後再生が実際に開始されるまで発生させるため、再生を開始する前に発生する3つのイベントのいずれかをリッスンする必要があります。 ：

  • loadstart
  • 進捗
  • サスペンド

ハンドラーを「loadstart」に変更して、試してみます。

1
yenemy

これが、MP4ビデオが完全にロードされるまで再生されない理由である可能性があります： 完全にロードされる前にHTML5 MP4ビデオを再生する方法 。とにかく一撃の価値があります。

0
Ian Devlin

HTML5イベントに慣れるための素晴らしい場所です。

http://www.w3.org/2010/05/video/mediaevents.html

0
Tyguy7