आप jQuery का उपयोग करके वीडियो src कैसे बदल सकते हैं?

Question

JQuery का उपयोग करके आप HTML5 वीडियो टैग के src को कैसे बदलते हैं?

मुझे यह HTML मिला:

<div id="divVideo">
  <video controls>
    <source src="test1.mp4" type="video/mp4" />
  </video>
</div>

यह काम नहीं करता है:

var videoFile = 'test2.mp4';
$('#divVideo video source').attr('src', videoFile);

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

मैं .pause () और .load () के बारे में पढ़ता हूं, लेकिन मुझे यकीन नहीं है कि उनका उपयोग कैसे किया जाए।

Answer 1

$("#divVideo video")[0].load();Src विशेषता को बदलने के बाद प्रयास करें ।

Comments

धन्यवाद, मैं बिना कोशिश कर रहा था [0]। लेकिन [0]मेरे चयनकर्ता ठीक एक वीडियो टैग का चयन करते हुए भी इसे जोड़ना चाहता है।

— वैभव विशाल

@VahavhavVishal संभवत: क्योंकि Jquery का अपना लोड फंक्शन है (संस्करण 3 से पहले, उनमें से दो)।

— DylanYoung

मेरे लिए काम किया, जहां मैं AJAX से src बदल रहा हूं।

— प्रियांकमोतिवरस

Answer 2

मैं इसे इस तरह बनाना चाहूंगा

<video  id="v1" width="320" height="240" controls="controls">

</video>

और फिर उपयोग करें

$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>' );

Answer 3

मैंने ऑटोप्ले टैग का उपयोग करने की कोशिश की है, और .load () .play () को अभी भी कम से कम क्रोम में बुलाया जाना चाहिए (शायद इसकी मेरी सेटिंग)।

आपके उदाहरण का उपयोग करके jquery के साथ ऐसा करने का सबसे सरल क्रॉस ब्राउज़र तरीका होगा

var $video = $('#divVideo video'),
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].play();

हालांकि जिस तरह से मैं आपको सुझाव दूंगा कि आप इसे (सुगमता और सरलता के लिए) करेंगे

var video = $('#divVideo video')[0];
video.src = videoFile;
video.load();
video.play();

इसके अलावा पढ़ना http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

अतिरिक्त जानकारी: .load () केवल तभी काम करता है यदि वीडियो तत्व के अंदर html स्रोत तत्व है (यानी <source src="demo.mp4" type="video/mp4" />)

गैर जक्वेरी तरीका होगा:

एचटीएमएल

<div id="divVideo">
  <video id="videoID" controls>
    <source src="test1.mp4" type="video/mp4" />
  </video>
</div>

जे एस

var video = document.getElementById('videoID');
video.src = videoFile;
video.load();
video.play();

Comments

मुझे एक जावास्क्रिप्ट त्रुटि मिलती है जो कहती है कि लोड समर्थित नहीं है। IE 11.

— न्यूक्लीक

मैंने आपकी त्रुटि वेड के संबंध में कुछ अतिरिक्त जानकारी जोड़ी है।

— विप्रो07

Answer 4

jQuery

<script type="text/javascript">
$(document).ready(function() {
  var videoID = 'videoclip';
  var sourceID = 'mp4video';
  var newmp4 = 'media/video2.mp4';
  var newposter = 'media/video-poster2.jpg';
 
  $('#videolink1').click(function(event) {
    $('#'+videoID).get(0).pause();
    $('#'+sourceID).attr('src', newmp4);
    $('#'+videoID).get(0).load();
     //$('#'+videoID).attr('poster', newposter); //Change video poster
    $('#'+videoID).get(0).play();
  });
});

Answer 5

स्रोत बदलने के बाद मेरे लिए जो काम किया गया वह 'प्ले' कमांड जारी कर रहा था। अजीब रूप से आप एक jQuery उदाहरण के माध्यम से 'प्ले ()' का उपयोग नहीं कर सकते हैं, इसलिए आप बस getElementByID का उपयोग करें:

एचटीएमएल

<video id="videoplayer" width="480" height="360"></video>

जावास्क्रिप्ट

$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>' );
document.getElementById("videoplayer").play();

Answer 6

     $(document).ready(function () {     
    setTimeout(function () {
                    $(".imgthumbnew").click(function () {
                        $("#divVideo video").attr({
                            "src": $(this).data("item"),
                            "autoplay": "autoplay",        
                        })
                    })
                }, 2000); 
            }
        });

here ".imgthumbnew" is the class of images which are thumbs of videos, an extra attribute is given to them which have video url. u can change according to your convenient.
i would suggest you to give an ID to ur Video tag it would be easy to handle.

Answer 7

सबसे आसान तरीका ऑटोप्ले का उपयोग करना है।

<video autoplay></video>

जब आप जावास्क्रिप्ट के माध्यम से src बदलते हैं तो आपको लोड () का उल्लेख करने की आवश्यकता नहीं होती है।

Comments

इसके साइडइफेक्ट्स हैं। आपको उनका उल्लेख करना चाहिए।

— डायलनयुंग

Answer 8

यह फ्लोप्लेयर 6.0.2 पर काम कर रहा है ।

<script>
    flowplayer().load({
         sources: [
            { type: "video/mp4",  src: variable }
            ]
        });
</script>

जहाँ चर एक जावास्क्रिप्ट / jquery चर मान है, वीडियो टैग कुछ इस प्रकार होना चाहिए

<div class="flowplayer">
   <video>
      <source type="video/mp4" src="" class="videomp4">
   </video>
</div>

आशा है कि यह किसी की मदद करता है।