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

Question

我正在动态地将一个尺寸未知的 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)

这是一个 fiddle : http://jsfiddle.net/Fv4XG/1/

请注意，在浏览器中，它会立即提醒视频尺寸，但在 ipad 上，您必须等到有用户交互后才会拉取尺寸。像在所有其他浏览器中一样，当视频被插入到 DOM 中时，如何获取尺寸？

Answer 1

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

"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - 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';
    }); 

我找到了 this page从 W3 开始，在过去使用 HTML5 视频 API 时很有用。