मैं जावास्क्रिप्ट से पूरी तरह से नया वीडियो कैसे जोड़ूं?

मैं एक नया वीडियोजेएस ऑब्जेक्ट जोड़ने की कोशिश कर रहा हूं और इसे डीओएम वीडियो तत्व के बिना पूरी तरह से जेएस से सेट अप कर रहा हूं। परिणाम यह है कि वीडियो लोड किया गया है लेकिन कोई वीडियोजेएस नियंत्रण नहीं है।मैं जावास्क्रिप्ट से पूरी तरह से नया वीडियो कैसे जोड़ूं?

obj = document.createElement('video'); 
       $(obj).attr('id', 'example_video_1'); 
       $(obj).attr('class', 'video-js vjs-default-skin'); 

       var source = document.createElement('source'); 
       $(source).attr('src', path); 
       $(source).attr('type', 'video/mp4'); 
       $(obj).append(source); 

       $("#content").append(obj); 
       _V_("example_video_1", {}, function() { 
        // 
        } 
       });

मैं किसी भी मदद के लिए धन्यवाद की सराहना करेंगे,: यहाँ कोड है!

स्रोत

2012-08-03 Light

ठीक है वीडियो-जेएस पर एक नज़र डाली, यह काफी अच्छा है। इस प्रयास करें:

HTML:

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
    <script src="http://vjs.zencdn.net/c/video.js"></script> 
    </head> 
    <body> 
    <div id="content"> </div> 
     <!-- appending video here --> 
    <hr /> 
    <!-- written in html --> 
    <video id="example_video_by_hand" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}"> 
    <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"> 
    </video> 
    </body> 
</html>

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

var obj, 
    source; 

obj = document.createElement('video'); 
$(obj).attr('id', 'example_video_test'); 
$(obj).attr('class', 'video-js vjs-default-skin'); 
$(obj).attr('width', '640'); 
$(obj).attr('data-height', '264'); 
$(obj).attr('controls', ' '); 
$(obj).attr('poster', 'http://video-js.zencoder.com/oceans-clip.jpg'); 
$(obj).attr('preload', 'auto'); 
$(obj).attr('data-setup', '{}'); 

source = document.createElement('source'); 
$(source).attr('type', 'video/mp4'); 
$(source).attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4'); 

$("#content").append(obj); 
$(obj).append(source);

jsbin पर Working example।

अपडेट:

polarblau के रूप में एक टिप्पणी में कहा jQuery.attr() बल्कि मेरा पहला उदाहरण की तरह jQuery.attr() कई बार फोन करने के लिए की तुलना में एक वस्तु ले सकते हैं।

नोट: नीचे एक उदाहरण है और कामकाजी डेमो नहीं है।

var attributes = { 
    'id': 'example_video_test', 
    'class': 'video-js vjs-default-skin', 
    'width': '640', 
    'data-height': '264', 
    'controls': ' ', 
    'poster': 'http://video-js.zencoder.com/oceans-clip.jpg', 
    'preload': 'auto', 
    'data-setup': '{}' 
} 

var element = $('<video/>').attr(attributes) 
//you would also have to add the source element etc but this gives 
//a good example of a shorter approach

स्रोत

2012-08-03 09:16:19 Sphvn

यह काम करता है, धन्यवाद! मुझे लगता है कि VideoJS वेबसाइट में बताए गए _V_ फ़ंक्शन में आवश्यकता नहीं है। – Light

ओटी: '.attr() 'एक ऑब्जेक्ट भी लेता है जो आपको सभी बैठकों को एक बैठे में अच्छी तरह से सेट करने देता है। चर में jQuery ऑब्जेक्ट्स को कैशिंग करना भी एक अच्छा अभ्यास है: 'var $ obj = $ ('

बस एक नोट, आप वीजेएस में भी बहुत सारे वीडियो सेटअप कर सकते हैं (वरीयता वास्तव में)। आप बस एक आईडी के साथ एक वीडियो स्थापित कर सकते हैं, फिर विकल्प के साथ प्लेयर को शुरू करने के लिए Videojs का उपयोग करें और एक नया स्रोत। –

मैं जावास्क्रिप्ट से पूरी तरह से नया वीडियो कैसे जोड़ूं?

उत्तर

संबंधित मुद्दे