2012-05-30 22 views
5

में कैनवास के अंदर एक वीडियो को मैन्युअल रूप से "खेलना", तो मैं यह करने की कोशिश कर रहा हूं: मैं एक वीडियो तत्व में एक वीडियो लोड करना चाहता हूं, लेकिन इसे "सामान्य" में नहीं खेला है " मार्ग। मूवी के फ़्रेमेट के अनुसार गणना की गई एक समय अंतराल का उपयोग करके, मैं प्रत्येक पुनरावृत्ति परएचटीएमएल 5: आईओएस सफारी

ए मैन्युअल रूप से वीडियो को 'फ्रेम' (या जितना संभव हो सके उतना करीब) अग्रिम करना चाहता हूं।
बी। उस फ्रेम को कैनवास में खींचें।

इस प्रकार कैनवास के अंदर वीडियो "प्ले" है।

यहाँ कुछ कोड है:

<video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"></video> 
<canvas width="400" height="224" id="videoCanvas"></canvas> 

<script type="text/javascript"> 

var videoDom = document.querySelector("#mainVideo"); 
var videoCanvas = document.querySelector("#videoCanvas"); 
var videoCtx = null; 
var interval = null; 

videoDom.addEventListener('canplay',function() { 
    // The video's framerate is 24fps, so we should move one frame each 1000/24=41.66 ms 
    interval = setInterval(function() { doVideoCanvas(); }, 41.66); 
}); 

videoDom.addEventListener('loadeddata',function() { 
    videoCtx = videoCanvas.getContext('2d'); 
}); 

function doVideoCanvas() { 
    videoCtx.drawImage(videoDom,0,0); 
    //AFAIK and seen, currentTime is in seconds 
    videoDom.currentTime += 0.0416; 
} 

</script> 

यह Google Chrome में पूरी तरह से काम करता है, लेकिन यह एक iPhone की सफारी में काम नहीं करता है;
वीडियो फ्रेम कैनवास में सभी पर नहीं खींचे जाते हैं।

  • वीडियो घटनाओं मैं में है शुरू हो रहा हो झुका ('अलर्ट' किया था और वे दिखाया गया):

    मुझे यकीन है कि बनाया है।

  • मेरे पास कैनवास पर नियंत्रण है ('fillRect' और यह भर गया)।

[मैं भी drawImage में आयामों को निर्दिष्ट करने की कोशिश की है - यह मदद नहीं की]
एक वीडियो वस्तु नहीं लागू बिल्कुल Iphone सफारी में साथ drawImage है ...?

  • वीडियो के currentTime संपत्ति के लिए प्रवेश केवल प्रदान किया जाता है:

    यहां तक ​​कि अगर मैं वीडियो फ्रेम पर कब्जा करने के लिए एक रास्ता खोजने के लिए प्रबंधन करेंगे, वहाँ भी Iphone के ब्राउज़र में कुछ अन्य मुद्दे हैं एक बार वीडियो शुरू हो गया है (एक मानक तरीके से)। मैंने शायद किसी भी तरह से "इसे छुपाया" और उसके बाद कैप्चरिंग के बारे में सोचा, लेकिन ऐसा करने का प्रबंधन नहीं किया। यह भी सोचा कि शायद किसी भी तरह से वीडियो बजाना शुरू करें और फिर तुरंत इसे रोक दें;
    आईओएस सफारी में वीडियो चलाने के लिए मजबूर रूप से शुरू करने का कोई तरीका नहीं प्रतीत होता है। video.play(), या autoplay कुछ भी नहीं लगता है। केवल तभी जब उपयोगकर्ता वीडियो पर "प्ले सर्कल" टैप करता है तो वीडियो खेलना शुरू कर देता है (स्क्रीन पर ले जा रहा है, आमतौर पर आईफोन के ब्राउज़र पर वीडियो के साथ)।

  • एक बार वीडियो चलाता है - currentTime संपत्ति अग्रेषित हो जाती है। वीडियो पर ही। जब आप वीडियो को रोकते हैं और सामान्य HTML पृष्ठ पर वापस जाते हैं - तो आप वीडियो तत्व बदलने पर फ्रेम देख सकते हैं। हालांकि, एक धीमे चरण में (Google क्रोम के विपरीत, जहां यह दर उतनी आसान लगती है कि यह खेल रहा है) - आईफोन में यह प्रति सेकंड 2-3 फ्रेम की तरह कुछ की दर दिखता है। यह अंतराल के समय को बदलने का प्रयास करने के बावजूद भी रहता है, मुझे लगता है कि आईफोन पर ब्राउज़र संभाल सकता है कि न्यूनतम समय सीमा है।

"बोनस सवाल" :) - वीडियो तत्व पर फ्रेम घटना से प्रगति जब - सर्कल "प्ले बटन" दिखाई वीडियो तत्व पर (वास्तव में नहीं 'चलाने' के बाद से यह है)।क्या इसे छिपाने और इसे अदृश्य बनाने के लिए वैसे भी है?

यह आईफोन 3 जीएस (3 जी और वाईफ़ाई दोनों के साथ) और आईफोन 4 पर परीक्षण किया गया है, दोनों आईओएस 5 चल रहे हैं, दोनों का वर्णन जैसा ही है।

उत्तर

1

दुर्भाग्यवश मेरे पास इसका परीक्षण करने के लिए आईओएस डिवाइस नहीं है, लेकिन मुझे नहीं लगता कि आपको वास्तव में वीडियो फ्रेम को currentTime संपत्ति का उपयोग करने का प्रयास करने की आवश्यकता है। सामान्य प्रक्रिया कुछ इस तरह दिखता है:

  1. नियंत्रण के बिना एक वीडियो तत्व बनाने (छोड़ controls विशेषता)
  2. तत्व
  3. जब वीडियो को एक अंतराल पर कैनवास को यह आकर्षित खेल रहा है छिपाने

जैसा कि आपने पाया है, आईओएस डिवाइस एचटीएमएल 5 वीडियो (या वास्तव में ऑडियो) पर ऑटोप्ले का समर्थन नहीं करते हैं, लेकिन आप play() विधि का उपयोग कर वीडियो के प्लेबैक को शुरू करने के लिए एक अलग नियंत्रण बना सकते हैं।

इस दृष्टिकोण को प्ले बटन के साथ होने वाली समस्या को हल करना चाहिए क्योंकि इस मामले में आप वास्तव में वीडियो चला रहे हैं।

+3

उत्तर और सुझावों के लिए धन्यवाद! मुझे इस दस्तावेज़ का सामना करना पड़ा है: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html जिसमें एक पंक्ति बताती है: "नोट: कैनवास drawImage() विधि के स्रोत के रूप में वीडियो वर्तमान में आईओएस पर समर्थित नहीं है। " : \ लेकिन एक और विकल्प वीडियो को एक छवि अनुक्रम में परिवर्तित करना होगा - और कैनवास पर उन लोगों का उपयोग करें! –

+0

अच्छी तरह से युवाल खोजें, यह वास्तव में जानना उपयोगी है। आपको यह जोड़ना चाहिए कि यह आपके प्रश्न का उत्तर है और इसे स्वीकार करें। –

+0

इसी समय एंड्रॉइड क्रोम और एंड्रॉइड ब्राउज़र में भी इसी तरह की क्षमता की कमी है। – Falcon

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