如何獲取動態插入的視頻在iPad上的尺寸？ JavaScript

我在頁面上動態插入一個未知尺寸的html5視頻標籤。我在loadedmetadata事件中獲得了所有瀏覽器上的魅力。如何獲取動態插入的視頻在iPad上的尺寸？ JavaScript

但是，據我所知，這個事件不會觸發，直到用戶觸摸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時像其他所有瀏覽器一樣獲取尺寸？

來源

2013-05-10 Aaron

你不能在iPad上自動播放視頻，但我認爲你可以隱藏視頻元素並實現一個按鈕來啓動播放，然後在收到元數據事件後顯示元素。 – 2013-05-10 00:14:44

是的，我沒有嘗試自動播放它，但瞭解它不會在視頻信息開始播放前拉動視頻信息。它所在的容器開始隱藏，我需要將其調整到視頻尺寸並顯示容器。試圖找到一種方法來首先獲得視頻的尺寸。 – Aaron 2013-05-10 00:20:14

你可以做一個http://jsfiddle.net？我在這裏猜測，但播放視頻並立即暫停它可能會導致您需要觸發的事件。然後，您可以調整容器大小，顯示它，然後再次開始播放視頻。 – 2013-05-10 00:25:59

我不相信有辦法讓loadedmetadata觸發事件，在iOS上無需用戶交互（您爲了閱讀動態加載視頻的尺寸需要）。由於在相當詳細的回答here中解釋的原因，Apple從iOS 6.01版中禁用了autoplay。我將在這裏引用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'; 
    });

我發現this page從W3是在過去的有用與HTML5視頻API玩耍。

來源

2013-05-10 18:02:19

謝謝，是的，這是我今天早些時候開始走下坡路。蘋果爲什麼要這樣做是可以理解的，但如果他們把視頻的元素拉下來並允許這樣做，它會更理想。我甚至嘗試將視頻添加到頁面以查看Safari是否足夠聰明以自動調整大小，但它只是添加了不正確的尺寸。 – Aaron 2013-05-10 18:16:22

是的，我認爲這是蘋果的一個糟糕的決定，我不完全贊同他們的推理。爲什麼不讓用戶決定是否想要觀看我的視頻來清理他們的數據計劃？ – 2013-05-10 18:20:26

如何獲取動態插入的視頻在iPad上的尺寸？ JavaScript

回答

相關問題