0

それで、ここに挑戦があります。ビデオをオーバーレイするクリック可能なポップコーンリンクを作成します。デスクトップでは十分にシンプルですが、iOSは課題であることが証明されています。ビデオ要素にcontrols属性がある場合、iOSはビデオウィンドウ内のすべてのクリックをハイジャックし、リンクオーバーレイをクリックできなくなります。ただし、controls属性がビデオ要素に存在しない場合、ポップコーンリンクはクリック可能であり、正常に機能します。

問題は、現在、ビデオコントロールがないことです。そして、私はそれらが必要です。だから私はいくつかの手書きのjavascriptベースのビデオコントロールがうまくいくはずだと思いました。ビデオタグには属性がないcontrolsため、ポップコーンオーバーレイをクリック可能であり、さらに機能するコントロールがあります。これを使った私の試みは、video.jsを使用することです。

これで、video.jsビデオコントロールとポップコーンがデスクトップ上で調和して動作するようになりました。しかし、iPadではvideo.jsの部分は機能しますが、ポップコーンの部分は機能しなくなります。video.jsコントロールを取得しましたが、ポップコーンイベントは発生しません。ただし、エラーはなく、スクリプトは完全に実行されます。

ここで何が起こっているのか誰か知っていますか？video.jsがiOSでのみポップコーンを停止するのはなぜですか？解決策はありますか？

問題のデモ

4

2 に答える 2

3

VideoJSは、すべてのコントロールを挿入して正しく配置するためにWebページに変更を加える必要があります。これには、ビデオ要素の移動も含まれます。モバイルSafariは非常に敏感で、この点については少し奇妙です。VideoJSが元のビデオ要素を削除して新しいものに置き換えているようです。これは、Popcornが元のビデオ要素に自分でアタッチした後に発生します。

Mobile Safariで縮小されたJavascriptをデバッグするのはピクニックではないので、VideoJSが他のブラウザーではなくiPadでこれを行っている理由を正確に知ることはできません。しかし、コンソールを使用すると、何が起こっているのかを大まかに把握することができます。

document.getElementsByTagName('video')[0] ===
    window.Popcorn.instances[0].media
//false!

つまり、Popcornがリッスンしているビデオ要素は、Webページで表示および再生しているものと同じではありません。このコマンドから...

window.Popcorn.instances[0].media.parentNode //null!

...元のタグはメモリに存在しますが、DOMにアタッチされていないことがわかります。そのため、新しいビデオが再生されている間、元のビデオは0:00に一時停止されたままになります。

解決策は、 VideoJSがビジネスを行った後に、Popcornインスタンスをセットアップすることです。次に、ビデオ要素を適切に参照していることを確認します。これは、「＃popacorn」がを参照し<div>、新しいビデオ要素が「popacorn_html5_api」と呼ばれるためです。これは、iOSとデスクトップブラウザでカバーできるはずです。

于 2013-01-26T22:29:46.443 に答える
3

Firefoxでも同じ問題が発生しました。ポップコーンがvideoJSで動作していません。

私はこのように私の問題を解決しました：

jQuery(function(){

    _V_('videoid').ready(function() { // videoJS ready ?
        console.info('videoJS ready : player ID = '+$(this).attr('id'));
        console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));

        var pop = Popcorn( "#"+$('#videoid video').attr('id') );
        // etc...

    });

});

前述のbrianchirlsと同様に、videoJSはビデオID="videoid_html5_api"を含むdivid= "videoid"を作成するため、オブジェクトid="videoid"はビデオオブジェクトではなくなります。

于 2013-02-11T16:40:54.330 に答える