पता लगाएं कि HTML5 वीडियो तत्व

Question

चला रहा है, मैंने यह पता लगाने के लिए कुछ प्रश्न देखे हैं कि कोई HTML5 तत्व चल रहा है या नहीं, लेकिन इसका जवाब नहीं मिल रहा है। मैंने डब्ल्यू 3 दस्तावेज को देखा है और इसमें "प्लेइंग" नामक एक कार्यक्रम है लेकिन मुझे इसे काम करने के लिए प्रतीत नहीं होता है।

यह मेरे वर्तमान कोड है:

var stream = document.getElementsByTagName('video'); 

function pauseStream() { 
    if (stream.playing) { 
    for (var i = 0; i < stream.length; i++) { 
     stream[i].pause(); 
     $("body > header").addClass("paused_note"); 
     $(".paused_note").text("Stream Paused"); 
     $('.paused_note').css("opacity", "1"); 
    } 
    } 
} 

Answer 1

नोट: यह जवाब 2011 में दिया गया था आगे बढ़ने से पहले एचटीएमएल 5 वीडियो पर अद्यतन प्रलेखन की जांच करें।

यदि आप सिर्फ यह जानना चाहते हैं कि वीडियो रोका गया है, तो ध्वज stream.paused का उपयोग करें।

खेल की स्थिति प्राप्त करने के लिए वीडियो तत्व के लिए कोई संपत्ति नहीं है। लेकिन एक घटना "खेल" है जो इसे खेलना शुरू होने पर ट्रिगर किया जाएगा। ईवेंट "समाप्त" ट्रिगर होता है जब यह खेलना बंद कर देता है।

तो समाधान

1. decalre एक चर videoStatus
2. है ईवेंट हैंडलर्स का उपयोग कर
3. उपयोग वीडियो के विभिन्न घटनाओं
4. अद्यतन के लिए ईवेंट हैंडलर्स जोड़ने videoStatus videoStatus वीडियो की स्थिति की पहचान करें

यह पृष्ठ आपको वीडियो ईवेंट के बारे में एक बेहतर विचार देगा। इस पृष्ठ पर वीडियो चलाएं और देखें कि ईवेंट कैसे ट्रिगर किए जाते हैं।
http://www.w3.org/2010/05/video/mediaevents.html

Answer 2

मैं एक ऐसी ही समस्या है जहाँ मैं के बाद यह पहले से ही बजाना शुरू किया जब तक खिलाड़ी ऐसे ईवेंट श्रोता जोड़ने में सक्षम नहीं था, इसलिए @ डायोड की विधि दुर्भाग्य से काम नहीं होगा का सामना करना पड़ा। मेरा समाधान जांचता था कि क्या खिलाड़ी की "रोके गए" संपत्ति को सत्य पर सेट किया गया था या नहीं। यह काम करता है क्योंकि वीडियो कभी भी खेलना शुरू होने से पहले "रोका गया" सत्य पर सेट होता है और इसके समाप्त होने के बाद, न केवल जब उपयोगकर्ता ने "रोकें" पर क्लिक किया है।

Answer 3

ऐसा लगता है कि आप बस !stream.paused की जांच कर सकते हैं।

Answer 4

jQuery(document).on('click', 'video', function(){ 
     if (this.paused) { 
      this.play(); 
     } else { 
      this.pause(); 
     } 
}); 

Answer 5

यहाँ है कि हम क्या http://www.develop.com/webcasts पर प्रयोग कर रहे हैं कोई वीडियो चलाना या रुका हुआ है, जबकि गलती से पृष्ठ छोड़ने से लोगों को रखने के लिए है।

$(document).ready(function() { 

    var video = $("video#webcast_video"); 
    if (video.length <= 0) { 
     return; 
    } 

    window.onbeforeunload = function() { 
     var htmlVideo = video[0]; 
     if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) { 
      return null; 
     } 

     return "Leaving this page will stop your video."; 
    }; 
} 

Answer 6

मैं सिर्फ कड़ी @tracevipin को देखा जोड़ा (http://www.w3.org/2010/05/video/mediaevents.html), और मैं एक संपत्ति नामित देखा "रोका गया"।

मैंने इसका परीक्षण किया है और यह ठीक काम करता है।

Answer 7

यह मेरा कोड है - फ़ंक्शन play() वीडियो को चलाकर या रोकता है और बटन छवि बदल जाती है।

फ़ंक्शन को कॉल करके volume() वॉल्यूम चालू/बंद है और बटन छवि भी बदलती है।

function play() { 
    var video = document.getElementById('slidevideo'); 
    if (video.paused) { 
    video.play() 
    play_img.src = 'img/pause.png'; 
    } 
    else { 
    video.pause() 
    play_img.src = 'img/play.png'; 
    } 
} 

function volume() { 
    var video = document.getElementById('slidevideo'); 
    var img = document.getElementById('volume_img'); 
    if (video.volume > 0) { 
    video.volume = 0 
    volume_img.src = 'img/volume_off.png'; 
    } 
    else { 
    video.volume = 1 
    volume_img.src = 'img/volume_on.png'; 
    } 
} 

Answer 8

How to tell if a <video> element is currently playing? पर मेरा जवाब:

MediaElement एक संपत्ति है कि इसके खेल है, तो या नहीं के बारे में बताता नहीं है। लेकिन आप इसके लिए एक कस्टम संपत्ति परिभाषित कर सकते हैं।

Object.defineProperty(HTMLMediaElement.prototype, 'playing', { 
    get: function(){ 
     return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); 
    } 
}) 

अब आप इस तरह video या audio तत्वों पर इसका इस्तेमाल कर सकते हैं:

if(document.querySelector('video').playing){ 
    // Do anything you want to 
} 

Answer 9

अपने मीडिया तत्व को eventlisteners जोड़ें। संभव घटनाओं ट्रिगर किया जा सकता हैं: Audio and video media events

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
<title>Html5 media events</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body > 
 
    <div id="output"></div> 
 
    <video id="myVideo" width="320" height="176" controls autoplay> 
 
     <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> 
 
     <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> 
 
    </video> 
 
    <script> 
 
     var media = document.getElementById('myVideo'); 
 

 
     // Playing event 
 
     var isPlaying = function(e) { 
 
      $("#output").html("Playing event triggered"); 
 
     }; 
 
     // Pause event 
 
     var onPause = function(e) { 
 
      $("#output").html("Pause event triggered"); 
 
     }; 
 
     // Volume changed event 
 
     var onVolumechange = function(e) { 
 
      $("#output").html("Volumechange event triggered"); 
 
     }; 
 
     // Seeking event 
 
     var onSeeking = function(e) { 
 
      $("#output").html("Seeking event triggered"); 
 
     }; 
 
     
 
     media.addEventListener("playing", isPlaying, false);  
 
     media.addEventListener("pause", onPause, false); 
 
     media.addEventListener("seeking", onSeeking, false); 
 
     media.addEventListener("volumechange", onVolumechange, false); 
 
    </script> 
 
</body> 
 
</html>

Answer 10

एक सा उदाहरण

var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') 
 

 
if (audio.paused) { 
 
    audio.play() 
 
} else { 
 
    audio.pause() 
 
}

Answer 11

मैं बस यह बहुत बस onpause का उपयोग करने और की onplay गुण किया एचटीएमएल वीडियो टैग। ग्लोबल वैरिएबल टॉगल करने के लिए कुछ जावास्क्रिप्ट फ़ंक्शन बनाएं ताकि पृष्ठ अन्य कार्यों के लिए वीडियो की स्थिति जानता हो।

नीचे जावास्क्रिप्ट:

// onPause function 
    function videoPause() { 
     videoPlaying = 0; 
    } 

    // onPause function 
    function videoPlay() { 
     videoPlaying = 1; 
    } 

एचटीएमएल वीडियो टैग:

<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" > 
          <source src="video/myvideo.mp4" type="video/mp4"> 

          </video> 

से आप इस मामले videoPlaying में स्थिति चर पर निर्भर करता है कुछ करने के लिए onclick जावास्क्रिप्ट का उपयोग कर सकते हैं।

आशा है कि यह मदद करता है ...