¿Cómo agrego nuevo video completamente desde JavaScript?

Estoy tratando de agregar un nuevo objeto VideoJS y configurarlo completamente desde JS, sin tener un elemento de video DOM. El resultado es que el video está cargado pero no hay controles VideoJS. Aquí está el código:¿Cómo agrego nuevo video completamente desde JavaScript?

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

apreciaré cualquier ayuda, gracias!

Fuente

2012-08-03 Light

Okay echó un vistazo a video-js, es bastante agradable. Prueba esto:

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:

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 en jsbin.

actualizaciones:

Como polarblau señalado en un comentario el jQuery.attr() puede tomar un objeto en lugar de tener que llamar varias veces jQuery.attr() como en mi primer ejemplo.

nota: Lo siguiente es solo un ejemplo y no una demostración en funcionamiento.

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

Fuente

2012-08-03 09:16:19 Sphvn

¡Funciona, gracias! Veo que no hay necesidad en la función _V_ como se indica en el sitio web de VideoJS. – Light

OT: '.attr()' también toma un objeto que le permite configurar todos los atributos de una sola vez. También el almacenamiento en memoria caché de objetos jQuery en variables es una buena práctica: 'var $ obj = $ ('

Solo una nota, también puedes hacer una gran cantidad de la configuración de video en VJS (de preferencia realmente). Puede simplemente configurar un video con una identificación, luego use Videojs para inicializar el reproductor con opciones y un nuevo src. –

¿Cómo agrego nuevo video completamente desde JavaScript?

Respuesta

Cuestiones relacionadas