JQuery का उपयोग करके HTML 5 वीडियो चलाएं / रोकें

Question

मैं JQuery का उपयोग करके HTML5 वीडियो को नियंत्रित करने की कोशिश कर रहा हूं। मेरे पास टैब किए गए इंटरफ़ेस में दो क्लिप हैं, कुल छह टैब हैं, अन्य में केवल छवियां हैं। मैं कोशिश कर रहा हूं कि जब उनके टैब पर क्लिक किया जाए और जब कोई अन्य क्लिक किया जाए तो वीडियो क्लिप बनाने की कोशिश करें।

यह करने के लिए एक साधारण बात होनी चाहिए, लेकिन मुझे लगता है कि यह काम करने के लिए नहीं मिलेगा, कोड मैं वीडियो खेलने के लिए उपयोग कर रहा हूं:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

मैंने पढ़ा है कि वीडियो तत्व को नियंत्रित करने में सक्षम होने के लिए एक फ़ंक्शन में उजागर किया जाना चाहिए, लेकिन एक उदाहरण नहीं मिल सकता है। मैं JS का उपयोग करके इसे काम करने में सक्षम हूं:

document.getElementById('movie1').play();

कोई भी सलाह बहुत उपयोगी होगी। धन्यवाद

Answer 1

आपका समाधान यहां समस्या दिखाता है - playएक jQuery फ़ंक्शन नहीं है, बल्कि DOM तत्व का एक फ़ंक्शन है। इसलिए आपको DOM तत्व पर कॉल करने की आवश्यकता है। आप इसका एक उदाहरण देते हैं कि मूल डोम कार्यों के साथ ऐसा कैसे करें। JQuery समतुल्य - यदि आप मौजूदा jQuery चयन में फिट होने के लिए ऐसा करना चाहते थे - होगा $('#videoId').get(0).play()। ( getjQuery चयन से मूल डोम तत्व प्राप्त होता है।)

Comments

यह बहुत अच्छा है, पूरी तरह से काम करता है, वास्तव में धन्यवाद। DOM को बेहतर तरीके से समझने के लिए भी अच्छा है।

— Barny83

इस तरह से वीडियो को नियंत्रित करने के लिए JQuery का उपयोग करने से iPhone पर प्लेबैक की समस्या पैदा होती है। मेरे पास टैब में वीडियो तत्व है, jquery यह प्रकट करता है, लेकिन फिर वीडियो प्रारंभ तीर पर क्लिक करने से क्लिप शुरू नहीं होती है। जब मैं $ ('# वीडियोआईड') निकालता हूं। (0) .play () लाइन में कोई समस्या नहीं है। इसके आसपास सबसे अच्छा तरीका क्या है? मैं सोच रहा था कि मैं आईओएस के लिए एक संक्षेप बयान के साथ जेएस को हटा सकता हूं - वीडियो वैसे भी आईओएस उपकरणों के लिए ऑटोस्टार्ट नहीं करेगा इसलिए ऐसा करने में खुशी होगी - या एक सरल समाधान है? किसी भी मदद की बहुत सराहना की।

— 1583 पर Barny83

मैं इस पृष्ठ पर सभी <वीडियो> तत्वों को कैसे रोक सकता हूं ?

— प्रिज्मस्पेक्ट्स

@russellsayshi - नहीं, वह केवल एक वीडियो चलाएगा; प्रिज्मपेक्स ने सभी वीडियो के लिए कहा। सही वाक्यविन्यास: $('video').each(this.play());सभी को खेलने के लिए; $('video').each(this.pause());सभी को थामने के लिए। each()एक jQuery फ़ंक्शन है, जो इसमें दिया गया है वह एक जावास्क्रिप्ट फ़ंक्शन है, जो प्रत्येक तत्व पर लागू होता है। जैसा कि प्रत्येक तत्व को संभाला जाता है, thisउस तत्व का प्रतिनिधित्व करता है।

— टूलमेकरसेव

यदि केवल पहला तत्व चाहते हैं, के .get(0)साथ बदलकर सरल कर सकते हैं [0]। तो $('video')[0].play();या एक विशिष्ट आईडी के लिए $('#videoId')[0].play();।

— टूलमेकरसेव

Answer 2

यह है कि मैं इसे कैसे काम करने में कामयाब रहा:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

मेरे सभी HTML5 टैग में 'myHTMLvideo' श्रेणी है

Comments

ध्यान दें कि jQuery में लपेटने की कोई आवश्यकता नहीं है ताकि आप इस के साथ टर्नरी लाइन को बदलकर उस ओवरहेड को बचा सकें:this.paused ? this.play() : this.pause();

— पीट वाट्स

Answer 3

तुम कर सकते हो

$('video').trigger('play');
$('video').trigger('pause');

Comments

आप भी टॉगल कर सकते हैं: $ ('वीडियो')। ट्रिगर ($ ('वीडियो')। प्रोप ('पीड')? 'प्ले': 'पॉज़');

— दारियो पीएम

Answer 4

आपको jQuery का उपयोग करने की आवश्यकता क्यों है? आपका प्रस्तावित समाधान काम करता है, और यह संभवतः jQuery ऑब्जेक्ट के निर्माण से अधिक तेज़ है।

document.getElementById('videoId').play();

Comments

यदि आप एक jQuery कार्यान्वयन पर जोर देते हैं (तो आप सिर्फ playएक jQuery वस्तु पर कॉल क्यों नहीं कर सकते हैं) के स्पष्टीकरण के लिए lonesomeday के समाधान को देखें ।

— सूडो काम

मैं सोच रहा था कि मैं अन्य jQuery के भीतर कोड का उपयोग करूंगा, और शायद ऐसा करूंगा, लेकिन जैसा कि मैं खड़ा हूं मैं बस उस लाइन का उपयोग कर रहा हूं इसलिए मुझे लगता है कि यह मेरे पास कोड के साथ किया जा सकता था ... मुझे भी यकीन नहीं था अगर वह मिश्रण करने के लिए अच्छा अभ्यास था। वैसे भी सलाह के लिए धन्यवाद।

— Barny83

आप पहले से ही के लिए एक jQuery वस्तु instantiated गया है movie1के माध्यम से $('movie1')अन्य jQuery गतिविधियां और फिर यह ठीक करने के लिए; हालाँकि, यदि आप इसे इस एक स्थान पर कर रहे हैं, तो आपको कुछ प्रदर्शन हानि होने वाली है। यह पर्याप्त रूप से ध्यान देने योग्य नहीं हो सकता है, लेकिन मुझे बहुत कुछ अनुकूलन करना पसंद है।

— सूदो काम

@sudowork - गंभीरता से? वीडियो चलाने की शुरुआत करते समय आप प्रदर्शन हानि पर चर्चा कर रहे हैं? यदि आपका डिवाइस वीडियो चलाने के लिए पर्याप्त तेज़ है, तो यह उपयोगकर्ता की सूचना के बिना jQuery की एक बैरल क्रिया करने के लिए पर्याप्त तेज़ है।

— टूलमेकरस्टेव

Answer 5

कई वीडियो रोकने के लिए मैंने पाया है कि यह अच्छी तरह से काम करता है:

$("video").each(function(){
    $(this).get(0).pause();
});

यह एक क्लिक फ़ंक्शन में डाला जा सकता है जो काफी आसान है।

Comments

आप ऐसा ही कर सकते हैं: $ ("वीडियो")। प्रत्येक (फ़ंक्शन () {this.pause ()});

— मार्सेल एम।

$ (यह) -> आप "इस" ऑब्जेक्ट से jquery ऑब्जेक्ट बनाते हैं। get (0) -> आप मूल "इस" वस्तु को jquery वस्तु से वापस प्राप्त करते हैं ... यह === $ (यह) .get (0)

— ब्लैकफेयर

Answer 6

लोन्सोमेडे के उत्तर के विस्तार के रूप में, आप भी उपयोग कर सकते हैं

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

ध्यान दें कि कोई भी () या eq () jQuery फ़ंक्शन नहीं है। DOM का ऐरे प्ले (कॉल) फंक्शन का उपयोग करता है। इसे ध्यान में रखना एक शॉर्टकट है।

Answer 7

मैं यह पसंद है:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

आशा करता हूँ की ये काम करेगा।

Answer 8

मैं एक वीडियो एम्बेड करने के लिए फैंसीबॉक्स और jQuery का उपयोग करता हूं। इसे एक आईडी दें।

शायद बेस्ट सॉल्यूशन अलग तरह से प्ले / पॉज़ को टॉगल नहीं कर सकता था - लेकिन मेरे लिए आसान है और यह काम करता है! :)

में

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

Answer 9

यह आसान तरीके हैं जिनका हम उपयोग कर सकते हैं

jquery बटन पर क्लिक करें फ़ंक्शन

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

धन्यवाद

Answer 10

एक नोट के रूप में, सुनिश्चित करें कि आप ब्राउजर वीडियो फ़ंक्शन का समर्थन करते हैं, इससे पहले कि आप इसे लागू करने का प्रयास करें:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

वीडियो टैग का समर्थन नहीं करने वाले ब्राउज़रों पर जावास्क्रिप्ट त्रुटियों को रोका जा सकेगा।

Answer 11

चयनकर्ताओं का उपयोग करके JQuery द्वारा

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

आईडी का उपयोग करके जावास्क्रिप्ट द्वारा

video_ID.play();  video_ID.pause();

या

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();

Answer 12

इसे इस्तेमाल करो.. $('#video1').attr({'autoplay':'true'});

Comments

"मैं वीडियो क्लिप बनाने की कोशिश कर रहा हूं जब उनके टैब पर क्लिक किया जाता है" - तो एक घटना नियंत्रित हैंडलिंग की आवश्यकता होती है।

— डेविंडके

Answer 13

मैंने भी इसे इस तरह से काम किया:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});

Answer 14

@loneSomeday ने इसे खूबसूरती से समझाया, यहां एक समाधान है जो आपको अच्छा विचार दे सकता है कि कैसे खेलें / कार्यक्षमता को प्राप्त करें

क्लिक पर वीडियो का प्ले / पॉज

Answer 15

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script> 

Comments

Pl अपने उत्तर में कुछ स्पष्टीकरण जोड़ते हैं

— साहिल मित्तल

Answer 16

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

Comments

नमस्ते, ढेर अतिप्रवाह में आपका स्वागत है। जब किसी प्रश्न का उत्तर दिया जा रहा हो, जिसमें पहले से ही कई उत्तर हों, तो कृपया कुछ अतिरिक्त जानकारी जोड़ना सुनिश्चित करें कि जो प्रतिक्रिया आप प्रदान कर रहे हैं, वह मूल क्यों है और मूल पोस्टर द्वारा पहले से ही बताई गई गूंज क्या है। यह "कोड-ओनली" उत्तरों में विशेष रूप से महत्वपूर्ण है जैसे कि आपने जो प्रदान किया है।

— चब

Answer 17

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 

<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

Comments

आपके उत्तर में समाधान काम नहीं कर रहा है

— Cray