2012-10-26 248 views
0

我在Safari瀏覽器(PC/MAC)上遇到了HTML5 video播放器元素的問題。Safari 5瀏覽器上的html5視頻播放器大小

問題是播放的視頻沒有反映出視頻source的實際視頻,也沒有用widthheight屬性指定的大小。

這裏是演示網址:

http://actisku.videohosting.fr/test.html

<video id="homepage_videoplayer" poster="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.png" loop="loop" autoplay="autoplay" width="979" height="365"> 
    <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.mp4" type="video/mp4" /> 
    <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
</video> 

mp4源文件是979x365。同樣規格的球員video也是如此。但它應該以相同的大小閱讀。

也許這是一個元數據問題,但我不知道如何編輯這個元數據。

編輯:

使用JavaScript,我可以看到視頻width是649在Safari和979在Chrome,非常奇怪。所以我打算使用-webkit-transformscaleX()來解決這個問題。

回答

0

你在網上得到一個JavaScript錯誤:39

vid.css("video","scaleX(1.5)"); 

我認爲你正在嘗試做的是

scaleX="1.5" 

添加屬性到<video>標籤,是這樣的?嘗試手動添加它,看看如果這是你在找什麼,所以你最終會得到這樣的:

<video id="homepage_videoplayer" scaleX="1.5" poster="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.png" loop="loop" autoplay="autoplay" width="979" height="365"> 
    <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.mp4" type="video/mp4" /> 
    <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.ogv" type='video/ogg; codecs="theora, vorbis"' />  
</video> 
+0

的問題是,必須將scaleX只適用於野生動物園,在其他瀏覽我沒有得到任何問題。 –

+0

你只是想「讓它適合」嗎?如果是這樣,請查看這個想法http://jsfiddle.net/MDppT/我在Safari和Chrome中測試它,並且它縮放以適應'DIV' – davehale23

+0

davehale23的大小,我嘗試了它,它在safari中工作,但不在iOS中的網頁瀏覽。 – Chris

相關問題