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

क्या यह जावास्क्रिप्ट या किसी अन्य तंत्र के माध्यम से प्राप्त करने योग्य है? मैं "वीडियो टैगिंग", "वीडियो लेबल करना", "वीडियो की व्याख्या करना" शब्द के साथ ऑनलाइन खोज करने का प्रयास करता हूं लेकिन कहां से शुरू करना है, इस पर उपयोगी दिशा नहीं मिल सका।

इस कार्य को कैसे प्राप्त किया जाए, इस पर किसी भी मार्गदर्शन या विचार की सराहना करें।

1
Mad 14 सितंबर 2020, 10:12

1 उत्तर

सबसे बढ़िया उत्तर

किसी वीडियो में किसी विशेष समय की तलाश करने के लिए आप HTML5MediaElement की currentTime प्रॉपर्टी का उपयोग कर सकते हैं:

आप इसका उपयोग वर्तमान समय प्राप्त करने के लिए भी कर सकते हैं ताकि आप कुछ ऐसा कर सकें:

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

नीचे दिया गया स्निपेट बटन और currentTime प्रॉपर्टी का उपयोग करके वीडियो में विभिन्न स्थानों पर कूदता हुआ दिखाता है:

var vid1 = document.getElementById("MyVid1");
var btn1 = document.getElementById("MyBtn1");
var btn2 = document.getElementById("MyBtn2");

vid1.onloadeddata = function() {
    vid1.pause()
    vid1.currentTime = 110;
    vid1.play()
};

btn1.addEventListener("click", function() {
     vid1.pause()
     vid1.currentTime = 210;
     vid1.play()
});

btn2.addEventListener("click", function() {
     vid1.pause()
     vid1.currentTime = 110;
     vid1.play()
});
<video id="MyVid1" width="320" height="176" controls autoplay loop muted playsinline>
  <source   src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

<button id="MyBtn1" type="button">Jump to 210</button>

<button id="MyBtn2" type="button">Jump to 110</button>
2
Mick 14 सितंबर 2020, 12:36