एचटीएमएल 5-जावास्क्रिप्ट-आधारित वीडियो प्लेयर का स्नैपशॉट कैसे लें?

असल में, मेरे पास जावास्क्रिप्ट फ़ंक्शन वाला एक HTML5 पृष्ठ है जो मुझे WMV वीडियो फ़ाइल चलाने की अनुमति देता है। जब वीडियो चल रहा है (विराम या बिना) के स्नैपशॉट लेने की आवश्यकता है और किसी भी छवि प्रारूप जेपीजी या बीएमपी में सहेजा गया है। कोई भी मदद की सराहना करेगा। धन्यवाद।एचटीएमएल 5-जावास्क्रिप्ट-आधारित वीडियो प्लेयर का स्नैपशॉट कैसे लें?

<!DOCTYPE HTML> 

    <html> 
     <head> 
      <title>HTML5 video</title>   
    <script type="text/javascript"> 
     function checkPlay() { 
      var myVideo = document.getElementById("myVid"); 
      var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>'; 
      try { 
       var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv"); 
       if ((canPlay == "no") || (canPlay == "")) { 
        myVideo.innerHTML = ytStr; 
       } 
       new MediaElement(v, { success: function (media) { media.play(); } }); 
      } catch (err) { 
       myVideo.innerHTML = ytStr; 
      } 
     } 
    </script> 
     </head> 
     <body onload="checkPlay()"> 
      <div id="myVid"/> 

     </body> 
    </html>

स्रोत

2012-12-07 Ahmed MEZRI

क्या आप वीडियो प्लेयर में किसी विशिष्ट पल का स्नैपशॉट चाहते हैं या आप एक पूर्ण आकार स्क्रीनशॉट चाहते हैं? यदि आप वीडियो प्लेयर का स्क्रीनशॉट मांग रहे हैं, तो यह थोड़ा चुनौतीपूर्ण हो सकता है लेकिन एक स्क्रीन शॉट आप http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take- स्क्रीनशॉट – aug

आप वर्तमान वीडियो की एक प्रति लेने के लिए और drawImage() समारोह का उपयोग कर एक कैनवास तत्व में संग्रहीत कर सकते हैं।

मेरे पास एक पूरा उदाहरण है जिसका कोड आप Video/canvas screenshot पर देख सकते हैं जो आपको सही रास्ते पर सेट करना चाहिए।

स्रोत

2012-12-07 10:06:38

हालांकि, इसके लिए ओपी को अपने 'iframe' से छुटकारा पाने की आवश्यकता होगी, और इसके बजाय' वीडियो 'टैग का उपयोग करें। ऐसा नहीं है कि इसके साथ कुछ भी गलत है, इसके विपरीत, बस इसे इंगित करें। – Cerbrus

किसी छवि फ़ाइल में वीडियो फ्रेम की प्रतिलिपि बनाने के लिए वीडियो को ठीक से लोड करना, छवि को कैनवास में कॉपी करना और उसे फ़ाइल में निर्यात करना शामिल है। यह पूरी तरह से संभव है, लेकिन कुछ ऐसे स्थान हैं जहां आप परेशानी में भाग ले सकते हैं, तो चलिए इसे एक समय में एक कदम उठाएं।

1) वीडियो

लोड हो रहा है पिक्सल पर कब्जा करने के लिए, आप एक <video> टैग में वीडियो लोड करने की जरूरत है, एक iframe या object या embed नहीं। और फ़ाइल को वेब सर्वर से आने की आवश्यकता है, जो वही है जिस पर वेब पेज स्वयं है (जब तक आप cross-origin headers का उपयोग नहीं करते हैं, जो जटिल है और आपके ब्राउज़र में काम नहीं कर सकता है। यह सुरक्षा कारणों से ब्राउज़र द्वारा प्रतिबंधित है। कोड स्थानीय फाइल सिस्टम से वीडियो लोड करता है, जो काम नहीं करेगा।

आपको सही फ़ाइल प्रारूप भी लोड करने की आवश्यकता है। आईई 9 + डब्लूएमवी खेल सकता है, लेकिन यह संभावना नहीं है कि कोई अन्य ब्राउज़र होगा। यदि आप कर सकते हैं, तो लोड करें multiple sources, webm का उपयोग कर, mp4 और आदर्श ogg/Theora।

var container = document.getElementById("myVid"), 
    video = document.createElement('video'), 
    canCapture = true; 
if (!video.canPlayType('video/wmv')) { 
    /* If you don't have multiple sources, you can load up a Flash fallback here 
     (like jPlayer), but you won't be able to capture frames */ 
    canCapture = false; 
    return; 
} 
video.src = 'myvideo.wmv'; 
container.appendChild(video); 
video.play(); //or put this in a button click handler if you want your own controls

2) इसके बाद, कैनवास और एक ड्राइंग संदर्भ पैदा करते हैं। आपको वास्तव में इसे डीओएम से भी संलग्न करने की आवश्यकता नहीं है, लेकिन आपको इसे उस आकार में सेट करने की आवश्यकता है जिस पर आप परिणामी छवि को सहेजना चाहते हैं। इस उदाहरण के लिए, हम मान लेंगे कि आपके पास दिमाग में एक निश्चित आयाम है, लेकिन यदि आप चाहते हैं, तो आप इसे वीडियो आकार के एक से अधिक पर सेट कर सकते हैं। बस सुनिश्चित करें कि आप इसे वीडियो पर 'loadedmetadata' ईवेंट के अंदर चलाएं, क्योंकि वीडियो आयाम तुरंत उपलब्ध नहीं होंगे।

var canvas = document.createElement('canvas'); 
canvas.width = 640; 
canvas.height = 480; 
var ctx = canvas.getContext('2d'); 
// if you want to preview the captured image, 
// attach the canvas to the DOM somewhere you can see it.

3) छवि को कैनवास पर कैप्चर करें और इसे फ़ाइल में सहेजें। इस कोड को एक बटन पर या टाइमर के अंदर onclick ईवेंट में रखें - हालांकि आप यह तय करना चाहते हैं कि छवि कैद हो जाती है। DrawImage विधि का प्रयोग करें। ([यह लेख] एक अच्छा विवरण, सुरक्षा चिंताओं सहित प्रदान करता है। यह एक छवि के लिए के रूप में वीडियो के लिए ही है।)

//draw image to canvas. scale to target dimensions 
ctx.drawImage(video, 0, 0, canvas.width, canvas.height); 

//convert to desired file format 
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'

jpg फ़ाइल अब रूप में सहेजा जाता छवि फ़ाइल निर्यात एक Data URI, जो एक लंबी जावास्क्रिप्ट स्ट्रिंग है जो पूर्ण बाइनरी फ़ाइल के एन्कोडेड संस्करण का प्रतिनिधित्व करती है। यह आप पर निर्भर है कि इसके साथ क्या करना है। आप इसे सीधे img तत्व में सीधे इसे src: myImage.src = dataUri; पर सेट करके रख सकते हैं।

यदि आप इसे किसी फ़ाइल में सहेजना चाहते हैं, तो आपको इसे सर्वर पर अपलोड करने की बहुत आवश्यकता है। ऐसा करने के तरीके पर good tutorial यहां दिया गया है।

सामान्य रूप से, उपर्युक्त सभी ब्राउज़र इसका समर्थन करने वाले ब्राउज़र तक ही सीमित हैं।यदि आप डब्लूएमवी वीडियो से चिपकने जा रहे हैं, तो आप इंटरनेट एक्सप्लोरर 9 + तक काफी सीमित हैं। 6-8 या तो वीडियो टैग या कैनवास का समर्थन नहीं करते हैं। यदि आप अधिक वीडियो प्रारूप जोड़ सकते हैं, तो आप फ़ायरफ़ॉक्स (3.5+) और क्रोम का उपयोग कर सकते हैं।

स्रोत

2012-12-07 14:46:33 brianchirls

धन्यवाद। मैंने अभी यूट्यूब वीडियो के स्नैपशॉट लेने के लिए एक बुकमार्क स्क्रिप्ट बनाई है: [यूट्यूब-स्क्रीनशॉट] (https://github.com/ReeganExE/youtube-screenshot) –

यह बहुत ही बढ़िया है, मुझे आश्चर्य है कि किसी बिंदु पर स्नैपशॉट कैसे लेना है विडीयो मे? मेरा मतलब है कि 10 वीं सेकंड। – Tomasz

<html> 
<body> 

    <video controls> 
    <source src="C:/Users/ganesha/Desktop/Aararum.mp4" type="video/mp4"></source> 
    </video> 
    <canvas id="canvas" width="640" height="480"></canvas> 
    <button id="snap" onclick="snap()">Snap Photo</button> 

    <!-- start the script ... within that declare variables as follows... --> 
    <script> 
    var video=document.querySelector('video'); 
    var canvas=document.querySelector('canvas'); 
    var context=canvas.getContext('2d'); 
    var w,h,ratio; 

    //add loadedmetadata which will helps to identify video attributes 

    video.addEventListener('loadedmetadata', function() { 
    ratio = video.videoWidth/video.videoHeight; 
    w = video.videoWidth-100; 
    h = parseInt(w/ratio,10); 
    canvas.width = w; 
    canvas.height = h; 
    },false); 

    function snap() { 
    context.fillRect(0,0,w,h); 
    context.drawImage(video,0,0,w,h); 
    } 
    </script> 

</body> 
</html>

स्रोत

2013-04-09 07:10:59

धन्यवाद यह बहुत अच्छी तरह से काम करता है –

महान काम करता है! लेकिन यह केवल तभी काम करता है जब वीडियो स्रोत उसी सर्वर पर होस्ट किया जाता है और क्रॉस मूल नहीं होता है। लेकिन आपके समाधान के लिए धन्यवाद! –

एचटीएमएल 5-जावास्क्रिप्ट-आधारित वीडियो प्लेयर का स्नैपशॉट कैसे लें?

उत्तर

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