如何完全从JavaScript添加新视频？_Javascript_Html_Html5 Video_Video.js

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

javascript html

如何完全从JavaScript添加新视频？,javascript,html,html5-video,video.js,Javascript,Html,Html5 Video,Video.js,我试图添加一个新的VideoJS对象，并完全从JS进行设置，而不需要DOM视频元素。结果是加载了视频，但没有任何VideoJS控件。代码如下： obj = document.createElement('video'); $(obj).attr('id', 'example_video_1'); $(obj).attr('class', 'video-js vjs-default-skin');

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

我将感谢任何帮助，谢谢

好的，看了一下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>

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上

更新：

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

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

正如注释中指出的，

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

var属性={
'id'：'example_video_test'，
'class'：'video js vjs default skin'，
“宽度”：“640”，
“数据高度”：“264”，
“控件”：“，
‘海报’http://video-js.zencoder.com/oceans-clip.jpg',
“预加载”：“自动”，
“数据设置”：“{}”
}
变量元素=$（''）.attr（属性）
//您还必须添加源元素等，但这会
//一个简短方法的好例子

它可以工作，谢谢！我发现V函数中不需要像VideoJS website.OT中所述的那样：

.attr（）

也需要一个对象，它可以让您在一次操作中很好地设置所有属性。另外，将jQuery对象缓存到变量中也是一种很好的做法：

var$obj=$（''）.attr（{…}）.

。请注意，您还可以在VJS中进行大量视频设置（实际上是首选项）。您只需使用id设置视频，然后使用Videojs使用选项和新的src初始化播放器。