HTML5 Safari'de Video boyutları IOS

İçeriğin çoğunluğu video olan bir müşteri için bir web sitesi yapıyorum. İçeriği görüntülemek için HTML5 video öğesini kullanıyorum ancak iOS'ta Safari'ye geldiğinde sorun yaşıyorum.HTML5 Safari'de Video boyutları IOS

iOS'ta Safari, kullanıcı indirmeyi başlatana kadar video meta verilerini indirmez, böylece videonun genişlik ve yükseklik özellikleri varsayılan boyutu 300 x 150 pikseldir. Her iki taraftaki büyük bir siyah alanı bırakır. içeren elemanımın genişliğini uzatan video.

Web sitesini olabildiğince duyarlı yapmaya çalışıyorum ve bu varsayılan boyut benim için çalışmıyor. Bununla mücadele etmek için yine de iOS'ta Safari'nin video boyutuna uyması gerekiyor mu?

kaynak

2013-04-18 FunnyOxymoron

ile iPad mini üzerinde test Ben bu yanıt ilişkilidir düşünüyorum: http://stackoverflow.com/questions/14250583/safari-on-ipad-ios6-does-not-scale-html5-video- 100 sayfalık sayfa sonu genişliği – franzlorenzon

CSS ile,% 100 genişlik ve otomatik yüksekliğini belirtmeyi deneyin.

örneğin genişliğini ve yüksekliğini, video meta olarak yüklenmesini bekleyin ve daha sonra okumak ve ayarlamak için JavaScript kullanmak gerekir Bu durumda DÜZENLEME :

var v = document.getElementById('myVideo'); 
v.addEventListener('loadedmetadata', function(e) { 
    this.width = this.videoWidth; 
    this.height = this.videoHeight; 
}, false);

ben işimi Bunu tam olarak test ettim ama sizi doğru yolda yönlendirmeli.

kaynak

2013-04-18 09:39:46

Bu işe yaramaz, dediğim gibi, video meta verileri indirilmiyor, bu nedenle video 'boşluk', içerilen öğenin genişliğine sığması için% 100 gerilecek olsa da, videonun kendisi küçülüyor 300 x 150 px. Belirli bir yükseklik ve genişlik belirterek varsayılan iOS video boyutunun üzerine yazabilirsiniz, ancak web sitesi yanıt vermeyi amaçladığı için bu bir seçenek değildir. – FunnyOxymoron

Tamam, güncellenmiş cevaba bakınız. –

Ne yazık ki bu hala cevap değil. Video meta verileri, kullanıcı indirme işlemini açıkça başlatıncaya kadar yüklenmez; bu nedenle, bu noktaya kadar JS ateşlenmez ve video iOS varsayılan boyutlarında kalır. – FunnyOxymoron

padding-bottom:56.25% (16: 9 görüntü) width:100%, height:0 kullanılarak deneyin muhafaza elemanının boyutunu ayarlamak için

Sonra kap height/width video elementinin height/width ayarlamak için kullanılır:

var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'), 
    the_case_study_video = document.getElementById('tw-case-study-hero-video'), 
    the_height = $(the_case_study_video_wrapper).css('padding-bottom'), 
    the_width = $(the_case_study_video_wrapper).css('width'); 

$(the_case_study_video).css({ 
    'height': the_height, 
    'width': the_width 
});

Ve sonra belki yeniden oryantasyon yeniden boyutlandırma ve/veya tarayıcı yeniden boyutlandırma css ...

kaynak

2013-05-20 23:23:34

-1

Sadece video etiketi için css kuralı bir sabit genişlik ve yükseklik ayarlayın ve safari vide görüntüler o düzgün bir şekilde.

kaynak

2013-08-25 23:42:15

Benim için çalışan aşağıdaki CSS'yi kullandım. iOS 7,1

video { 
min-height: 100%; 
min-width: 100%; 
height: auto !important; 
width: auto !important; 
}

kaynak

2014-04-10 04:30:29 Guy

Bu benim için hileli, sabit kodlama değerlerine göre daha net bir çözüm yaptı. Benim kullanımım için "genişlik:% 100! Önemli;" gerçi. – MarkLunney

HTML5 Safari'de Video boyutları IOS

cevap

İlgili konular