如何将videojs从一个div复制到另一个div？

Question

如何将videojs从一个div复制到另一个div？

3

我有一个包含videojs的div。

<div id="video">
    <video id="example_video_1" class="video-js vjs-default-skin" width="200" height="200" data-setup="{}">
        <source src="clip.mp4" type='video/mp4' />
    </video>
</div>

现在，我正在尝试将这个视频复制到另一个 div 中。

jQuery(document).ready(function(){
    var video = jQuery('#video').clone(true, true);
    jQuery('#block').append( video );
});

它复制了那个视频播放器，但是它不能正常工作（无法播放视频）。将videojs从一个div复制到另一个div的正确方法是什么？

- Alvarez

你的控制台中是否出现任何JS错误？当你将视频移动后尝试播放时，播放器返回/显示什么？ - dchayka

点击播放按钮时没有任何反应，没有错误提示。 - Alvarez

我用Chrome测试了你的代码，对我来说它是有效的。 - dchayka

仅仅克隆DOM并不足以创建一个可工作的video.js播放器。你到底想要实现什么，需要两个播放器的副本呢？ - misterben

这有点复杂解释...我想到了一个解决方案，根据现有视频中可用的信息重新创建一个新视频，但仍然存在问题。 - Alvarez

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- studio-klik · Answer 1

将id＃video的整个HTML复制到id＃block中，如下所示：

示例：http://codesheet.org/codesheet/T4qjlenn

 $( "#copy" ).click(function() {
  var htmlString = $( "#video" ).html();
  $( "#block" ).html( htmlString );
});

- dchayka · Answer 2

我没有安装Video JS，但似乎你只需要重新初始化播放器本身。

参考资料：http://docs.videojs.com/docs/guides/setup.html

如果您的网页或应用程序动态加载视频标签（ajax、appendChild等），以便在页面加载时可能不存在，则需要手动设置播放器，而不是依赖于data-setup属性。为此，请首先从标记中删除data-setup属性，以便在初始化播放器时不会产生混淆。接下来，在Video.js JavaScript库加载完成并且视频标签已加载到DOM中之后的某个时间运行以下JavaScript代码。

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

videojs函数中的第一个参数是您的视频标签的ID。请将其替换为您自己的ID。第二个参数是一个选项对象。它允许您设置其他选项，就像使用data-setup属性一样。第三个参数是一个“ready”回调。一旦Video.js初始化完成，它将调用此函数。除了使用元素ID之外，您还可以传递对元素本身的引用。

videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});

videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});

我希望这是你要找的。