Question

我正在动态地将未知维度的html5视频标记插入到页面上。我得到了loadedmetadata事件的维度，它在所有浏览器上都像魅力一样。

但是，根据我的理解，在用户触摸ipad上的视频之前，此事件不会触发。这使我很难获得我需要的视频的实际尺寸，以便调整它的容器大小。

有吗

另一种获取视频尺寸的方法场景？或
触发loadedmetaevent的方法吗？

谢谢！

CODE ：

 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时，我如何获得尺寸？

Answer 1

我不相信有一种方法可以在没有用户交互的情况下在iOS上触发loadedmetadata事件（您需要读取动态加载的视频的尺寸）。出于相当详细的答案here中解释的原因，Apple从iOS 6.01版禁用了autoplay。我将在此处包含Apple文档中的引用。

“Apple决定禁用自动播放视频   在iOS设备上，通过脚本和属性实现。

在Safari中，在iOS上（适用于所有设备，包括iPad），用户可能位于移动网络上并按数据单元收费，预加载和   自动播放被禁用。 在用户启动之前不会加载任何数据。“ - Apple documentation.

因此，我认为唯一可用的解决方案是最初隐藏视频并显示一个按钮，该按钮会在单击时提示视频加载。这将导致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中的this page过去对于使用HTML5视频API非常有用。

如何在ipad上获取动态插入视频的尺寸？ JavaScript的

1 个答案: