এইচটিএমএল 5 ভিডিও শেষ হলে সনাক্ত করুন

251

এইচটিএমএল 5 <video>এলিমেন্টটি শেষ হয়ে গেলে আপনি কীভাবে সনাক্ত করতে পারেন ?

html html5-video

অ্যাপল থেকে পরীক্ষার পৃষ্ঠাটি সহ খুব দরকারী ডকুমেন্টেশন: ডেভেলপার.এপ্লে .com/লিবারি / সাফারি/#samplecode/… আপনি HTML5 ভিডিও ইভেন্টগুলিতে সমস্ত জানতে চেয়েছিলেন!

— ভাইবল

310

আপনি প্রথম পরম হিসাবে 'সমাপ্ত' সহ ইভেন্ট শ্রোতাদের যুক্ত করতে পারেন

এটার মত :

<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

@ অ্যালানস্টেপ্পস আমি যা সংগ্রহ করতে পারি তার থেকে, এই উত্তরটিতে if(!e) { e = window.event; }মূলত অন্তর্ভুক্ত থাকা বিবৃতিটি আইই এর attachEventপ্রাথমিক সংস্করণগুলির সাথে সংযুক্ত ইভেন্ট হ্যান্ডলারের মধ্যে থেকে সর্বশেষতম ইভেন্ট পাওয়ার জন্য আইই-নির্দিষ্ট কোড । যেহেতু এই ক্ষেত্রে, হ্যান্ডলারটি সংযুক্ত করা হচ্ছে addEventListener(এবং আইআই এর সেই প্রাথমিক সংস্করণগুলি এইচটিএমএল 5 ভিডিও নিয়ে কাজ করার ক্ষেত্রে অপ্রাসঙ্গিক), এটি সম্পূর্ণ অপ্রয়োজনীয় ছিল এবং আমি এটিকে সরিয়ে দিয়েছি।

— মার্ক আমেরিকা

3

এই পদ্ধতিটি ব্যবহার করার সময় একটি বিষয় লক্ষণীয়, ওএস এক্স (10.11) এর এল ক্যাপিটান ভার্ফেসের সাফারি 'সমাপ্ত' ইভেন্টটি ধরবে না। সুতরাং সেই ক্ষেত্রে, আমার 'টাইমআপডেট' ইভেন্টটি ব্যবহার করা উচিত এবং তারপরে এই সময়কার সময়টি আবার 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) এর আওতায় আছি

— আন্তোনাল

@ অ্যান্টোনাল: আপনার যদি সমস্যা হয় তবে আমি এটি একটি নতুন প্রশ্ন হিসাবে পোস্ট করব।

— অ্যালাস্টার পিটস

@ সমস্ত: আপনি এটির মতো এটিও করতে পারেন। <ভিডিও বর্গ = "video_player" ID = "ভিডিও" পোস্টার = "ইমেজ / ভিডিও-pc.jpg" tabindex = "0" উচ্চতা = "100%" onended = "myHandler ()">

— VendettaDroid

5

@ অ্যাস্টায়ারপিটস এটি ক্রোমে বৈধ নয়। ডারক্রোরোর উত্তরটি ক্রোমের সাথে কাজ করার একমাত্র উপায়। এটি এখনও ফায়ারফক্সে কাজ করেছে।

— জেফ

মৃত লিঙ্কগুলি। w3schools.com/tags/ref_eventattributes.asp => মিডিয়া ইভেন্ট

— অরেলিন

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>

ইভেন্টের প্রকারের এইচটিএমএল অডিও এবং ভিডিও ডিওএম রেফারেন্স

— d1jhoni1b
সূত্র

11

-1। ২০১১ সালে প্রকাশিত jQuery 1.7 থেকে .on()বেশি অগ্রাধিকার দেওয়া হয়েছে .bind()Also এছাড়াও, দয়া করে আপনার কোডটি সঠিকভাবে ফর্ম্যাট করুন।

— মার্ক আমেরিকা

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>

'ইভেন্টলাইস্টনার' লাইনে সেই ইভেন্টগুলি ক্যাপচার করার জন্য 'বিরতি' বা 'প্লে' দিয়ে 'সমাপ্ত' শব্দটির বিকল্প দিন।

— user3758025
সূত্র

এই জেএস কোডটিতে আপনার একটি সিনট্যাক্স ত্রুটি রয়েছে। যুক্তি তালিকার পরে অনুপস্থিত)

— ফ্রিজসম্বোর

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

আপনার কাছে সব ভিডিও ঘটনা nicluding শ্রোতা যোগ করতে পারেন 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
সূত্র