Question

我正在尝试添加一个新的VideoJS对象并完全从JS设置它，而没有DOM视频元素。结果是视频已加载，但没有任何VideoJS控件。这是代码：

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

我将不胜感激，谢谢！

Answer 1

好的看了一下video-js，这很不错。试试这个：

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

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

如何完全从JavaScript添加新视频？

1 个答案: