Yeni Videoyu tamamen JavaScript’ten nasıl ekleyebilirim?

Yeni bir VideoJS nesnesi eklemeye ve DOM video öğesi olmadan tamamen JS'den kurmaya çalışıyorum. Sonuç olarak video yüklenir ancak VideoJS denetimleri yoktur. Ben, teşekkürler herhangi bir yardım takdir edecektirYeni Videoyu tamamen JavaScript’ten nasıl ekleyebilirim?

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() { 
        // 
        } 
       });

: İşte kodudur!

kaynak

2012-08-03 Light

Tamam, video-js'ye bir göz attım, oldukça hoş. Bu deneyin:

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>

JavaScript: jsbin üzerine

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);

Working example.

Güncellemeler: yorumunda işaret

polarblau gibi jQuery.attr() ziyade benim ilk örnekteki gibi jQuery.attr() birden çok kez aramak zorunda daha bir nesne alabilir.

not: Aşağıda sadece bir örnek ve çalışan bir demo değil.

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

kaynak

2012-08-03 09:16:19 Sphvn

Çalışıyor, teşekkürler! VideoJS web sitesinde belirtildiği gibi _V_ işlevinde gerek olmadığını görüyorum. – Light

OT: '.attr()' bir özniteliği de alır, bu da tüm özellikleri bir arada oturtmanızı sağlar. Ayrıca jQuery nesnelerini değişkenlere ayırmak iyi bir uygulamadır: 'var $ obj = $ ('

Sadece bir not olarak, VJS'de de bir çok video kurulumu yapabilirsiniz (tercih gerçekten). Sadece bir kimliğe sahip bir video oluşturabilir, daha sonra oynatıcıyı seçeneklerle ve yeni bir src ile başlatmak için Videojimleri kullanabilirsiniz. –

Yeni Videoyu tamamen JavaScript’ten nasıl ekleyebilirim?

cevap

İlgili konular