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

Unable to apply video-js skin when creating video from Javascript

本文关键字：应用 video-js 皮肤 Javascript 创建 视频      更新时间：2023-09-26

我尝试使用 javascript 创建视频（并应用 video-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>

单击"创建视频"按钮后，将创建视频，但不应用video-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');
    });
  });
});

.html：

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

发生这种情况是因为在页面的文档中，他们建议使用 ：videojs（）。以及要动态应用的对象。

相关文章：