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

【问题标题】：How do I add new Video entirely from JavaScript?如何完全从 JavaScript 添加新视频？
【发布时间】：2012-08-01 07:29:08
【问题描述】：

我正在尝试添加一个新的 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 () {
                    //
                    }
                });

我将不胜感激，谢谢！

【问题讨论】：

标签： javascript html html5-video video.js

【解决方案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);

Working example 在 jsbin 上。

更新：

正如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

【讨论】：

它有效，谢谢！我看到 VideoJS 网站中所述的 V 功能不需要。
OT：.attr() 也接受一个对象，它可以让您一次很好地设置所有属性。将 jQuery 对象缓存到变量中也是一个很好的做法：var $obj = $('<video/>').attr({…}) … .
请注意，您也可以在 VJS 中进行很多视频设置（真的很喜欢）。您可以设置一个带有 id 的视频，然后使用 Videojs 使用选项和新的 src 初始化播放器。