2011-03-25 10 views
14

आईफोन और आईपॉड पर, यदि कोई यूट्यूब वीडियो वेब पेज में एम्बेड किया गया है, तो उपयोगकर्ता वीडियो को स्पर्श कर सकता है और वीडियो खेलना शुरू कर देगा-आईओएस मीडिया प्लेयर स्लाइड्स में और वीडियो लैंडस्केप ओरिएंटेशन में पूर्ण स्क्रीन चलाता है। एक बार वीडियो समाप्त हो जाने के बाद, आईओएस मीडिया प्लेयर वापस आ गया, वेब पेज को प्रकट किया जहां वीडियो एम्बेड किया गया था।सफारी वेब ऐप्स में आईफोन और आईपॉड पर एचटीएमएल 5 वीडियो प्लेयर व्यवहार

एचटीएमएलटैग का उपयोग करके, उपयोगकर्ता वीडियो को स्पर्श कर सकता है और वीडियो पूर्ण स्क्रीन पर "ज़ूम" करेगा और वर्तमान डिवाइस अभिविन्यास जो भी हो, खेलना शुरू कर देगा। एक बार वीडियो चलाने के बाद, उपयोगकर्ता को प्लेयर नियंत्रण लाने के लिए एक बार टैप करना होगा, और उसके बाद वेब पेज पर वापस जाने के लिए "पूर्ण" टैप करें।

दुर्भाग्यवश, YouTube पर मेरे वीडियो अपलोड करना इस एप्लिकेशन के लिए एक विकल्प नहीं है, और मुझे एक HTML5 वीडियो प्लेयर नहीं मिला है जो वीडियो समाप्त होने के बाद वेबसाइट पर लौटता है। मैं या तो पसंद करूंगा कि वीडियो प्लेयर यूट्यूब एम्बेडेड वीडियो के समान व्यवहार दिखाता है, या वीडियो इनलाइन बजाता है। एक अनुकूलित UIWebView में इनलाइन वीडियो को मजबूर करना संभव है, लेकिन दुर्भाग्य से यह एक विकल्प नहीं है (क्योंकि यह एक वेब ऐप है, न कि मूल ऐप नहीं)। इसके अतिरिक्त, <video> संपत्ति webkit-playsinline काम नहीं करती है।

क्या कोई HTML5 वीडियो प्लेयर हैं जो एम्बेडेड YouTube वीडियो व्यवहार को दोहराने में सक्षम हैं? क्या मुझे कोई स्पष्ट जावास्क्रिप्ट कामकाज याद आ रहा है? खिड़की को बताने के लिए कोई तरीका है कि उपयोगकर्ता बिना किसी इंटरैक्शन के वीडियो चला रहा है?

संपादित करें:

जनवरी के लिए धन्यवाद, इस समस्या का समाधान है। गलतियों/नोट्स की एक सूची के साथ, वर्किंग कोड निम्नानुसार है।

<!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> टैग में एक आईडी जोड़ने के लिए भूल।
2. webkitSupportsFullscreen के लिए परीक्षण - मैं कभी भी उस संपत्ति को "सत्य" के रूप में जांचने के लिए नहीं मिला। this forum post में कोड में एक टिप्पणी कहते हैं,

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

लेकिन मैं एक शर्त है जो यह सच लौटे बनाने में असमर्थ था।
3. पूरी तरह से this stackoverflow post चूक गया।

उत्तर

9

एचएम, खुद को कोशिश नहीं कर सकता ... लेकिन यकीन है कि आपने यह देखा है?

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 डिवाइस पर संभव नहीं है आईपैड (अब तक)।सफारी प्रलेखन से

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

चीयर्स,

जनवरी

+0

नहीं, मैं इसे ढूंढने में कामयाब नहीं रहा था। लिंक के लिए धन्यवाद। मैं यह देखने के लिए कुछ कोड तैयार करूंगा कि क्या मैं इसे जा सकता हूं, और फिर अपना उत्तर स्वीकार कर सकता हूं और कोड के साथ अपना प्रश्न अपडेट कर सकता हूं। – whlteXbread

+0

बहुत बढ़िया। आपकी मदद के लिए बहुत धन्यवाद! – whlteXbread

+1

यदि आप "पूर्ण" बटन को ईवेंट को धक्का देने की कोशिश कर रहे हैं, लेकिन चेतावनी दी जाए कि 'एंडेड' ईवेंट अब आईओएस> 4.3 में नहीं निकाला गया है। अब निकाल दिया गया एकमात्र घटना 'रोकें' है, जो कि सहायक नहीं है क्योंकि यह वही घटना है जब प्ले और पॉज़ बटन दबाए जाते हैं। – simianarmy

1

:

वैसे भी, आप एक घटना श्रोता का उपयोग करके Javascript में एक वीडियो के अंत का पता लगा सकते

" महत्वपूर्ण: webkitEnterFullscreen() विधि केवल उपयोगकर्ता कार्रवाई के जवाब में ही लागू की जा सकती है, जैसे कि बटन क्लिक करना। आप webkitEnterFullscreen() को नहीं बुला सकते एक अधिभार() घटना के लिए प्रतिक्रिया, उदाहरण के लिए। "

यह बता सकता है कि आपकी वेबकिट एंटरफुलस्क्रीन हमेशा झूठी क्यों है।

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

जनवरी के समाधान 'समाप्त हो गया' घटना से निपटने के अपने मामले में सबसे अच्छा है।

संबंधित मुद्दे