GWT和HTML5視頻在移動Safari

我試圖代碼GWT的網站，播放視頻與HTML5。在桌面上一切正常，但iPhone和iPad上的移動Safari不播放視頻。GWT和HTML5視頻在移動Safari

我可以用Video for Everybody播放視頻。我甚至將代碼複製到我自己的純HTML頁面中，並且工作完美無瑕。如果我通過GWT小部件提供相同的代碼，移動Safari不會播放視頻。在iPhone上，我看到一個灰色框，在播放按鈕周圍有一個禁止標誌，在iPad上顯示爲黑色框。

我確信我的文檔類型是<!DOCTYPE html>，但我不知道還有什麼地方開始調試。也許它是因爲代碼是通過JavaScript注入的？任何指向哪裏開始尋找將不勝感激。

這裏是我使用的視頻確切的代碼：

<!-- "Video For Everybody" by Kroc Camen. see <camendesign.com/code/video_for_everybody> for documented code 
    =================================================================================================================== --> 
<video width="640" height="360" poster="poster.jpg" controls autoplay> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></source> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"></source> 
    <!--[if gt IE 6]> 
    <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! 
    [endif]--><!--[if !IE]><!--> 
    <object width="640" height="375" type="video/quicktime" data="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> 
    <!--<![endif]--> 
    <param name="src" value="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
    <param name="autoplay" value="true" /> 
    <param name="showlogo" value="false" /> 
    <object width="640" height="384" type="application/x-shockwave-flash" 
     data="player.swf?autostart=true&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> 
     <param name="movie" value="player.swf?autostart=true&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
     <!-- fallback image --> 
     <img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny" 
      title="No video playback capabilities, please download the video below" /> 
    </object><!--[if gt IE 6]><!--> 
    </object><!--<![endif]--> 
</video>

編輯：

我coppied這是在我的iPhone/iPad的使用this bookmarklet正在顯示的源。然後，我將該代碼複製到一個純粹的HTML頁面，該頁面完美無瑕。它必須與通過javascript生成的視頻標籤有關。（IE我點擊一個按鈕，視頻標籤生成沒有頁面刷新。）

我不確定如果問題是移動Safari或JavaScript GWT生成，但無論哪種方式，我將不得不尋找解決方法。

EDIT（10年7月23日）：

我回來並重新走訪了問題。由於我發佈了這個問題，我已經完全改變了頁面的佈局來使用LayoutPanels而不是DockPanels和Vertical/Horizontal面板。我也升級到GWT 2.0.4。使用iOS 3.2.1的iPad，它仍然不播放視頻，但是當我指定它時（與之前一樣），我確實得到了海報框。使用iPhone 4和iOS 4.0.1，視頻播放毫無問題。所以它看起來像是什麼問題，它是用iOS 4修復的。

來源

2010-04-09 KevMo

嘿，你用的是UiBinder嗎？ – 2012-12-14 09:58:25

我做了實現，並堅持在ipad播放相同。現在我發現它的問題與我的服務器有關。 – 2012-12-14 09:59:02

以下代碼適用於我的iPhone（請忽略包名稱的GxtSandbox部分，沒有使用GXT的東西，如您所見）。我在http://binarymuse.net/video/GxtSandbox.html託管的網頁，你可以在移動設備上訪問進行測試。

package net.binarymuse.gwt.gxt.client; 

import com.google.gwt.core.client.EntryPoint; 
import com.google.gwt.user.client.ui.DialogBox; 
import com.google.gwt.user.client.ui.HTML; 

public class GxtSandbox implements EntryPoint { 

    public void onModuleLoad() { 
     DialogBox box = new DialogBox(true); 
      box.setWidget(new HTML("<video width='640' height='360' poster='poster.jpg' controls autoplay>" + 
      "<source src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' type='video/mp4'></source>" + 
      "</video>")); 
     box.center(); 
    } 
}

與當您嘗試使用的.ogv文件作爲源的禁止符號會顯示灰色框 - 也許移動Safari試圖使用某種原因？

我會建議創建一些GWT類，使用延遲綁定創建瀏覽器排列正確的標籤被編譯。你也可以在gwt-html5-media找到有用的東西。

來源

2010-04-18 05:54:16

我在iPad上測試了該鏈接。與黑匣子同樣的問題。但它在我的iPhone上工作。我甚至已經將我的代碼縮減爲帶有mp4源代碼的視頻標籤，而我在iPhone和iPad上仍然存在相同的問題。我會看看第二個鏈接，看看我能找到什麼。 – KevMo 2010-04-18 13:52:08

GXT是不是正確的解決方案。你必須檢測到你的瀏覽器是移動Safari瀏覽器。看到檢測mobile browsers in GWT，然後創建一個包裝的視頻標籤的插件的正確途徑。

來源

2010-04-19 13:15:41 Cbe317

我確實創建了一個包裝視頻標籤的GWT小部件。我的問題中的代碼來自一個小部件。 – KevMo 2010-04-20 00:09:08

我認爲問題來自Flash，因爲iPad和iPhone不支持它。您應該創建一個GWT視頻窗口小部件，該窗口小部件使用VideoImpl通用HTML5實現和另一個VideoImplFlash（擴展VideoImpl）Flash實現用於非HTML5瀏覽器。實現的選擇將通過使用緩存綁定的GWT瀏覽器檢測機制來完成。見com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java，com.google.gwt.user.client.ui.impl.TextBoxImpl.java和COM .google.gwt.user.client.ui.impl.TextBoxImplIE6.java例如在GWT代碼 – Cbe317 2010-04-21 13:54:18

即使使用小工具包只是在同樣的問題 – KevMo 2010-04-22 16:30:03

爲了支持其他HTML5功能，你還可以看到GWT-Mobile-Webkit project。

來源

2010-04-19 13:19:37 Cbe317

我看到你在你的代碼有

<object width="640" height="384" type="application/x-shockwave-flash"

。

減去筆記本電腦的蘋果手機產品不支持Flash。

（這是我所見過的最愚蠢的事情，我敢打賭，蘋果將不允許空氣和水在那裏下一個許可證協議。）

相關搜索：

<!DOCTYPE html>

如果你是使用html 5

來源

2010-04-28 14:43:56 tcables

所以這就是爲什麼法姆維爾不會在我的iPhone工作...該死 – KevMo 2010-04-28 15:26:26

另外，HTML 5不可用，直到iPhone OS 4.0 – tcables 2010-04-28 16:20:17

自iPhone OS 3.0起支持HTML 5視頻 – KevMo 2010-04-29 19:50:53

正如我之前在4月21日發表的評論中所說的，iPhone，iPad和我所有的...不支持Flash，並且贏得了對它的支持。但iPhone OS 3.0支持HTML5視頻標籤，你可以在這個article讀它，看看它在這個one

AKAMAI是視頻提供商和iPhone頁面使用HTML5視頻標籤。

iPhone僅支持mp4視頻或AAC音頻文件。

來源

2010-04-29 16:34:06 Cbe317

好的，我一直在試圖弄清楚這一點。我可以將HTML5視頻用於Firefox，Chrome和Safari，而不是爲我的iPad或iPhone移動Safari。

我給你們的問題是，你們是如何提供電影文件？你們有沒有讀過這個網頁？

http://developer.apple.com/iphone/library/technotes/tn2010/tn2224.html

它談論分段器送電影數據的獨立位。請注意他們是如何建議發送文件...

<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"> 
    This browser does not support HTML5 video. 
</video>

此外，您可能想看看

http://www.ioncannon.net/projects/http-live-video-stream-segmenter-and-distributor/

http://www.ioncannon.net/programming/1015/ipad-streaming-video-and-more/

http://www.ioncannon.net/programming/452/iphone-http-streaming-with-ffmpeg-and-an-open-source-segmenter/

編輯

另一個鏈接，這一個完全幫助我找出我的問題。看到我們使用nginx和獨角獸來運行我們的Rails站點。不幸的是，nginx不支持字節範圍請求，但是apache可以。所以我在Apache上測試了它，並且它工作正常。這裏是我用作參考的文章。

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

注意到這行代碼

curl --range 0-99 http://example.com/test.mov -o /dev/null

你可以用它來看看你的服務器支持字節範圍請求。

希望這可以幫助一些人。

來源

2010-05-01 04:28:58 taelor

回答線程已經，但我沒有找到這樣的：

不包括poster屬性（）爲iPad/iPhone 3.x的支持。 iPhone OS 3存在一個主要錯誤，這意味着播放不適用於任何使用海報屬性和元素的HTML5視頻標籤。這在iPhone OS 4.0中得到了修復，但是現在仍然會有大量的OS 3用戶。該錯誤不會影響您應該保留的flashvars參數中的海報圖像的使用。

來源

2010-09-24 09:20:28 Blundell

GWT和HTML5視頻在移動Safari

回答

相關問題