無法通過HTML5上的HTML5視頻元素訪問文本字段

我正在用全寬度背景視頻構建頁面。爲了達到這個目的，我把視頻放在絕對位置，拉伸它，給它一個負Z指數。作爲頁面內容，我添加了一個表單。無法通過HTML5上的HTML5視頻元素訪問文本字段

<style type="text/css"></style> 
    #video-background{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     min-width: 100%; 
     min-height: 100%; 
     width: auto; 
     height: auto; 
     z-index: -1000; 
     overflow: hidden; 
    } 
</style> 

<video id="video-background" preload="auto" autoplay="true" muted="muted" volume="0"> 
    <source src="../../css/video/globe.mp4" type="video/mp4"> 
</video> 

<form action="#"> 

    <input type="email" name="email" value="Enter your email address"> 

    <input type="submit" name="submit" value="Submit Email"> 

</form>

當我在iPhone（Safari）上訪問此頁面並嘗試點擊文本框時，我無法集中注意到該元素。就好像有東西阻塞元素或阻止觸摸事件。放置在這裏的文字也不可選。

相對定位形式並賦予它更高的z-索引似乎沒有任何影響。

form{ 
    position: relative; 
    z-index: 1000; 
}

我測試了iPhone 4和iPhone 5上運行iOS 7.0.4的這個頁面。

任何建議將不勝感激。

來源

2014-01-29 Sceletia

你使用的相對位置的父（容器）視頻元素在哪裏？ – mcmac

嗨，不，因爲視頻是整個頁面的背景。 – Sceletia

好的我知道你想要做什麼。嘗試爲父視頻示例創建相對位置創建div並添加類容器，將寬度和高度設置爲100％和相對位置。移動此div內的視頻元素。我可以幫助你，但我需要看到更多的代碼 - 你的網站，因爲現在我不知道你做了什麼。 – mcmac

不要擔心更多的例子。由於蘋果的限制性政策，您目前無法做到這一點。 iPhone上禁止使用「內聯」視頻（官方任期）。它將在iPad上運行。有一個解決方法，但它需要網站在一個容器應用程序中。在版本3.1之前，所有機器人都會遇到同樣的問題

該視頻將始終在本地QuickTime播放器中播放，並且確實覆蓋了放置在其上的任何圖層 - 即使您能夠在視頻暫停，你觸摸事件通常被QuickTime

陷入欲瞭解更多信息，請查看我的其他答案 - 我在我的手機現在...

來源

2014-01-30 09:11:20

謝謝Jörn，他也很懷疑Android也很好。你能提供一個鏈接或任何更多的信息包裝在一個容器應用程序的網站？ – Sceletia

www.phonegap.com似乎是解決方案，雖然我沒有真正嘗試過。它實際上允許網絡應用程序使用通常僅適用於本機應用程序的設備API。它可能具有啓用內聯視頻的功能（如果這不是默認設置）。還可以查看https://build.phonegap.com/，它允許您在不安裝編譯器的情況下開發應用程序 - 這是在他們的服務器上完成的=）更多信息您的特定主題：https：//groups.google.com/forum /＃！話題/ PhoneGap的/ F7y_5XtyejQ –

無法通過HTML5上的HTML5視頻元素訪問文本字段

回答

相關問題