1

サイズが不明な html5 ビデオ タグをページに動的に挿入しています。loadedmetadataすべてのブラウザで魅力的に機能するイベントで寸法を取得しています。

ただし、私が理解していることから、ユーザーが ipad でビデオに触れるまで、このイベントは発生しません。これにより、コンテナのサイズを調整するために必要なビデオの実際のサイズを取得することが非常に困難になります。

ある

  1. このシナリオで機能するビデオのサイズを取得する別の方法は? また
  2. ロードされたメタイベントをトリガーする方法は?

ありがとう！

コード:

 var src=fullPathToVideoWithoutExtension;

 // DETECT WHICH FILE FORMAT TO USE
 if($.support.browser.h264||$.support.mpeg4){
     var supportedSRC=supportedSRC+'<source src="'+src+'.mp4" type="video/mp4">';
  };

  if($.support.browser.ogg){
     var supportedSRC=supportedSRC+'<source src="'+src+'.ogv" type="video/ogg">';
  };

  // SETUP THE VIDEO ELEMENT
  var $Video=$('<video id="Box_Video" controls>'+supportedSRC+'</video>');

  $Video[0].src=src+'.mp4';
  $Video[0].addEventListener('loadedmetadata',function(){
     var width=this.videoWidth;
         height=this.videoHeight;   
   },false)

ここにフィドルがあります： http://jsfiddle.net/Fv4XG/1/

ブラウザではビデオのサイズがすぐに警告されますが、iPad ではサイズをプルする前にユーザーの操作があるまで待つ必要があることに注意してください。他のすべてのブラウザと同様に、ビデオが DOM に挿入されたときにサイズを取得するにはどうすればよいですか?

4

1 に答える 1

2

loadedmetadataユーザーの操作なしで iOS で発生するイベント (動的にロードされたビデオのサイズを読み取るために必要)を取得する方法があるとは思いません。こちらのかなり詳細な回答で説明されている理由により、Appleautoplayは iOS バージョン 6.01 から無効になりました。Apple のドキュメントからの引用をここに含めます。

「Apple は、スクリプトと属性の両方の実装を通じて、iOS デバイスでのビデオの自動再生を無効にすることを決定しました。

Safari では、iOS (iPad を含むすべてのデバイス) では、ユーザーがセルラー ネットワークに接続していて、データ ユニットごとに課金される可能性があるため、プリロードと自動再生は無効になっています。ユーザーが開始するまで、データはロードされません。" - Apple のドキュメント。

したがって、あなたが利用できる唯一の解決策は、最初にビデオを非表示にし、クリックするとビデオのロードを促すボタンを表示することだと思います. これによりloadedmetadataイベントが発生し、その時点で動画のサイズに基づいてコンテナーのサイズを設定し、動画の再生を開始して、最後に表示することができます。

簡単にするために、プレーンな古い JavaScript で次のことを行いました。問題と私が提案している回避策の両方を示していることを願っています (jsfiddle here ):

    var video = document.getElementById('video');
    video.load(); // In desktop browser this will cause loadedmetadata event to fire

    // Hide the video initially
    video.style.visibility = 'hidden';

    document.getElementById('button').addEventListener('click', function() {
        video.load(); // on iOS we need user interaction to prompt load
    });

    video.addEventListener('loadedmetadata', function() {

        // console log is much less intrusive than window.alert
        // you can see the log statements in Safari developer tools if you plug in a device
        window.alert(this.videoWidth);
        window.alert(this.videoHeight);

        // Now we can set container size, reveal and play
        video.width = this.videoWidth;
        video.height = this.videoHeight;

        video.play();
        video.style.visibility = 'visible';
    });

W3 のこのページは、過去に HTML5 ビデオ API をいじるのに役立つことがわかりました。

于 2013-05-10T18:02:19.487 に答える