实时视频流/如何在点击时调整（和移动）它们的大小？

Question

我正在努力实现以下目标：

我有简单的 html5 视频流运行在网站上直播（1-6 号）。我想，单击这些较小的缩略图之一，它会显示在较大的主要 'window' 的顶部。我希望你明白我的意思。如果没有任何第 3 方工具，这甚至可能吗？

Answer 1

应该是这样的（这个例子需要 jQuery，直接在这里输入）

JS:

$(document).ready(function() {
  $('.thumbnail').on('click',function() {
    var videoSrc = $(this).attr('data-video');
    $('#mainFrame').attr('src', videoSrc);
  });
});

HTML 需要零件：

<video id="mainFrame"></video>
<div class="thumbnail" data-video="URL_TO_VIDEO"></div>
<div class="thumbnail" data-video="URL_TO_VIDEO"></div>

这假设您已经完成样式等

实时视频流/如何在点击时调整（和移动）它们的大小？

Live video streams / How to resize (and move) them on click?

html

video

resize