में कैनवास के अंदर एक वीडियो को मैन्युअल रूप से "खेलना", तो मैं यह करने की कोशिश कर रहा हूं: मैं एक वीडियो तत्व में एक वीडियो लोड करना चाहता हूं, लेकिन इसे "सामान्य" में नहीं खेला है " मार्ग। मूवी के फ़्रेमेट के अनुसार गणना की गई एक समय अंतराल का उपयोग करके, मैं प्रत्येक पुनरावृत्ति परएचटीएमएल 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 चल रहे हैं, दोनों का वर्णन जैसा ही है।
उत्तर और सुझावों के लिए धन्यवाद! मुझे इस दस्तावेज़ का सामना करना पड़ा है: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html जिसमें एक पंक्ति बताती है: "नोट: कैनवास drawImage() विधि के स्रोत के रूप में वीडियो वर्तमान में आईओएस पर समर्थित नहीं है। " : \ लेकिन एक और विकल्प वीडियो को एक छवि अनुक्रम में परिवर्तित करना होगा - और कैनवास पर उन लोगों का उपयोग करें! –
अच्छी तरह से युवाल खोजें, यह वास्तव में जानना उपयोगी है। आपको यह जोड़ना चाहिए कि यह आपके प्रश्न का उत्तर है और इसे स्वीकार करें। –
इसी समय एंड्रॉइड क्रोम और एंड्रॉइड ब्राउज़र में भी इसी तरह की क्षमता की कमी है। – Falcon