पता लगाएं कि HTML5 वीडियो कब खत्म होता है

252

जब HTML5 <video>तत्व ने खेलना समाप्त कर लिया है, तो आप कैसे पता लगा सकते हैं ?

html html5-video

Apple से परीक्षण पृष्ठ के साथ बहुत उपयोगी दस्तावेज: developer.apple.com/library/safari/#samplecode/… आप सभी HTML5 वीडियो घटनाओं पर जानना चाहते थे!

— विएबेल

311

आप पहले परम के रूप में 'समाप्त' के साथ एक घटना श्रोता जोड़ सकते हैं

ऐशे ही :

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

— Lothereus
स्रोत

8

यह एकमात्र वीडियो है। "ऑन एंड" ईवेंट जो पूरे इंटरनेट में काम करता है। वाहवाही!

— इसहाक

10

यदि ई मौजूद है तो आप जांच क्यों करते हैं?

— एलन स्टेप्स

3

@AllanStepps मैं जो इकट्ठा कर सकता हूं, वह if(!e) { e = window.event; }कथन जिसमें यह उत्तर मूल रूप से शामिल है, IE के attachEventशुरुआती संस्करणों के साथ संलग्न इवेंट हैंडलर के भीतर से नवीनतम घटना प्राप्त करने के लिए IE- विशिष्ट कोड है । चूंकि इस मामले में, हैंडलर संलग्न किया जा रहा है addEventListener(और IE के उन शुरुआती संस्करणों को एचटीएमएल 5 वीडियो से निपटने वाले लोगों के लिए अप्रासंगिक है), यह पूरी तरह से अनावश्यक था और मैंने इसे हटा दिया है।

— मार्क अमेरी जूल

3

इस पद्धति का उपयोग करते समय ध्यान देने योग्य एक बात, ओएस एक्स (10.11) के एल कैपिटन verson पर सफारी 'समाप्त' घटना को नहीं पकड़ती है। तो उस स्थिति में, मुझे 'टाइमअपडेट' ईवेंट का उपयोग करने की आवश्यकता थी और फिर यह जांचना चाहिए कि यह समकालिक समय फिर से 0 के बराबर था या नहीं।

— कैम

2

लूप को झूठे पर सेट करना याद रखें, अन्यथा समाप्त होने वाली घटना को ट्रिगर नहीं किया जाएगा।

— इज़राइल मोरालेस

134

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

यह उचित अनुभाग है:

<video src="video.ogv">
     video not supported
</video>

तो आप उपयोग कर सकते हैं:

<script>
    var video = document.getElementsByTagName('video')[0];

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

onendedसभी मीडिया तत्वों पर एक HTML5 मानक घटना है, HTML5 मीडिया तत्व (वीडियो / ऑडियो) इवेंट प्रलेखन देखें।

— एलेस्टेयर पिट्स
स्रोत

2

मैंने "समाप्त" ईवेंट को ठीक उसी तरह से पकड़ने का प्रयास किया है, जैसा आपने प्रस्तुत किया है, लेकिन यह ईवेंट फायरिंग नहीं है। मैं सफारी 5.0.4 (6533.20.27) से नीचे हूं

— एंटोनियल

@AntonAL: यदि आप समस्या कर रहे हैं तो मैं इसे एक नए प्रश्न के रूप में पोस्ट करूँगा।

— एलेस्टेयर पिट्स

@ सभी: आप इसे इस तरह से भी कर सकते हैं। <वीडियो वर्ग = "video_player" id = "वीडियो" पोस्टर = "छवियों / वीडियो-pc.jpg" tabindex = "0" ऊंचाई = "100%" onended = "myHandler ()">

— VendettaDroid

5

@AlastairPitts क्रोम पर यह मान्य नहीं है। डार्करो का जवाब एकमात्र तरीका है जो मुझे क्रोम के साथ काम करने के लिए मिला। यह अभी भी फ़ायरफ़ॉक्स पर काम करता था।

— जेफ

मृत लिंक। w3schools.com/tags/ref_eventattributes.asp => मीडिया इवेंट्स

— Aurelien

36

jQuery

$("#video1").bind("ended", function() {
   //TO DO: Your code goes here...
});

एचटीएमएल

<video id="video1" width="420">
  <source src="path/filename.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

घटना प्रकार HTML ऑडियो और वीडियो डोम संदर्भ

— d1jhoni1b
स्रोत

11

-1। jQuery 1.7 के बाद से .on()पसंद किया गया है .bind(), जो 2011 में जारी किया गया था। इसके अलावा, कृपया अपने कोड को ठीक से प्रारूपित करें।

— मार्क एमी जूल

4

यहाँ एक पूर्ण उदाहरण है, मुझे आशा है कि यह मदद करता है =)।

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" controls="controls">
  <source src="your_video_file.mp4" type="video/mp4">
  <source src="your_video_file.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        if(!e) { e = window.event; }
        alert("Video Finished");
    }
</script>
</body> 
</html>

— Oscar_Wroclaski
स्रोत

4

यहां एक सरल दृष्टिकोण है जो वीडियो समाप्त होने पर ट्रिगर होता है।

<html>
<body>

    <video id="myVideo" controls="controls">
        <source src="video.mp4" type="video/mp4">
        etc ...
    </video>

</body>
<script type='text/javascript'>

    document.getElementById('myVideo').addEventListener('ended', function(e) {

        alert('The End');

    })

</script>
</html>

'EventListener' लाइन में उन घटनाओं को पकड़ने के लिए 'पॉज़' या 'प्ले' के साथ 'समाप्त' शब्द का विकल्प दिया जाता है।

— user3758025
स्रोत

इस JS कोड में आपके पास एक सिंटैक्स त्रुटि है। तर्क सूची के बाद गुम)

— frssombor

1

आप बस onended="myFunction()"अपने वीडियो टैग में जोड़ सकते हैं ।

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>

— जे सी आर
स्रोत

0

आप श्रोता सभी वीडियो घटनाओं को जोड़ सकते हैं ended, loadedmetadata, timeupdateजहां endedवीडियो समाप्त होने पर फ़ंक्शन को बुलाया जाता है

$("#myVideo").on("ended", function() {
   //TO DO: Your code goes here...
      alert("Video Finished");
});

$("#myVideo").on("loadedmetadata", function() {
      alert("Video loaded");
  this.currentTime = 50;//50 seconds
   //TO DO: Your code goes here...
});


$("#myVideo").on("timeupdate", function() {
  var cTime=this.currentTime;
  if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
      alert("Video played "+cTime+" minutes");
   //TO DO: Your code goes here...
  var perc=cTime * 100 / this.duration;
  if(perc % 10 == 0)//Alerts when every 10% watched
      alert("Video played "+ perc +"%");
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <video id="myVideo" controls="controls">
    <source src="your_video_file.mp4" type="video/mp4">
      <source src="your_video_file.mp4" type="video/ogg">
        Your browser does not support HTML5 video.
  </video>

</body>

</html>

स्निपेट का विस्तार करें

— jafarbtech
स्रोत