从Javascript创建视频时无法应用视频js皮肤_Javascript_Html_Css_Video_Html5 Video

从Javascript创建视频时无法应用视频js皮肤

javascript html css video

从Javascript创建视频时无法应用视频js皮肤,javascript,html,css,video,html5-video,Javascript,Html,Css,Video,Html5 Video,我尝试使用javascript创建视频（并应用视频js皮肤），但似乎不起作用：( 这是我的密码： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <link href="http://vjs.zencdn.net/4.10/video-js.css" rel

我尝试使用javascript创建视频（并应用视频js皮肤），但似乎不起作用：(

这是我的密码：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <link href="http://vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/4.10/video.js"></script>
        <script>
            function createVideo()
            {
                var obj = document.createElement('video');
                $(obj).attr('id', 'example_video_test');
                $(obj).attr('class', 'video-js vjs-default-skin');
                $(obj).attr('width', '640');
                $(obj).attr('height', '464');
                $(obj).attr('controls', ' ');
                $(obj).attr('poster', 'http://video-js.zencoder.com/oceans-clip.jpg');
                $(obj).attr('preload', 'auto');
                $(obj).attr('data-setup', '{}');

                var 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);
            }
        </script>
    </head>
    <body>
        <button id="btnCreateVideo" onclick="createVideo()">Create Video</button>
        <br /><br /><br />
        <div id="content"></div>
        <hr />
    </body>
</html>


函数createVideo（）
{
var obj=document.createElement（'video'）；
$（obj）.attr（'id'，'example\u video\u test'）；
$（obj.attr（'class'，'video js vjs default skin'）；
$（obj）.attr（'width'，'640'）；
$（obj）.attr（'height'，'464'）；
$（obj.attr（'控制'，''）；
$（obj）.attr（'海报'，'http://video-js.zencoder.com/oceans-clip.jpg');
$（obj）.attr（'preload'，'auto'）；
$（obj）.attr（'data-setup'，'{}'）；
var source=document.createElement（'source'）；
$（source.attr（'type'，'video/mp4'）；
$（源）.attr（'src'，'http://video-js.zencoder.com/oceans-clip.mp4');
$（“#内容”）。追加（obj）；
$（obj）.追加（来源）；
}
创建视频

单击“创建视频”按钮后，将创建视频，但不应用视频js皮肤。有人知道如何解决这个问题吗？谢谢！

Js:

$(function () {
  var obj = $('<video>').attr({
      'class': 'video-js vjs-default-skin',
      'width': '640px',
      'height': '464',
      'controls': ' ',
      'poster': 'http://video-js.zencoder.com/oceans-clip.jpg',
      'preload': 'auto',
      'data-setup': '{}'
    }),
      source = $('<source>').attr({
        'type': 'video/mp4'
      });
  $('#btnCreateVideo').on('click', function () {
    var videoCloned = obj.clone().append(source.clone().attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4'));
    console.dir(videoCloned);
    $('#content').append(videoCloned);            
    videojs(videoCloned[0], {}, function() {
      console.log('done');
    });
  });
});

$（函数（）{
var obj=$（''）.attr({
'class'：'video js vjs default skin'，
“宽度”：“640px”，
‘高度’：‘464’，
“控件”：“，
‘海报’http://video-js.zencoder.com/oceans-clip.jpg',
“预加载”：“自动”，
“数据设置”：“{}”
}),
源=$（''）.attr({
“类型”：“视频/mp4”
});
$（'#btnCreateVideo'）。在（'click'，函数（）{
var videoclone=obj.clone（）.append（source.clone（）.attr（'src'，'http://video-js.zencoder.com/oceans-clip.mp4'));
console.dir（视频克隆）；
$（“#内容”）.append（视频克隆）；
videojs（videoCloned[0]，{}，函数（）{
console.log（'done'）；
});
});
});

html:


创建视频

/*这里是你的javascript*/

这是因为在他们推荐使用的页面文档中：videojs（）和要动态应用的对象。

检查css文件内部是否存在图像文件或其他文件的依赖项

<!DOCTYPE html>
 <html>
    <head>
        <link href="//vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">


    </head>
    <body>
        <button id="btnCreateVideo" >Create Video</button>
        <div id="content"></div>
        <hr />
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       <script src="//vjs.zencdn.net/4.10/video.js"></script>
       <script>/*intert here your javascript*/</script>
    </body>
</html>