Wie füge ich neue Video vollständig aus JavaScript?

Ich versuche, fügen Sie eine neue VideoJS-Objekt und stellen Sie es ganz von JS, die zimmerreserviereung, ohne das eine DOM-video-element.
Das Ergebnis ist, dass das video geladen ist, aber es gibt keine VideoJS kontrolliert.
Hier ist der code:

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

Werde ich für jede Hilfe dankbar, vielen Dank!

InformationsquelleAutor Light | 2012-08-03
  1. 8

    Okay warf einen Blick auf video-js, es ist ganz nett. Versuchen Sie dies:

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

    Beispiel auf jsbin.

    Updates:

    Als polarblau wies in einem Kommentar der jQuery.attr() nehmen kann, sondern als ein Objekt aufzurufen jQuery.attr() mehrere Male, wie in meinem ersten Beispiel.

    Hinweis: Das unten ist nur ein Beispiel und nicht auf eine funktionierende demo.

     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
    • Es funktioniert, vielen Dank! Ich sehe, gibt es keine Notwendigkeit, in der V - Funktion wie angegeben in der VideoJS-website.
    • OT: .attr() nimmt ein Objekt als gut, die können Sie alle Attribute schön in einer Sitzung. Auch caching-jQuery-Objekte in den Variablen ist ein guter Praxis: var $obj = $('<video/>').attr({…}) … .
    • Nur eine Anmerkung, man kann auch eine Menge von video-setup in der VJS als auch (Präferenz wirklich). Sie können ein video mit einer id, dann verwenden Sie Videojs, die zum initialisieren des player-Optionen und eine neue src.
    InformationsquelleAutor Sphvn
Schreibe einen Kommentar