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），用户可能在蜂窝网络上并按数据单位收费，预加载和自动播放被禁用。在用户启动数据之前不会加载数据。" -苹果文档。

因此，我认为您唯一可用的解决方案是最初隐藏视频并显示一个按钮，该按钮会在单击时提示视频加载。这将导致loadedmetadata事件触发，此时您可以根据视频尺寸设置容器的大小，开始播放视频，最后显示它。

为方便起见，我用普通的旧 JavaScript 做了以下操作。它希望能同时展示我建议的问题和解决方法（此处为 jsfiddle ）：

    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 回答