Safari Web App中的iPhone和iPod上的HTML5視頻播放器行爲

在iPhone和iPod上，如果YouTube視頻嵌入網頁中，用戶可以觸摸視頻並開始播放視頻 - iOS媒體播放器幻燈片並且視頻以橫向方式全屏播放。視頻播放完畢後，iOS媒體播放器會滑出，顯示嵌入視頻的網頁。Safari Web App中的iPhone和iPod上的HTML5視頻播放器行爲

使用HTML5 <video>標籤，用戶可以觸摸視頻，視頻將「縮放」到全屏幕並開始播放，無論當前的設備方向如何。視頻播放完畢後，用戶必須點擊一次才能調出播放器控件，然後點擊「完成」以返回到網頁。

不幸的是，將我的視頻上傳到YouTube不適用於此應用程序，並且我沒有找到在視頻播放完成後返回網站的HTML5視頻播放器。我寧願要麼視頻播放器展示與YouTube嵌入視頻相同的行爲，要麼視頻播放內嵌視頻。在自定義UIWebView中強制插入視頻是可能的，但不幸的是，這不是一個選項（因爲這是一個Web應用程序，而不是本機應用程序）。此外，<video>屬性webkit-playsinline不起作用。

是否有任何可以複製嵌入式YouTube視頻行爲的HTML5視頻播放器？我是否錯過了任何明顯的Javascript解決方法？有沒有一種方法可以告訴窗口視頻在沒有用戶交互的情況下完成播放？

編輯：

感謝Jan，這個問題解決了。工作代碼如下，以及錯誤/註釋清單。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>scratchpad</title> 
</head> 
<body> 
<video id="video"> 
    <source src="movie.mp4" type="video/mp4" /> 
</video> 
<script type="text/javascript"> 
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false); 
</script> 
</body> 
</html>

錯誤我提出：
1.忘記在<video>標籤添加ID。
2.對webkitSupportsFullscreen進行測試 - 我無法將該屬性測試爲「true」。在代碼中this forum post註釋說，

// note: .webkitSupportsFullscreen is false while the video is loading

，但我無法在創建它返回true的條件。
3.完全錯過this stackoverflow post。

來源

2011-03-25 whlteXbread

嗯，不能嘗試自己......但肯定你已經看到了這個？

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

所以，「webkitEnterFullScreen（）」可能是你的朋友（雖然醫生說其只讀）：

http://nathanbuskirk.com/?p=1

在線視頻是不可能的任何iOS設備上的旁邊iPad（到目前爲止）。

無論如何，你可以使用事件監聽器檢測在Javascript視頻的結尾：

document.getElementById('video').addEventListener('ended',videoEndListener,false);

乾杯，

月

來源

2011-03-26 12:15:11

不，我沒有設法找到。感謝您的鏈接。我將編寫一些代碼，看看我能否做到這一點，然後接受你的答案並用代碼更新我的問題。 – whlteXbread 2011-03-29 16:07:08

太棒了。非常感謝你的幫助！ – whlteXbread 2011-03-29 20:28:04

如果您試圖處理「完成」按鈕推送的事件，但會被警告在iOS> 4.3中不再觸發'已結束'事件。現在唯一被觸發的事件是「暫停」，這根本沒有幫助，因爲這是按下播放和暫停按鈕時觸發的同一事件。 – simianarmy 2011-09-20 18:20:35

從Safari文檔：

「重要提示：webkitEnterFullscreen（）方法只能響應用戶操作（例如單擊按鈕）來調用。不能調用webkitEnterFullscreen（）例如，對onload（）事件的響應。「

這可能會解釋爲什麼您的webkitEnterFullscreen始終是false。

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13

簡的解決方案處理「結束」事件是在你的情況最好。

來源

2012-02-01 10:47:19 aeldron

Safari Web App中的iPhone和iPod上的HTML5視頻播放器行爲

回答

相關問題